Scale SVG to container without mask/crop

Question

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 e

Answer 1

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.)

2. To cause your SVG to fill an HTML element, put the CSS attribute position:relative (or position:absolute or position:fixed if appropriate) on your wrapper, and then

3. Set the CSS attribute position:absolute on your <svg> element to cause it to sit inside and fill your div. (If necessary, also apply left: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 of none 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 of slice 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 of xMinYMax 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/

Answer 2

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.

Answer 3

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.