How do I scale a stubborn SVG embedded with the tag?

by

You can add “preserveAspectRatio” and “viewBox” attributes to the <svg> tag to accomplish this.

Open the .svg file in an editor and find the <svg> tag.
in that tag, add the following attributes:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Replace {width} and {height} with some defaults for the viewBox. I used the values from the “width” and “height” attributes of the SVG tag and it seemed to work.

Save the SVG and it should now scale as expected.

I found this information here:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

More Related Contents:

  1. Do I use , , or for SVG files?
  2. How to create a circle with links on border side
  3. Drawing an SVG file on a HTML5 canvas
  4. How to style SVG with external CSS?
  5. d3 Node Labeling
  6. Responsive CSS Trapezoid Shape
  7. Circular percent progress bar
  8. How to set a stroke-width:1 on only certain sides of SVG shapes?
  9. How do you convert screen coordinates to document space in a scaled SVG?
  10. How to cut a circular part from an image?
  11. Making an svg image object clickable with onclick, avoiding absolute positioning
  12. How to change SVG color when it is an encoded CSS background image?
  13. How to get rid of extra space below svg in div element
  14. How to get ScrollBars in SVG?
  15. Drawing multiple edges between two nodes with d3
  16. div with triangle at the bottom with background image
  17. Insert HTML code inside SVG Text element
  18. Css hover sometimes doesn’t work on svg paths
  19. Cross-browser embedded font in svg image
  20. SVG LinearGradient hidden if svg is hidden in seperate class
  21. Scale path from center
  22. Internet Explorer and clip-path
  23. Accessibility: recommended alt-text convention for SVG and MathML?
  24. svg background image position is always centered in internet explorer, despite background-position: left center;
  25. How can I embed SVG into HTML in an email, so that it’s visible in most/all email browsers?
  26. How can I display an image inside SVG circle in html5?
  27. Align svg to center of screen [duplicate]
  28. SVG animation delay on each repetition
  29. Scale SVG to container without mask/crop
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment