The Flavors of

John Ferris / @pixel_whip
http://pixelwhip.github.io/svg-flavors

First and foremost a graphics format. 1998 - VML proposed by Microsoft, PGML proposed by IBM, Adobe, Netscape and sun - SVG working group was formed. 2001 - Adobe released the SVG Viewer 3 2001 - W3C makes a recommendation (41% of Americans were on dial-up. 6% on broadband) internet users were still on dial-up) http://www.pewinternet.org/2013/08/26/home-broadband-2013/ 2005 - Adobe adopts Flash 2006 - Opera 9 is the first browser with native support 2008 - Apple blocks Flash from iOS devices 2009 - Safari, Firefox then Chrome add support 2011 - IE9 is released, marking the last major browser to support 2012 - Apple releases retina devices 2012 - Microsoft drops support for VML with the release of IE10

Scaled

Animated

Filtered

Styled

Scripted

/* CSS Animation */
@keyframes wave-hello {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(20deg);}
}
#left-arm {
  animation: wave-hello 1s infinite linear alternate;
  transform-origin: 135px 195px;
}

...


                  /** CSS Styles **/

width: 400px;

width: 300px;


                  /** Embedded Media Queries **/
@media (max-width: 360px) {
  .kool-aid { fill: orange; }
  .oh-yeah { display: none; }
  .oh-no { display: block; }
}

Embed Methods

<img/>

Animation			Script w/ JS	Style w/ CSS		Cached
SMIL	CSS	JS		Embedded	External
Yes	Yes	No	No	Yes	No	Yes

Fallback: Inline

Fallback: SVGeezy

Fallback: Picturefill

background-image: url();

.icon--kool-aid { background-image: url(img/kool-aid-man.svg); }

Animation			Script w/ JS	Style w/ CSS		Cached
SMIL	CSS	JS		Embedded	External
Yes	Yes	No	No	Yes	No	Yes

Fallback: Modernizr

.icon--kool-aid { background-image: url(img/kool-aid-man.svg); }
.no-svg .icon--kool-aid { background-image: url(img/kool-aid-man.png); }

<object/>

Animation			Script w/ JS	Style w/ CSS		Cached
SMIL	CSS	JS		Embedded	External
Yes	Yes	Yes	Yes	Yes	No	Yes

Fallback: Alternative Content

Inline <svg/>

Animation			Script w/ JS	Style w/ CSS		Cached
SMIL	CSS	JS		Embedded	External
Yes	Yes	Yes	Yes	Yes	Yes	No

	Animation			Script w/ JS	Style w/ CSS		Cached
	SMIL	CSS	JS		Embedded	External
<img/>	Yes	Yes	No	No	Yes	No	Yes
background-image	Yes	Yes	No	No	Yes	No	Yes
<object/>	Yes	Yes	Yes	Yes	Yes	No	Yes
<svg/>	Yes	Yes	Yes	Yes	Yes	Yes	No

SVG Injector

// Elements to inject
var mySVGsToInject = document.querySelectorAll('img.inject-me');
// Trigger the injection
SVGInjector(mySVGsToInject);

Animation			Script w/ JS	Style w/ CSS		Cached
SMIL	CSS	JS		Embedded	External
Yes	Yes	Yes	Yes	Yes	Yes	Yes

*Requires Javascript

Logos


/* Mark only */
#horizontal,
#stacked {
  display: none;
}

/* Horizontal */
@media all and (min-aspect-ratio: 570/270) {
  #horizontal { display: block; }
  #mark { display: none; }
}

/* Stacked */
@media all and (max-aspect-ratio: 12/18) {
  #mark,
  #stacked-design { display: none; }
  #stacked { display: block; }
}

/* Full */
@media all and (max-aspect-ratio: 120/205) {
  #stacked-design { display: block; }
}