DevBench

SVG Test

Reading time
Author
Jodie Doubleday
Date
2 September 2016
Category
UX

A test for all ways of including SVG’s onto your website, including sprites and common fallbacks.

If you think any input types are missing or I’m missing some key bits on information, please tweet me

SVG as an <img>

Raw HEHA logo

Resized Height (100px inline) HEHA logo

Resized Width (100px inline) HEHA logo

Resized Width and Height (100px x 200px inline) HEHA logo

Resized Height (100px css) HEHA logo

Resized Width (100px css) HEHA logo

Resized Width and Height (100px x 200px css) HEHA logo

Browser Support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down. (UNTESTED)

SVG as a background-image

HEHA

Another clever progressive enhancement flavored technique for using SVG as background-image is by using it in conjunction with multiple backgrounds. SVG and multiple backgrounds have very similar browser support, so if the browser supports multiple backgrounds, it supports SVG, and the declaration will work (and override any previous declaration). - CSS Tricks

Fallback

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

Browser Support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down. (UNTESTED)

Inline SVG

Raw

Note: When i add a class to teh SVGs below and use CSS to style. All my SVGs get styled. Change it to an ID and it works - Needs further investigation

With CSS Styles on <path>
(note: ID is applied to path, so hover will onyl work on the path of the SVG)

With CSS Styles on <svg>

Browser Support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down. (UNTESTED) The only way to solve inline SVG for old browsers is using a modernizer background image fallback.

<svg> ... </svg>
<div class="fallback"></div>
.fallback {
  display: none;
  /* Make sure it's the same size as the SVG takes up */
}
.no-svg .fallback {
  background-image: url(logo.png);
}

SVG Sprite - Inline

Complicated - Create a sprite of SVGs at the top of your body, then reference each one using the <use> and <symbol> attributes. Playing with this version, it seems the best way to implement icon sprites. Howeever there is no ability to cache.

Browser Support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down. (UNTESTED)

SVG Sprite - External file

This enables use to cache external images but browser support is woeful

Browser Support

Terrible! but there is a nice polyfill for all broswers that accept SVG’s (IE8+) - SVG 4 Everybody

Jodie Doubleday Hope you enjoyed reading my thoughts.
Want to share yours? tweet me.
comments powered by Disqus