Difference between revisions of "SVGs"
Jump to navigation
Jump to search
(Created page with "Category: Design The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography. == Pros and Cons == === Pros === * Images are V...") |
|||
| Line 30: | Line 30: | ||
* [https://weboverhauls.github.io/demos/svg/ Accessible SVG Test Page] on Web Overhauls | * [https://weboverhauls.github.io/demos/svg/ Accessible SVG Test Page] on Web Overhauls | ||
* [https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/ The many ways to change an SVG fill on hover (and when to use them)] by Cassie Evans at CSS-Tricks | * [https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/ The many ways to change an SVG fill on hover (and when to use them)] by Cassie Evans at CSS-Tricks | ||
* [https://css-tricks.com/forums/topic/swapping-out-svg-icons-problems-with-mobile-safari/ 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. | |||
Latest revision as of 18:31, 9 June 2020
The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography.
Pros and Cons
Pros
- 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.
- Because they use standard CSS to color the elements of the graphic, they are able to be changed without changing the shape file itself - via Javascript or CSS.
- 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.
Cons
- 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.