• Resolution Independence
• Small File Size
• Accessibility
• Interactivity
• Filters and Blend Modes

Presentation Attributes

Inline CSS

External CSS

<IMG>

SVG as CSS Background

<object>

<iframe>

<embed>

Which do I use?

CSS

<img>

<object>

<iframe>

<svg>

Adaptive SVG

Different images at different breakpoint points

CSS Animations (Good)

• 

  Chrome

• 

  IE

• 

  Firefox

CSS Animations (Bad)

• IE and Opera don't support CSS Transforms
• Firefox doesn't support % based transform-origin
• Safari zooming breaks % or px based origins

CSS Animations (Bad)

SMIL Path Morphing

http://tavmjong.free.fr/blog/?p=741

triggered morphing

http://sprigsandspirits.com/

triggered morphing

http://codepen.io/chriscoyier/pen/DpFfE/

SVG as submit button

http://tympanus.net/Tutorials/CircularProgressButton/

• Can Contain All Types of SVG Shapes and Images
• Simple or Complex
• Resized Without Losing Shape

Patterns

Animated Text Stroke

Animated Text Fill

Motion Blur

http://codepen.io/lbebber/pen/zxpMZw

Gooey Effect

http://codepen.io/lbebber/pen/OPjxZL/

• Use Inline SVG
• Provide a <title>
• Provide a <desc>ription
• Use <text>
• Give it an ARIA role

Accessibility

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

• Anti-aliasing
• Semantic
• CSS Control
• svg4everybody

Icon Fonts?

See the Pen 34836cf0043e9cb55ca49a0329e50d34 by Quinton Jason (@quintonjason) on CodePen.