Difference between revisions of "SVGs"

From perpendicular angel knowledgebase
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 19: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