Height: Auto on Svg Not Working

height: auto on SVG not working

DEMO

You need to define a viewBox on each element that you link to.
because there can be different elements in one SVG document.

So remove the viewBox from the element you link to.
Add a viewBox to the place you're linking from.

I suggest you add the viewBox to a svg element:

<svg class="test" viewBox="0 0 25 25">
    <use xlink:href="/images/iconSprite.svg#clock"/>
</svg>

Now you can scale it:

If you define the css width:

.test {
    width: 50px;
}

It will display as long as it fits on height or width.

So if you want a responsive design you can simply scale it by % length

.test { width:30%; }

SCALE SVG A really good article about scaling svg from CSS-tricks :)

HTML/CSS svg auto height & width

What you want is the viewBox='x y width height' attribute, which will define the view-box of your SVG drawings.

SVG units are (generally) relative to their parent's box, by setting the viewBox attribute, you define how much of this units your SVG should display.

.divOrangeCircles {  display: inline-block;  background-color: aqua;  opacity: 0.5;}svg {  display: block;}

<div class="divOrangeCircles">  <svg viewBox="0 0 180 180" height="200" width="200">  <circle cx="90" cy="90" r="90" fill="#F48043"/>  </svg></div>

SVG height not behaving as expected

First of all you can use the attribute preserveAspectRatio="none" on <svg>. This will stretch the SVG if you specify a height and a width.
Second you path was placed around 200 down the y axis. So, when it stretched, the transparent area above the path would also take up more space. I moved the path so that it almost hits y=0 on the top. Now the path only takes up 113 in the height and when stretched it will fill up the entire box.

I used SvgPathEditor to edit the path.

.wrap {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg, img {
  height: 100%;
  width: 100%;
}

Just the SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113">
  <path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>

SVG in a box - Does not work

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113" preserveAspectRatio="none">
    <path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
  </svg>
</div>

JPG in a box - Do work

<div class="wrap">
  <img src="https://placekitten.com/96/139">
</div>

Auto height of div doesn't adhere to height of its SVG icon child

This is because svg image is inline element and the browser saves spase from bottom for such "long" symbols as "p", "q", "y".

There is several solutions to this:
First:

.icon { display: block; }

Second:

.icon-wrapper { font-size: 0; } .icon { font-size: 48px; }

Third

.icon-wrapper { line-heigth: 1em; } .icon { vertical-align: top }

Doesn't SVG support auto width and height for images?

The SVG 1.1 specification requires the width and height attributes for the <image> element. Most browsers today implement that, so the answer is not yet. Leaving the attributes off means a default value of 0 is used, which has the effect of making the image invisible.

However, autosizing of images is being added to SVG2, see https://svgwg.org/svg2-draft/embedded.html#ImageElement.

SVG 2 Requirement: Support auto-sized images.

Resolution: We will allow auto-sized images in SVG 2.

This hopefully means that you'll be able to do what you want in a not too distant future.

SVG auto scale height

First off, note that in HTML, any replaced element like:

• <img>
• <svg>
• <canvas> etc.

has a default size of 300px wide, 150px tall.

If you don't give the replaced element explicit dimensions, these are the dimensions it will adopt.

---

The tool that you are looking for is the SVG viewBox.

If you declare a viewBox for an SVG, this is like giving it its own set of relative-to-self dimensions.

These relative-to-self dimensions are separate from what's going on, on the rest of the page and, importantly, they are also separate from its relative-to-context dimensions.

In the example below, I have given the first <svg> the following viewBox:

viewBox="0 0 240 240"

this means that if it has a <circle> child element with a radius of 120, then the circle will, essentially, fill the <svg>.

But if I change the viewBox to:

viewBox="0 0 480 480" // (ie. twice the size)

then the <circle> will now only fill half the <svg>.

And you can keep changing the size of the circle by changing the viewBox of the parent SVG even when (this is the clever bit) the relative-to-context dimensions of the <svg> remain:

• width: 100px;
• height: 100px;

or however large or small you want the <svg> to be on the page.

---

Working Example:

body {
  background-color: rgb(255, 255, 0);
}

svg {
  display: block;
  width: 100%;
}

svg:nth-of-type(1) {
  height: 240px;
}

svg:nth-of-type(2) {
  height: 200px;
}

svg circle {
  fill: rgb(0, 0, 255);
}

<div>
<svg viewBox="0 0 240 240">
<circle cx="50%" cy="50%" r="120" stroke-width="5"></circle>
</svg>
        
<svg viewBox="0 0 200 200">
<circle cx="50%" cy="50%" r="100" stroke-width="5"></circle>
</svg>
</div>

SVG with width/height doesn't scale on IE9/10/11

This happens when your image is missing the viewBox attribute on the svg element.

Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

Width and height do not work in SVG use element

width, and height have no effect on use elements, unless the element referenced has a viewbox

---

Related Topics