Scale SVG to container without mask/crop

by

  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/

More Related Contents:

  1. How to draw human body in html5 svg and roate it in 360degree [closed]
  2. Fill SVG path element with a background-image
  3. How to modify the fill color of an SVG image when being served as background image?
  4. SVG drop shadow using css3
  5. How to apply a style to an embedded SVG?
  6. SVGs not scaling properly in IE – has extra space
  7. Add a background image (.png) to a SVG circle shape
  8. border curved css – circle with curved end
  9. html/css hexagon with image inside
  10. make an html svg object also a clickable link
  11. Using base tag on a page that contains SVG marker elements fails to render marker
  12. Linking to CSS in an SVG embedded by an IMG tag
  13. Creating a ‘New’ spiky label with 24 or above point burst
  14. Extracting SVG from Font Awesome
  15. How to cut a circular part from an image?
  16. Method to convert HTML5 canvas to SVG?
  17. SVG image inside circle
  18. Draw double curved item with beveled edges
  19. How to get ScrollBars in SVG?
  20. CSS transform origin issue on svg sub-element
  21. div with triangle at the bottom with background image
  22. How do I create a teardrop in HTML?
  23. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  24. How to render svg elements with crisp edges while still keeping anti-aliasing?
  25. How to display multiple lines of text in SVG?
  26. How to curve the div from bottom with image background
  27. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  28. Emulate IE7 for IE8 but not for IE9 using “X-UA-Compatible”
  29. SVG coordinates with transform matrix
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment