How can I make an svg scale with its parent container?

by

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.

For instance, if you have the following:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

It will render as a 10px by 20px triangle:

10x20 triangle

Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10x20 triangle

If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

If you want to scale it up to the width of the HTML viewport:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x150 triangle

Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x50 triangle

(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)

More Related Contents:

  1. CSS :before on inline SVG
  2. How to make a element expand or contract to its parent container?
  3. How to draw this chart in html and CSS? [closed]
  4. Change a HTML5 input’s placeholder color with CSS
  5. Canvas is stretched when using CSS but normal with “width” / “height” properties
  6. Fill SVG path element with a background-image
  7. Transparent arrow/triangle indented over an image
  8. How to change the color of an svg element?
  9. How to modify the fill color of an SVG image when being served as background image?
  10. SVG drop shadow using css3
  11. Remove padding from columns in Bootstrap 3
  12. Is there a way to word-wrap long words in a div?
  13. Format text in a ?
  14. border curved css – circle with curved end
  15. Size of HTML5 Canvas via CSS versus element attributes
  16. Triangle shape with background image
  17. Webkit CSS to control the box around the color in an input[type=color]?
  18. How to center absolute div horizontally using CSS?
  19. HTML not loading CSS file
  20. How to link a CSS file from HTML file?
  21. How can I send an inner to the bottom of its parent ?
  22. Add ellipses to overflowing text in SVG?
  23. SPAN vs DIV (inline-block)
  24. how to rotate text left 90 degree and cell size is adjusted according to text in html
  25. CSS transform origin issue on svg sub-element
  26. Set div height equal to screen size
  27. Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
  28. Create a Reverse Clip-Path – CSS or SVG
  29. How do you style a external svg with css
  30. Is there a way to style HTML5’s range control?

Leave a Comment