Why Don't Svg Images Scale Using The CSS "Width" Property

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

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:

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>

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>

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>

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>

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>

(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)

SVG background image scaling issue

Do not add width and height to the SVG Element, or background-size:cover in CSS. The SVG way of positioning and sizing works via attribute preserveAspectRatio:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 347 385" preserveAspectRatio="xMaxYMax slice">

It will make sure the viewBox covers the whole element background and is positioned so that the top right corners coincide.

(The rest of the attributes that were set on the svg element are not evaluated.)

How to set size of SVG image in :before pseudo-class?

You can use svg as background-image:

.withimage:before {
  content: "";
  display:block;
  height:125px;
  width:125px;
  background-size: 125px 125px;
  background-image: url(test.svg);
  background-repeat: no-repeat;
}

Here is example

Also you can try use this one:

.withimage:before {
  content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    height:20px;
    width:20px;
}

SVG aspect ratio is preserved when width is greater than height despite of the preventive setting

If I've understood correctly, you want the svg to change aspect ratio such that the diagonal line is always wholly in view.

Your svg is structured correctly to do this with preserveAspectRatio="none" on an image drawn with user units for the line and viewbox matching.

The reason your svg is extending beyond the page height is because the container div extends beyond the page height.

I've added a class to the parent div containing the svg and styled it to have height of 100vh ( minus a nominal pixel value to ensure scroll bars don't show). I also gave the div a border so you can see it now occupies the viewable screen and the SVG remders the line from top left to bottom right corners.

On a resizable page, the div will resize and the svg will change aspect ratio to always occupy it.

.svgFrame {
border: 1px solid red;
width: 100%;
height: calc(100vh - 20px);
}

        <div class="svgFrame" style="grid-row: 2; grid-column: 1; display: grid;">
            <svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
                <polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" />
            </svg>
        </div>

SVG in img element proportions not respected in ie9

To get more consistent scaling across browsers always ensure you specify a viewBox but leave off the width and height attributes on your svg element. I've created a test page for comparing the effect of specifying the different SVG attributes in combination with widths and heights specified in CSS. Compare it side by side in a few different browsers and you'll see a lot of differences in the handling.

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

None of the answers given here worked for me when I asked this back in 2009. As I now had the same issue again I noticed that using the <img> tag and width together with an svg works fine.

<img width="400" src="image.svg" />

SVGs not scaling properly in IE - has extra space

As you have discovered, IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.

To get it working in IE, you can use a trick discovered (?) by Nicolas Gallagher.

http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/

The trick uses a <canvas> element. IE does properly scale canvas elements. So if you place one in the <div> with the SVG, the SVG will end up the correct size. You just need to give the canvas the same aspect ratio as your SVG.

<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

with CSS

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

canvas {    display: block;    width: 100%;    visibility: hidden;}
svg {    position: absolute;    top: 0;    left: 0;    width: 100%;}

<svg style="display:none;"><defs><symbol id="mys">    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/></symbol></defs></svg><div style="position:relative;width:100%;background:blue;">  <canvas width="254" height="108"></canvas>  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">    <use xlink:href="#mys"></use>  </svg></div>

---

Related Topics