Automatically Scale An SVG To Its Parent

I'm trying to get an SVG to automatically scale down and fit vertically into its parent container. The SVG is of a signature, and I want it to shrink vertically to fix into the d

Solution 1:

For scaling of an svg to work, you absolutely have to supply a viewBox which matches the bounding box of the contained elements. In your case that would be something like viewBox="0 0 360 100".

The bounding box can be calculated via javascript, but as I have read the getBBox() method is buggy in some cases. I can't comment further on that, but in this case and on chrome it works, see: http://jsfiddle.net/3v4e4/7/

Note that both getBBox() and setAttribute() are native methods and for setting the viewBox you absolutely have to use these. Using the jquery ´.attr()` method will not work as the SVG DOM is different from the HTML DOM which jquery is designed for: http://keith-wood.name/svg.html#dom

Solution 2:

If you're using a modern browser, you might be able to just use your SVG as the src for an IMG and set the height to 100%.

Example: http://jsfiddle.net/kj7Wh/

<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
    <img src="http://openclipart.org/people/StefanvonHalenbach/StefanvonHalenbach_Battle_axe_medieval.svg" height="100%" />
</div>

Solution 3:

might not work everywhere, but the zoom command on the svg element

svg{zoom:32%;}

or, you can save the this as an svg file and edit this inside illustrator