SVG presentation at HVTech July 29 2015, Poughkeepsie, @Gusto

I’ll be talking about SVG, which, like most anything else we do, isn’t straightforward to use. It takes practice to know when it’s appropriate, and some creativity to implement it well. SVG is a deep subject, but I’ll go through the basics and share what I’ve been doing with it with some live examples, and resources for diving in further.

What is SVG?

  • Stands for—Scalable Vector Graphics
  • Is an—XML-based vector image format.
  • Think—line-art or anything you natively create in Illustrator


SVG is a big deal

Chris Coyier has put together a compendium of resources on SVG

His last two talks are all about SVG

SVG is for Everybody

The Wonderful World of SVG

Sara Soueidan has it as part of her job title—added it to html/css/js

What are the advantages of using SVG?

  • It’s natively responsive
  • performance
    • smaller file sizes relative to raster images (jpg/gif/png) especially considering raster images have a limit on their physical dimensions (resolution switching use case).
  • accessibility
    • better for those with visual impairments because they are clear/sharp And better for everyone for that reason.
    • aria roles and text alternatives
  • high visual fidelity
    • Maintains fidelity on all screen sizes, resolutions, and pixel densities.
    • raster graphics are fuzzy —your eye is tricked into thinking they are sharp at their ideal visual size. They “pixelate” when enlarged beyond that and have limited fidelity when reduced.
  • We have access to the code—via text editor, CSS, and JS—Interactivity, animation, accessibility, optimization.

What is browser support like?

Pretty good overall, but we still need should practice progressive enhancement.

Different types of SVGs

Linked via <img>

CSS background

Lea Verou’s CSS Patterns Gallery

Notice how each pattern has a label indicating how many bytes it takes up. Every byte counts and you should always consider file size when deciding on what code is best.

Here’s an example from Lea’s book CSS Secrets showing how SVG can be embedded as XML right in your CSS—saving an http request and less bytes than the linear gradients used to make the same pattern:

#eee url('data:image/svg+xml,\
<svg xmlns=""\
width="100" height="100"\
<rect x="50" width="50" height="50" />\
<rect y="50" width="50" height="50" />\
background-size: 30px 30px;

using SVG XML directly in your CSS as a background. Base64 versions of SVG end up being larger anyway, and with the SVG in the CSS, you save an HTTP request but also have direct access to the code to edit right in the CSS. In comparison to the CSS-only method, this is less code AND DRYer.


Why use inline?

  • Pros
  • Cons
    • not cacheable (unless caching html)
    • adds to initial html page load time (weigh files size vs perceived load time)

We’ll go over fallbacks in a minute.

Special considerations

One special consideration with inline SVG is inconsistent sizing among browsers/devices. You need to use use Thierry Koblentz’s “intrinsic ratios for video” otherwise known as the “padding hack”

Sara Souiedan’s take on Responsive SVGs and examples of padding hack

Amelia Bellamy-Royds has a great post on CSS-Tricks about SVG fallbacks:

  • <img> fallback requires JS
  • CSS background fallback: multiple background image —same support as SVG
  • Inline fallback with <image> embedded in SVG (we’ll go over that).

Example in the wild


Ben Brignell’s SVG comic Ulf Boy

Chris Coyier’s CSS-Tricks

Portfolio sites using JS animated SVG

Compendium of SVG info (CSS-Tricks)

Chris Coyier’s SVG is for Everybody (video)

Chris Coyier’s The Wonderful World of SVG (video)

Sara Soueidan

Jason Grigsby’s Responsive Images 101—Part 1:Resolution switching use case

Vassar College’s Powerhouse Theater

Browser support

Lea Verou’s CSS Patterns Gallery


Thierry Koblentz’s “intrinsic ratios for video” otherwise known as the “padding hack”

Sara Souiedan’s Responsive SVGs

Amelia Bellamy-Royds’s SVG fallbacks:

Jake Archibald’s online optimization tool SVGOMG

General SVG usage

Keith Clark’s tweet on scaling out decimal precision

Dmitry Baranovskiy – You Don’t Know SVG (video)

Sara Soueidan’s SVG coordinate system tool

Ray Schwartz’s CSS-Tricks post on SVG Optimization

Progressive Enhancement

The W3C’s SVG spec

Leave a Reply

Your email address will not be published. Required fields are marked *