Resizing Svg in HTML

Resizing SVG in html?

Open your .svg file with a text editor (it's just XML), and look for something like this at the top:

<svg ... width="50px" height="50px"...

Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.

SVG inline to HTML - resize to width

Read up on what the viewBox attribute does, and how it interacts with width and height.

If your SVG has a viewBox then its contents will be scaled to fit the width and height specified in the SVG. And will also be (by default) centred horizontally and vertically in that "viewport rectangle" (as specified by width and height)

Your SVG specifies a width of "960.42" and a height of "444.28". However you are over-riding the width to "100%".

That means when you naroow your page to, say, 200px, the width will become 200px, but the height will stay at 444.28. The result is a tall narrow viewport that the SVG gets centred vertically in. See below.

svg {
  width: 200px;
  height: 444.28px;
  background-color: linen;
}

<svg version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>

What are the best practices when it comes to dynamically resizing SVG elements?

I think you've done a good job there, congratulations.

For 1., my 2 cents is that inset: 0; is a shortcut for top: 0; left: 0; bottom: 0; right: 0;, and this later has broader compatibility.

For 2., I think you're good.

Finally, the last problem, which is the most difficult to solve, has been discussed as sub pixel rendering of SVG. There is a nice compromise workaround for your case: set the article's background-color: rgb(30, 31, 205);, and the section.card-content's background-color: white;. This will fix the zoom for any percentage value (or else, you could try to tweak the width/height and viewBox and some of the zooms will be fixed, but not all. This workaround fixes all).

Edit

To make the svg element behave correctly regarding space around it, apply display: block; style to it.

Resizing SVG in HTML

How about this as a useful snippet. Without editing the <svg> code at all I've set it up so that you can wrap any <svg> in a div with class of svgSize like this:

<div class="svgSize"><svg>...</svg></div>

Then using an inline style you can pass either --svgHeight or --svgWidth using whatever value you wish, so for example --svgHeight: 100px and the SVG will resize to the value given while keeping it's aspect ratio. If you don't pass either value it will default to auto which will resize to fill the parent

Gotta love CSS Custom Properties

.svgSize {
  display: inline-flex;
  height: var(--svgHeight, auto);
  width: var(--svgWidth, auto);
}
.svgSize svg {
  height: auto; width: auto;
  max-height: 100%; max-width: 100%;
}

<div class="svgSize" style="--svgWidth: 5rem">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

<div class="svgSize" style="--svgHeight: 15rem">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

<div class="svgSize" style="">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

---

Related Topics