SVGs

From perpendicular angel knowledgebase
Jump to navigation Jump to search

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