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

examples

SVG is a big deal

Chris Coyier has put together a compendium of resources on SVG
https://css-tricks.com/mega-list-svg-information/

His last two talks are all about SVG

SVG is for Everybody
https://www.youtube.com/watch?v=w83XRCkMtHQ

The Wonderful World of SVG
https://www.youtube.com/watch?v=tsGa-gcckwY

Sara Soueidan has it as part of her job title—added it to html/css/js
http://sarasoueidan.com/

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.
    • http://powerhouse.vassar.edu/
  • We have access to the code—via text editor, CSS, and JS—Interactivity, animation, accessibility, optimization.

What is browser support like?

http://caniuse.com/#search=svg

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

Different types of SVGs

Linked via <img>

CSS background

https://css-tricks.com/using-svg/

Lea Verou’s CSS Patterns Gallery
http://lea.verou.me/css3patterns/

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:


background:
#eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="100" height="100"\
fill-opacity=".25">\
<rect x="50" width="50" height="50" />\
<rect y="50" width="50" height="50" />\
</svg>’);
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.

Inline

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”
http://alistapart.com/article/creating-intrinsic-ratios-for-video

Sara Souiedan’s take on Responsive SVGs and examples of padding hack
http://tympanus.net/Tutorials/ResponsiveSVGs/index6.html

Amelia Bellamy-Royds has a great post on CSS-Tricks about SVG fallbacks:
https://css-tricks.com/a-complete-guide-to-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

http://powerhouse.vassar.edu/

Resources

Ben Brignell’s SVG comic Ulf Boy
http://frisbeefodder.com/ulfboy/01/01/who-is-meg/

Chris Coyier’s CSS-Tricks
https://css-tricks.com/

Portfolio sites using JS animated SVG
http://melaniedaveid.com/
http://weaintplastic.com/

Compendium of SVG info (CSS-Tricks)
https://css-tricks.com/mega-list-svg-information/

Chris Coyier’s SVG is for Everybody (video)
https://www.youtube.com/watch?v=w83XRCkMtHQ

Chris Coyier’s The Wonderful World of SVG (video)
https://www.youtube.com/watch?v=tsGa-gcckwY

Sara Soueidan
http://sarasoueidan.com/

Jason Grigsby’s Responsive Images 101—Part 1:Resolution switching use case
http://blog.cloudfour.com/responsive-images-101-definitions/#resolutionswitching

Vassar College’s Powerhouse Theater
http://powerhouse.vassar.edu/

Browser support
http://caniuse.com/#search=svg

Lea Verou’s CSS Patterns Gallery
http://lea.verou.me/css3patterns/

Accessibility
http://www.sitepoint.com/tips-accessible-svg/

Thierry Koblentz’s “intrinsic ratios for video” otherwise known as the “padding hack”
http://alistapart.com/article/creating-intrinsic-ratios-for-video

Sara Souiedan’s Responsive SVGs
http://tympanus.net/Tutorials/ResponsiveSVGs/

Amelia Bellamy-Royds’s SVG fallbacks:
https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

Jake Archibald’s online optimization tool SVGOMG
https://jakearchibald.github.io/svgomg/

General SVG usage
https://css-tricks.com/using-svg/

Keith Clark’s tweet on scaling out decimal precision
https://twitter.com/keithclarkcouk/status/600391488879599618

Dmitry Baranovskiy – You Don’t Know SVG (video)
https://www.youtube.com/watch?v=SeLOt_BRAqc

Sara Soueidan’s SVG coordinate system tool
http://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html

Ray Schwartz’s CSS-Tricks post on SVG Optimization
https://css-tricks.com/understanding-and-manually-improving-svg-optimization/

Progressive Enhancement
http://christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/
http://jakearchibald.com/2013/progressive-enhancement-still-important/

The W3C’s SVG spec
http://www.w3.org/standards/techs/svg#w3c_all

Leave a Reply

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