SVG use notes

Notes for myself.
Dimensions Embedded SVG within HTML page have several ways to define those:

1. CSS via style="width:18px;height:18px" or class name like class="icon"
2. attributes via width="18px" height="18px"
3. viewport and viewBox attributes

While all of above could define the image sizes, there is a need for discipline in orchestrating all. The best way is to rely on CSS for sizing within HTML. Hence to use only #1. 

The reason is that in HTML CSS has higher priority than width/height attributes and if SVG tag has any default style, it would override those width/height inline attributes.

For cross-browser compatibility you still need the viewBox="0 0 1000 1000" attribute to define dimensions in SVG coordinates, usually it matches the image size. Only exception is a tile - when multiple images collected in SVG and you want to display only one a time. That is an advanced technique handy for collections like color icons. 

More on W3C site.