Powered by

# SVG

SVG has become a prevalent means for displaying rich vector graphics. SVG images are great for graphics with well-defined lines and simple color palettes that can be defined algorithmically, e.g. logos, iconography, and illustrations. Here are a few known benefits of SVG:

  • Scalability - They look great on retina displays and at any size, i.e. they're resolution independent.
  • File Size - Small file size and compresses well.
  • Styling - Manipulate fill, stroke, and even animate.

Be mindful that SVGs have potential limitations as well:

  • Adding unvetted SVG graphics to a page has the potential to introduce a security vulnerability. This is why WordPress does not allow uploading of SVG by default. Read: SVG uploads in WordPress (the Inconvenient Truth) for more information.
  • SVG is not ideal for photographic images or images with complex visual data. In this case, raster formats (JPG, PNG, GIF) will be a better choice.
  • Raster images should not be converted to SVG. It will likely result in a raster image being embedded within the SVG document, which will not provide the same affordances (i.e. - CSS manipulation) as a genuine SVG. For further reading on vector vs. raster formats, and when to use each: Adding vector graphics to the Web.

# SVG Sprites

Combining SVG images in a single file (usually called svg-defs.svg) has the benefit of helping limit HTTP requests within a document that contains multiple icons. An SVG sprite file can be embedded within a document and referenced within the template source with a <use> element. The creation of this icon system should be automated through your build process. Read Icon Systems with SVG Sprites for more information.

# SVG embedded in HTML

When placing an SVG in markup (i.e. inline) be sure to use the following guidelines:

  • If the SVG is purely decorative
    • An empty alt="" can be used: <img alt="">, or
    • Use ARIA attributes to hide the element from assistive technologies: <svg aria-hidden="true">
  • If the SVG is meaningful then use <title> and possibly even <desc> or aria-label to describe the graphic. Also, be sure to add an id to each element, and appropriate ARIA to overcome a known bug in Chrome and Firefox. 
    <!-- role="img" to exclude image from being traversed by certain browsers w/ group role -->
<svg role="img" aria-labelledby="uniqueTitleID uniqueDescID">
  <title id="uniqueTitleID">The Title</title>
  <desc id="uniqueDescID">Description goes here...</desc>
</svg>
  • Use aria-label if the SVG is linked and has no supporting text. 
    <a
  href="http://twitter.com/entermedia"
  aria-label="Follow Entermedia on Twitter"
>
  <svg><use xlink:href="#icon-twitter"></use></svg>
</a>
  • Use media queries to provide fallbacks for Windows and High Contrast Mode.

# Optimization

Many tools for creating SVG are notorious for including unnecessary markup. We recommend running all SVG through SVGO(MG) or using tooling, like gulp-svgmin.

# Further Reading