Iconfont or svg?

Lightning talk at CTEDs workshop - august 2015.

Transcript

1. Iconfonts versus inline svg
2. Icon systems • pngs
3. Icon systems • pngs • png sprites
4. Icon systems • pngs • png sprites • Weird javascript to make transparency work in IE6
5. Icon systems • pngs • png sprites • Weird javascript to make transparency work in IE6 • Retina problems
6. Iconfonts • Vectors • Can be created online via apps such as Icomoon or Fontello
7. Iconfonts • Can be hosted locally
8. Iconfonts • Can be inlined in CSS
9. Iconfonts • Multiple ways to display based on how the font is encoded
10. Iconfonts • Treated as text by browsers (good and bad)
11. Iconfonts • You can control the size (via font-size), color, shadows, rotation, etc. via CSS.
12. SVG • Can be displayed through the use of CSS Backgrounds, <object> tags, <img> tags, or inlined directly into your HTML
13. SVG • Inline SVG is right in the document. If the browser supports it, it displays it.
14. <svg class="iconsvg"> <g> <polygon fill="#ad3429" points="217.14,14.856 169.039,14.856 235.993,147.185 260.045,99.649"></polygon> <polygon fill="#ad3429" points="131.014,184.747 63.991,52.276 39.937,99.813 82.908,184.747"></polygon> <polygon fill="#f2723d" points="216.984,14.856 168.882,14.856 82.927,184.747 131.029,184.747"></polygon> <polygon fill="#f2723d" points="169.039,184.747 217.14,184.747 260.045,99.945 235.993,52.414"></polygon> <polygon fill="#f2723d" points="131.014,14.856 82.908,14.856 39.937,99.784 63.991,147.319"></polygon> </g> </svg>
15. SVG • semantics of <svg> suit icons which are essentially images
16. SVG • accessible via <title>, <desc> and <aria-labelledby>
17. SVG • Can use build tools
18. Iconfonts - the bad • May not show up (private unicode area)
19. Iconfonts - the bad • Very hard to align as they depend on pseudo-elements (usually ::before), and things like line-height, vertical-align, letter-spacing, word-spacing and kerning.
20. Iconfonts - the bad • Cross origin resource
21. Iconfonts - the bad • Fails to load
22. Iconfonts - the bad • Chrome bug
23. Iconfonts - the bad • Android bugs
24. Iconfonts - the bad • No @font-face support
25. Iconfonts - the bad • One colour
26. Iconfonts - the bad • Dyslexia
27. SVG - the bad • Support. Fallbacks very hard.
28. Conclusion • Icon font if you have limited number and low support requirements
29. Conclusion • Icon font if you have limited number and low support requirements • svg for more versatility and large icon set