SVG Strikes Back - Speaker Deck

Slide 1

Slide 1 text

SVG STRIKES BACK Matt Baxter • @mbxtr • October 7, 2014

Slide 2

Slide 2 text

Matt Baxter @mbxtr

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

UX Designer Design + Code

Slide 5

Slide 5 text

SV-WHAT?

Slide 6

Slide 6 text

Scalable Vector Graphics

Slide 7

Slide 7 text

So Very Good

Slide 8

Slide 8 text

SVG is an open graphics standard, made for the web, based on XML.

Slide 9

Slide 9 text

SVG is for any illustrated image.

Slide 10

Slide 10 text

Logos

Slide 11

Slide 11 text

Logos

Slide 12

Slide 12 text

Icons

Slide 13

Slide 13 text

Icons

Slide 14

Slide 14 text

LOLcats

Slide 15

Slide 15 text

LOLcats

Slide 16

Slide 16 text

Scalability Vector Raster

Slide 17

Slide 17 text

Vector Raster Scalability

Slide 18

Slide 18 text

File Size SVG (2kb) PNG (88kb) 512x512

Slide 19

Slide 19 text

True resolution independence

Slide 20

Slide 20 text

Responsive design is more than just   mobile/tablet/desktop a

Slide 21

Slide 21 text

SVG is Old (in web years, anyways)

Slide 22

Slide 22 text

1.0 Recommendation …back in 2001

Slide 23

Slide 23 text

Where has it been for 13 years?

Slide 24

Slide 24 text

2001 2006 2005 2011

Slide 25

Slide 25 text

The need for resolution- independent images is greater than ever.

Slide 26

Slide 26 text

Screens in 2001 http://www.nngroup.com/articles/computer-screens-getting-bigger/ 65% 800x600 30% 1024x768

Slide 27

Slide 27 text

Screens in 2014 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

Slide 28

Slide 28 text

Pixel density in 2001 1x (standard monitor)

Slide 29

Slide 29 text

Pixel density in 2014 iOS 1x 2x 3x LDPI HDPI XXHDPI MDPI XHDPI XXXHDPI Android

Slide 30

Slide 30 text

SVG was   made for the multi-device web.

Slide 31

Slide 31 text

Desktop Support All modern desktop  browsers (IE 9+) http://caniuse.com/#feat=svg

Slide 32

Slide 32 text

Mobile Support All modern mobile  browsers (Android 4+) http://caniuse.com/#feat=svg

Slide 33

Slide 33 text

Drawbacks? None (with correct images and fallbacks)

Slide 34

Slide 34 text

Finally, SVG is a practical web technology.

Slide 35

Slide 35 text

If it can be SVG,   it should be SVG.

Slide 36

Slide 36 text

CREATING SVG

Slide 37

Slide 37 text

Manually

Slide 38

Slide 38 text

https://developer.mozilla.org/en-US/docs/Web/SVG/Element

Slide 39

Slide 39 text

https://developer.mozilla.org/en-US/docs/Web/SVG/Element Good luck with that!

Slide 40

Slide 40 text

https://developer.mozilla.org/en-US/docs/Web/SVG/Element But seriously, it can be useful to know a little.

Slide 41

Slide 41 text

Vector Programs Illustrator Sketch Inkscape

Slide 42

Slide 42 text

My weapon of choice Vector Programs

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Be careful with this.   Your SVG won’t have a width/ height and Internet Explorer may not render correctly.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

https://github.com/svg/svgo Optimize with SVGO

Slide 48

Slide 48 text

USING SVG

Slide 49

Slide 49 text

Just like any other image

Slide 50

Slide 50 text

CSS Fallback

Slide 51

Slide 51 text

Inline Fallback

Slide 52

Slide 52 text

What about icon fonts?

Slide 53

Slide 53 text

• Are diﬃcult to position • Use a single color • Annoying to update • Browser inconsistencies Icon fonts…

Slide 54

Slide 54 text

• Precision positioning • Multiple colors • Simple to update • Better browser consistency SVG…

Slide 55

Slide 55 text

To Recap…

Slide 56

Slide 56 text

• Resolution independent • Small in ﬁle size • Cross-browser compatible • Simple to use SVG is…

Slide 57

Slide 57 text

• Resolution independent • Small in ﬁle size • Cross-browser compatible • Simple to use SVG is… Start using it today!

Slide 58

Slide 58 text

But, that’s not all…

Slide 59

Slide 59 text

Since it’s XML…

Slide 60

Slide 60 text

THE DOM

Slide 61

Slide 61 text

Inject into HTML

Slide 62

Slide 62 text

Inspect w/ Dev Tools

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

http://www.opera.com/docs/specs/presto25/svg/cssproperties/ Style with CSS

Slide 65

Slide 65 text

CSS Transitions

Slide 66

Slide 66 text

Media Queries

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Attach Events

Slide 69

Slide 69 text

SVG.JS http://svgjs.com

Slide 70

Slide 70 text

SVG.JS

Slide 71

Slide 71 text

Trianglify (D3.js) http://qrohlf.com/trianglify/

Slide 72

Slide 72 text

http://tomgermeau.com/2014/02/how-designers-can- create-interactive-prototypes-with-illustrator/ PROTOTYPE