Scale SVG to container without mask / crop

Question

I tried many options for svg options, but had no joy in scaling this particular SVG.

I am trying to include this SVG in a container element that controls the size of the SVG.

I am targeting 500x309px.

What combination of width , height , viewBox and preserveAspectRatio can help me achieve this without SVG masking or cropping?

Answer 1

• You must have the viewBox attribute of your SVG element, which describes the bounding box of the content that you want always visible. (In the file you are linking to, no, you want to add it.)

• To force the SVG to fill the HTML element, put the position:relative (or position:absolute or position:fixed ) CSS attribute in your wrapper, and then

• Set the position:absolute CSS attribute to your <svg> element to make it sit inside and fill your div. (If necessary, also apply left:0; top:0; width:100%; height:100% .)

If you have a viewBox and your SVG size is correct, the default preserveAspectRatio will do what you want. In particular, the default xMidYMid meet means that:

• The aspect ratio described by your viewBox will be preserved when rendering.
  For comparison, none allows uneven scaling.
• viewBox will always meet top / bottom or left / right, and "letterboxing" supports a different dimension inside.
  In comparison, the slice value ensures that your viewBox fills the rendering completely, either the top / bottom or left / right fall outside the SVG.
• viewBox will be vertically and horizontally centered in the SVG viewport.
  For comparison, the xMinYMax value will hold it in the lower left corner, with filling only to the right or top.

You can see it here: http://jsfiddle.net/Jq3gy/2/

Try specifying explicit values ​​for preserveAspectRatio in the <svg> element and click Refresh to see how they affect rendering.

Change I created a simplified version of the US Map with a viewBox (almost half the bytes) and used this in the updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/

Answer 2

Set the width and height of the SVG as 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; } 

What is it. CSS customization is not required.

I personally set the viewBox as the size of the SVG content. So, in my example, the original image that I upload to my SVG is 300x200. It will compress to 50x100. But viewBox manipulation is a separate issue.

Answer 3

Unfortunately, I do not know the answer that relates to raw SVG, but in Raphael.js I did it like this:

 var paper = Raphael('#container', your_container_width, your_container_height); paper.setViewBox(realSvgWidth, realSvgHeight, true); 

This method scaled my SVG to fit the borders.

Hope this helps.