Is Is Possible to Scale Inline Svg with CSS

Dynamically resize inline SVG

If you inline SVGs you don't need Javascript. For example, you can scale to 48px a 24px icon like this:

<div class="Icon">
  <svg class="Icon-image" width="24" height="24" viewBox="0 0 24 24">...</svg>
</div>

CSS:

.Icon {
  width: 48px;
}
.Icon svg {
  width: 100%;
  height: auto;
}

Is there a way to scale an inline SVG from outside the svg tag?

You can actually override the inline height and width using css.

Note that the css needs to be NOT scoped, so create another style block if required.

<style scoped>
  ...
</style>
<style>
div > svg {
  height: 100px;
  width: 100px;
}
</style>

How to scale inline SVG to parent containers width and height automatically?

You can set width: 100% & height: auto in svg:not(:root) selector for this. check updated snippet below.

.hero-wave {    position: absolute;    bottom: 20px;    left: 0px;    right: 0px;    width: 100%;    height: 20%;}svg:not(:root) {    width:100%;    height: auto;}

<div class="hero-wave">    <svg width="100%" height="100%" viewBox="0 0 500 200" version="1.1" xmlns="http://www.w3.org/2000/svg">        <g fill="none" fill-rule="evenodd">            <path d="M0,0.8828125 C0,0.8828125 21.5375284,2.70107724 30.175,8.11815895 C70.4419893,33.3720274 173.689709,104.747595 239.525,104.747595 C306.457042,104.747595 408.933103,43.7500826 451.921875,21.6893757 C494.910647,-0.371331192 500,8.11815895 500,8.11815895 L500,200.882812 L0,200.882812 L0,0.8828125 Z" id="Rectangle" fill="#595CA5"></path>        </g>    </svg></div>

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)

Inline SVG only scaling to parent container in Google Chrome

Add min-height:0 to fix the issue in most of the browser (related: Prevent content from expanding grid items) and for Edge you will need to add height:0;min-height:100% to the SVG. The last fix will remove the usage of percentage value with height which is creating an issue with Edge.

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
html,body {  width: 100vw;  height: 100vh;  font-family: Arial, Helvetica, sans-serif;  display: flex;  justify-content: center;}
.container {  display: grid;  grid-template-rows: 1fr 2fr 3fr;  width: 100%;  max-height: 100%;  max-width: 540px;}
.svg-container {  border: 1px solid black;  min-height: 0;}
svg {  width: 100%;  height: 0;  min-height: 100%;}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link rel="stylesheet" href="style.css">  <title>Document</title></head>
<body>  <div class="container">    <div class="svg-container">      <svg viewBox='0 0 3.904897 29.412678' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>            <path              d='M 0,25.550255 V 3.8624222 H 2.01753 V 25.550255 H 0 m 2.850575,3.862422 H 2.551199 C 1.142257,29.412677 0,27.979719 0,26.211588 v -0.661333 h 2.01753 v 0.981485 c 0.0024,0.884983 0.574154,1.599169 1.2756,1.593463 h 0.611767 v 1.287474 z M 2.850575,0 H 2.5512 C 1.142257,0 0,1.4329586 0,3.2010897 V 3.8624222 H 2.01753 V 2.8809378 C 2.01993,1.9959549 2.591684,1.2817684 3.29313,1.2874741 H 3.904897 V 0 Z' />          </svg>
    </div>    <div class="svg-container">      <svg viewBox='0 0 3.904897 29.412678' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>            <path              d='M 0,25.550255 V 3.8624222 H 2.01753 V 25.550255 H 0 m 2.850575,3.862422 H 2.551199 C 1.142257,29.412677 0,27.979719 0,26.211588 v -0.661333 h 2.01753 v 0.981485 c 0.0024,0.884983 0.574154,1.599169 1.2756,1.593463 h 0.611767 v 1.287474 z M 2.850575,0 H 2.5512 C 1.142257,0 0,1.4329586 0,3.2010897 V 3.8624222 H 2.01753 V 2.8809378 C 2.01993,1.9959549 2.591684,1.2817684 3.29313,1.2874741 H 3.904897 V 0 Z' />          </svg>    </div>    <div class="svg-container">      <svg viewBox='0 0 3.904897 29.412678' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>            <path              d='M 0,25.550255 V 3.8624222 H 2.01753 V 25.550255 H 0 m 2.850575,3.862422 H 2.551199 C 1.142257,29.412677 0,27.979719 0,26.211588 v -0.661333 h 2.01753 v 0.981485 c 0.0024,0.884983 0.574154,1.599169 1.2756,1.593463 h 0.611767 v 1.287474 z M 2.850575,0 H 2.5512 C 1.142257,0 0,1.4329586 0,3.2010897 V 3.8624222 H 2.01753 V 2.8809378 C 2.01993,1.9959549 2.591684,1.2817684 3.29313,1.2874741 H 3.904897 V 0 Z' />          </svg>    </div>  </div></body>
</html>

Resize SVG by changes in path

No you can't. You'd have to change the SVG path to fit the box, but you can't "resize" per-se.

I manually resized your path to fit the box.

<path fill="#3E3E3E" d="M1.2 3.3H4a1 1 0 1 1 0 1.8H.6a1 1 0 0 1-.9-.9V0a1 1 0 0 1 1.9 0v1.4A11 11 0 0 1 20 8.6c0 .5-.4.9-1 .9a1 1 0 0 1-.9-1A9.2 9.2 0 0 0 12.3 1a9.2 9.2 0 0 0-10 2.3ZM17.4 16.1A11 11 0 0 1-1 8.9c0-.5.4-.9 1-.9.4 0 .8.4.9 1a9.2 9.2 0 0 0 5.8 7.5 9.2 9.2 0 0 0 10-2.3h-2.6a1 1 0 1 1 0-1.8h4.3a1 1 0 0 1 .9.9v4.2a1 1 0 0 1-1.9 0v-1.4Z"></path>

How I did it:

I used svgomg with precision: 1, to simplify the path to a point where it was small enough for me to actually manually edit.

Then I split it into two separate paths (top and bottom arrows) (using
the Z as the path separator), wrapped them in <g transform="translate(x, y)"></g> until it looked right, copied the
remainder back into svgomg where it is smart enough to convert the
transforms into a single path.

---

Related Topics