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

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:

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