height: auto on SVG not working

Question

I am trying to use an SVG sprite sheet using the \"symbol\" method detailed here.

http://css-tricks.com/svg-sprites-use-better-icon-fonts/

My HTML is very si

Answer 1

In older versions of Safari, as well as a few old Android browsers, setting the viewbox and the width was not enough.

In my instance, I need to apply height:100%; as well as a width.

Answer 2

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