Use SVG to Bring the Web to Life (Quinton Jason Jr)

USE SVG TO BRINGTHE WEB TO LIFE

Quinton Jason Jr

@quintonjasonjr

thinkx.net/svg

WHY SVG?

Resolution Independence

Small File Size

Accessibility

Interactivity

Filters and Blend Modes

123 KBfishadelic.jpg

34 KB

GZIP COMPRESSION

6.8 KB

STYLING SVG

PRESENTATION ATTRIBUTES

INLINE CSS

EXTERNAL CSS

EMBEDDING SVG

<IMG>

SVG AS CSS BACKGROUND

<OBJECT>

<IFRAME>

<EMBED>

WHICH DO I USE?

FALLBACKShttps://css-tricks.com/a-complete-guide-to-svg-fallbacks/

RESPONSIVE SVG

CSS

<IMG>

<OBJECT>

<IFRAME>

<SVG>

ADAPTIVE SVGDifferent images at different breakpoint points

CSS TRANSFORMS (GOOD)

CSS TRANSFORMS (GOOD)

CSS TRANSFORMS (BAD)

IE and Opera don't support CSS Transforms

Firefox doesn't support % based transform-origin

Safari zooming breaks % or px based origins

CSS TRANSFORMS (BAD)

<TEXTPATH>

Some random text Some random

TEXT ALONG A PATH

Fr

ANIMATE TEXT ALONG A PATH

Some random text Some random

2005Batman Begins

Movie

SMIL PATH MORPHINGhttp://tavmjong.free.fr/blog/?p=741

TRIGGERED MORPHINGhttp://codepen.io/chriscoyier/pen/DpFfE/

http://alexk111.github.io/SVG-Morpheus/

TEXT EFFECTS

Can Contain All Type of SVG shapes and images

Simple or Complex

Resized without losing shape

PATTERNS

TEXT FILLS

XXDDEESSIIGGNN

TEXT STROKE

CREEPYCREEPYCREEPYCREEPYCREEPY

FORM ELEMENTS

SVG AS SUBMIT BUTTONhttp://tympanus.net/Tutorials/CircularProgressButton/

FILTER EFFECTS

MOTION BLURhttp://codepen.io/lbebber/pen/zxpMZw

GLITCH EFFECT

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

GOOEY EFFECT

4 3

2 1

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

Use Inline SVG

Provide a <title>

Provide a <desc>ription

Use <text>

Give it an ARIA role

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

BE EXPRESSIVE

RESOURCES

https://github.com/willianjusten/awesome-svg

http://tympanus.net/codrops/?s=svg&search-type=posts