SVG Sprites with `<img>` or `background-image`

Based from a CSS Tricks article

`<img> tag`

with #fragment referencing `<view>`

SVG sized:

with `#svgView(viewBox())`

SVG sized:

with #fragment and hide/show embedded `:target` CSS

SVG sized:

`background-image`

with #fragment referencing `<view>`

SVG sized:

with `#svgView(viewBox())`

SVG sized:

with `background-position`

SVG sized:

with #fragment and hide/show embedded `:target` CSS

SVG sized:

Demo

Based on the best technique: background-position and sized SVG

Colors defined inside SVG (hover or focus)

Colors defined outside SVG with CSS filters

Colors defined outside SVG with CSS masks

There was a bug in Chrome (NOW FIXED in v49) when using 2 techniques from above on the same page. Using only one is OK.