Setting SVG element width/height attributes using CSS in Firefox

Question

I\'m trying to set the width and height attributes of SVG elements using CSS instead of putting them inline but I can\'t seem to get it working in firefox.

When I set

Answer 1

Not all SVG element attributes can be styled with CSS. Only the ones designated as "properties" can be. See the list below from the SVG specification.

https://www.w3.org/TR/SVG/propidx.html

The (in development) SVG 2 specification will allow all attributes to be styled with CSS. And some browsers are starting to support that. But for now you won't be able to do it.

Update: Not all attributes will be styleable in SVG2. The list of styleable presentation attributes is here.

Answer 2

I've always wrapped my SVG's within a <span> or <div> and then sized up that element versus the SVG itself.

div {
  height: 20px;
  width: 20px;
  transform: translateX(50%) rotate(-30deg);
// you can essentially do everything in the div versus the svg
}

svg {
  height: 100%;
  width: 100%;
  fill: white
}