What to do with SVG so it can be resized using Javascript?

Question

Let's say I loaded SVG, displayed it in browser, and so far it is OK.

Now, I would like to resize it. All methods I found googling failed to give me the desired effect.

It is all variations of:

$svg.removeAttr('width')
    .removeAttr('height')
  //.attr('preserveAspectRatio','xMinYMin meet')
  //.css('width',width+'px')
  //.css('height',height+'px')
    .css('width','100%')
    .css('height','100%')
    .attr('viewBox','0 0 '+width+' '+height)
    ;

Nothing. I get the view of desired size, but the image (SVG) is clipped to that view instead of being resized. Setting size via attributes does not change a thing. Like the size of that SVG is carved in stone.

Thanks to frenchie answer (see below) it appears JS tries hard to resize SVG and for basic SVG it just works. So the real question is -- what to do with SVG (real-world SVG, not just a rectangle) so Javascript would be able to resize it?

SVG I am testing: http://jsfiddle.net/D6599/

I created SVG with Inkscape, and this is how I load SVG in JS:

$.get(svg_url, function(data) {
    // Get the SVG tag, ignore the rest
    svg = $(data).find('svg')
            .attr('id', 'SVG')
            // Remove any invalid XML tags as per http://validator.w3.org
           .removeAttr('xmlns:a')
           [0];

    on_load();
}, 'xml');

The code comes from How to change color of SVG image using CSS (jQuery SVG image replacement)?. What I have later on is svg element (I wrapped it using jQuery).

This is not the question how to load SVG, or what to do with cross-domain issue. SVG loads fine, it is the same domain as the script (my disk).

@SLaks, without `viewBox` SVG is displayed in original size, without clipping, **AND** without resizing. So, not the effect I want. — greenoldman, Jun 29 '14 at 20:31

frenchie · Answer 1 · 2014-06-29T20:43:53.807

2

Your SVG markup should look like this:

<svg id="SomeID" height="20" width="20">......</svg>

So all you need to do is reset the css properties. Something like this should work:

$('#SomeID').css({'width':40, 'height' :40});

And if you can't change the id of the SVG markup then you can simply wrap it around a div like this:

<div id="SomeID"><svg>....</svg></div>

$('#SomeID').find('svg').css({'width': 40, 'height': 40});

Here's a jsFiddle:

function Start() {  
    $('#TheButton').click(ResizeSVG);    
};

function ResizeSVG() {    
    $('#TheSVG').css({'width':40, 'height' :40});
}

$(Start);

edited Jun 29 '14 at 20:43

answered Jun 29 '14 at 20:29

frenchie

51,731
109
304
510

1

Thank you, but I don't understand -- first you say that the attributes should hold the size, next you set the style. Those are different things. Anyway, I will just test both of them. – greenoldman Jun 29 '14 at 20:33
Well look at the actual svg markup and post the markup in a jsFiddle so we can have a look. – frenchie Jun 29 '14 at 20:35
I just tried the code with changing style and attributes. The **values** changed, however the content is like frozen. I uploaded SVG to http://jsfiddle.net/D6599/ Please note I don't have HTML with hand written SVG in it, I load it dynamically as I showed in my question. In `on_load` I try to resize it. – greenoldman Jun 29 '14 at 20:39
Ha! So the question should be actually in reverse -- what to do with SVG so it can be resized using Javascript? – greenoldman Jun 29 '14 at 20:50
1

So I looked in what you posted here http://jsfiddle.net/D6599/3/ When you click the button, on your SVG, it changes the size of the image but not of the actual content. On the Fiddle I posted, the same code resized the content. I'm not an SVG expert but it seems to me that the SVG you have isn't setup the be resized dynamically. What you can try is manually make the change in InkScape and see what the difference is in the markup and replicate those changes using jQuery like I'm doing with the width/height. – frenchie Jun 29 '14 at 20:56
Thank you and of course I will try, but I am not expert either :-) And I will look to set some flag to allow dynamic resize, because what I need is dynamic resize, not just single hardfixed resize and then using it all time. – greenoldman Jun 29 '14 at 21:39
Ok, I think if you get that part working then the actual resizing in the browser should be straight-forward. – frenchie Jun 29 '14 at 22:27

score 0 · Accepted Answer · answered Jun 30 '14 at 16:29

Finally I found it. I hope it will change in future, but for now there is a crucial difference if you change attribute by editing actual SVG file, and changing SVG on-fly using Javascript.

In order JS could resize SVG you have to manually edit SVG file and change height and width attributes to following lines.

Before:

width="600px"
height="560px"

After:

viewBox="0 0 600 560"
width="100%"
height="100%"

Of course in your case the values will be different. Please note that you can change those attributes programmatically with Javascript but it does not work (at least not for me).

Now, you can load such file as usual and compute, let's say width/height ratio.

var vbox = $svg.attr('viewBox').split(' ');
var w_ratio = vbox[2]/vbox[3]; // width/height

Such fixed file is still readable by Inkscape, I don't know how about other programs.

It's because you're using jquery I think. It lowercases the attributes so viewBox becomes viewbox. Unfortunately SVG is case sensitive and so that's broken. The moral of the story is: don't use jquery with SVG. — Robert Longson, Jun 30 '14 at 16:40
@RobertLongson, I don't think so. "Inspect element" in Chrome reveals the attribute is set and the spelling is correct. However, I am surprised, because I modify the attributes and **then** append it to DOM, so it should be exactly equivalent of modifying something manually. — greenoldman, Jun 30 '14 at 18:49

What to do with SVG so it can be resized using Javascript?

2 Answers2