Show SVG in its size ViewBox

I am using the img-Tag to display SVG images which my users uplaoded to my Amazon S3 bucket.

<img src="" />

The problem is that, once the image is loaded and shown, it's not the size it was constructed for. For example a test image is displayed with a size of 1920x1920px but its ViewBox is 0 0 128 128 . However, I would like to display the image in the size of its ViewBox . In this case 128x128px .

The only idea I came up with is downloading the image with an ajax request and parse the ViewBox attribute out of the svg source. Than I adjust the size. However, I do not want to make any unnecessary http requests and I am looking for a solution to read the images ViewBox dimensions. I could use the <object>-Tag to load the image but since it's hosted on Amazon I get a cross domain issue and cannot read the svgs source. Even when adding CORS rules to my bucket.


You could try this approach :

  • Download the svg file with an Ajax request.
  • Parse the viewbox of that svg from the response.
  • Create a new Image();
  • Set the image's src to "data:image/svg+xml; charset =utf8,"+encodeURIComponent( the ajax response ) .
  • Set the image width/height from the viewBox infos you grabbed step 2 (via css or in its attributes).

That should work for all majors browsers supporting svg in <img> , and since you just appended the response string into the image src, you only make one single request to Amazon's servers.

So, e.g, it could give you a function like so :

function viewBoxedImgSVG(container, url){
    //There might be a better way to parse it...
    var parseViewBox = function(data){
        var parsed = data.match(/viewBox="(.*?)."/);
        if(parsed) return parsed[1].split(' ');
    var xhr= new XMLHttpRequest();
    xhr.onload = function(){
        var img = new Image();
        // responseText for IE, but doesn't support SMIL in img tag anyway
        img.src = "data:image/svg+xml; charset=utf8,"+encodeURIComponent(xhr.responseText);
        var vB = parseViewBox(xhr.responseText);
            img.width = vB[2];
            img.height = vB[3];
        }'GET', url);