Jump to navigation Jump to search
The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography.
Pros and Cons
- Images are vector format so they are crisp and clean at any size.
- They can be loaded as xml text files, and presented inline in HTML.
- CSS hover states can be embedded directly into the SVG file.
- Editing can be done with a text editor or a code editor.
- SVG files can also be loaded as <img> images and recognized by all browsers.
- SVGs allow for <title> and <description> elements to be embedded within the images themselves, which simplifies accessibility.
- SVGs have a <symbol> element for embedding multiple symbols into a single SVG file and cleanly referencing those symbols throughout the rest of the page.
- Some very old browsers don't recognize SVG files and may not be sure what to do with them. Fallbacks need to be investigated.
Additional resources about SVGs
- anne's conference notes from An Event Apart Seattle 2017, where Chris Coyier gave a talk entitled 10 Things You Can And Should Do with SVGs.
- SVGOMG is a web-tool to help minify your SVG files. Make sure the toggles for removing <title> and <desc> aren't on!
- Tips for Creating Accessible SVG by Léonie Watson on Sitepoint
- Using ARIA to enhance SVG Accessibility by The Paciello Group
- Cascading SVG Fill Color by Chris Coyier - explains how to use currentColor as the fill color to pick up the current font color.
- Making the Switch Away from Icon Fonts to SVG by Sara Soueidan
- Illustrator's Export SVG Settings Explained by Val Head
- Styling SVG <use> Content with CSS by Sara Soueidan at Codrops explains how the Shadow DOM is used to manage SVG elements that are in an icon set.
- Accessible SVG Test Page on Web Overhauls
- The many ways to change an SVG fill on hover (and when to use them) by Cassie Evans at CSS-Tricks
- CSS Tricks forum post about SVG images on CSS-Tricks discusses a mobile Safari bug that prevents style="display: none" from working on SVGs so using <svg width="0" height="0"> on an SVG containing a symbol is the better bet.