Use Cases for SVG

A new option in web graphics is finding its place

Over the past 15 years or so web design has benefited from a series of liberations. All of which, has either directly or indirectly affected workflow evolutions in some form or another. Some (subjective) examples of highly influencing web design events that’s helped shape our workflows: (in no particular order)

  • Introduction of cascading style sheets (CSS v1)
  • Widespread support for alpha channels of raster images (8 and 24-bit PNGs).
  • Birth of Flash
  • Death of Flash
  • Death of table-based layouts
  • Web Fonts
  • Death of Internet Explorer 6
  • CSS v3
  • HTML5
  • Responsive Web Design

The SVG Niche

SVGs (Scalable Vector Graphics) are by no means new, they've actually been a W3C standard since 1999. The adoption of SVGs within web production workflows has been gaining traction lately and it has me very excited. The somewhat wide support of SVGs in modern browsers is reason enough to consider SVGs for future web projects. It also solves some headaches of some other methods currently in use, for example, SVGs are:

  • Highly compressible where HTTP compression is utilized keeping file sizes small.
  • Very extendable and self containing. For instance, to swap out content depending on the size of the container it resides in (!!).
  • Editable with a text editor.
  • Stylable with inline or external CSS (with contingencies, keep reading).
  • Retina screen ready. No more creating versions of the same raster image for certain devices.
  • Modern browser support.

With any new technology, implementations must make sense within the page and site objective.

This may all sound great and all, but with any brand new technology comes some rough edges. With any new technology, implementations must make sense within the page and site objective. Looking to use SVGs in my web design workflow had me asking “Where did it make the most sense?”. I looked at some possible use cases for SVG within the web production workflow.

SVG Web Icons





	


	


	


	


Pros for using SVG Cons for using SVG
Less problematic among modern browsers, semantic, easily themed with CSS using the same file, better control over scaling, self containing with options for internal CSS and Media Queries, file sizes are comparable or smaller when HTTP compression is used. Inline SVGs can seem overwhelming in markup, little tried-and-true best practices, still need PNG fallbacks when targeting less than IE9.
Alternatives

Icon Fonts, PNG sprites.

Recommended reading:

SVG for Inline Photography



	
		
	

Pros for using SVG Cons for using SVG
SVG filters Filters such as blur, desaturate, drop shadow, and others only work in IE if the photos exist within the <image> tag inside the SVG markup. If you target any IE (9+) user, this is a drawback unless you can automate it with backend scripts and include the SVG inline. For now, stick to preprocessed JPEGs as the format was designed for photography.
Alternatives

Preprocessed JPEG or WebP

General Inline Elements using <img>


Pros for using SVG Cons for using SVG
Easy and behaves as expected. Can style like your typical <img> element, complete with uniform scaling per SVG spec. Cannot target with CSS to alter style. SVG must exist in current state.
Alternatives

PNG, JPEG, WebP, GIF, really anything you can use as an <img src=“”>

SVG as background-image with CSS

 

Pros for using SVG Cons for using SVG
Using “background-size”, you can control scaling without worrying about image ratio. Behaves as expected as a background image with repeats and positioning. Cannot target styles, specifically colors, fills, strokes, etc, with CSS. SVG must exist in current state.
Alternatives

PNG, JPEG, WebP, GIF, really anything you can use with “background-image”.

General Inline Elements using <svg>




	


Pros for using SVG Cons for using SVG
You can target strokes, fills and other properties of the SVG with CSS. Extremely useful for creating icon themes and using with SVG sprite sheets. The entire markup, path points and all, are included. In the case of sprite sheets, one method involves having to include the SVG at the top of the page, hidden with CSS so it can be referenced only.
Alternatives

<object>, <iframe>, CSS background, <img>

As you can see there is no single perfect solution for using SVGs, but depending on your use case, you can craft your method accordingly. If you've found a perfect solution for your use case, please share in the comments below.

More SVG Resources: