SVG Matters.

Now is the good time to apply Vector Graphics into your website.

JaeYong Kim

Why?

simple

Hi-Res Displays.

with Various Pixel Density.

simple

@2x

Doubled Resolution Image Assets.

simple

“Samsung’s 2014 phones will
feature 560 PPI displays
– 880 PPI in 2015…”

http://www.extremetech.com/computing/170451-samsungs-2014-phones-will-feature-560-ppi-displays-880-ppi-in-2015-foldable-in-2016

@1x..@2x..@6x..@12x..

crap.

Brilliant Trick.

Icon Fonts.

simple

http://fortawesome.github.io/Font-Awesome/

simple

http://fontastic.me/

simple

http://www.webdesignerdepot.com/2013/05/flat-ui-kit-free-download/

However...

downsides :(

Oh...

simple

Uh-oh...

simple

No @font-face Support.

simple

simple

Need a Fallback.

simple

http://filamentgroup.com/lab/bulletproof_icon_fonts.html

SVG is Better.

Image crispness, Positioning control, Semantics, Accessibility, Ease of use, Lack of browser quirks...

simple

http://css-tricks.com/icon-fonts-vs-svg/

Full Color Vectors.

simple

http://designmodo.github.io/Flat-UI/

CSS Styling.

simple

http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694

Responsive & Interactive.

simple

https://useiconic.com/tour/
http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/

Illustrations.

http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit

Visualizations.

simple

http://www.nytimes.com/interactive/2013/02/19/movies/awardsseason/oscar-trailers.html

Infographics.

simple

http://www.google.com/insidesearch/howsearchworks/thestory/

Maps.

simple

http://d3js.org/

and many more.

simple

...since 1999.

They Are Text.

simple

Basic Shapes.

simple

Paths + Groups.

simple

add CSS.

simple

Filters & Effects.

simple

Blend Modes.

simple

Photoshop?!

simple

Learn More.

simple

One More Thing.

simple