Scale SVG to container without mask/crop
I have tried many variants of the svg
parameters, but have had no joy in scaling this particular SVG.
I am trying to contain this SVG into a container element that controls the size of the SVG.
I'm aiming for 500x309px.
What combination of width
, height
, viewBox
and preserveAspectRatio
can help me achieve this without having the SVG masked or cropped?
Solution 1:
You absolutely must have a
viewBox
attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)To cause your SVG to fill an HTML element, put the CSS attribute
position:relative
(orposition:absolute
orposition:fixed
if appropriate) on your wrapper, and thenSet the CSS attribute
position:absolute
on your<svg>
element to cause it to sit inside and fill your div. (If necessary, also applyleft:0; top:0; width:100%; height:100%
.)
Once you have a viewBox
and your SVG sized correctly the default value of the preserveAspectRatio
attribute will do what you want. In particular, the default of xMidYMid meet
means that:
- The aspect ratio described by your viewBox will be preserved when rendering.
By comparison, a value ofnone
would allow non-uniform scaling. - The viewBox will always
meet
either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
By comparison, a value ofslice
ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG. - The viewBox will be kept vertically and horizontally centered within the SVG viewport.
By comparison, a value ofxMinYMax
would keep it in the bottom-left corner, with padding only to the right or top.
You can see this live here: http://jsfiddle.net/Jq3gy/2/
Try specifying explicit values for preserveAspectRatio
on the <svg>
element and press "Update" to see how they affect the rendering.
Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/
Solution 2:
Set the SVG width and height to be the size of its container, and set preserveAspectRatio = none.
<div height="50" width="100">
<svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>
and
$("svg").each(function(){
this.width = this.parentNode.width;
this.height = this.parentNode.height;
}
That's it. Setting CSS is not needed.
I personally set viewBox to be the size of the contents of the SVG. So in my example, the original image I am loading into my SVG is 300x200. It will shrink to fit a 50x100 div. But viewBox manipulation is a separate issue.
Solution 3:
Unfortunately, I don't know the answer that applies to raw SVG, but in Raphael.js, I did it like that:
var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);
This technique scaled my SVG to fit the bounds.
Hope this helps.