I Know I Should Use SVGs But I Don't Know How

A presentation at That Conference in August 2018 in Wisconsin Dells, WI, USA by Colin Lord

Slide 1

Slide 1

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

If you see a Coke bottle in any slides, look for some additional links or information.

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

https://caniuse.com/#search=svg

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

SVG with JavaScript: https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/

Slide 18

Slide 18

https://abookapart.com/products/practical-svg

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

DOM: Document Object Model https://css-tricks.com/dom/

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

97% Global Usage - Inline SVG http://advancedwebranking.com/html/#svg-overview

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

For historical purposes and remembering more painful times: https://css-tricks.com/css-sprites/

You probably don’t want to use sprites today!

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Depending on your implementation, you will probably want to place this at the top or bottom of your page or template. Think of an SVG sprite kind of like a JavaScript library or a CSS file.

Slide 39

Slide 39

Slide 40

Slide 40

Accessible SVGs: https://css-tricks.com/accessible-svgs/

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

https://github.com/iconic/SVGInjector

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slides bit.ly/wcraleigh-svg Twitter @colinlord Email hello@colinlord.com Codepen codepen.io/colinlord

Thanks for downloading the speaker notes. I’ve been a big fan of using SVGs the last couple years and hopefully you can tell that it’s something I like talking about! If you ever have a pesky question, feel free to send me a message. The best way to get my attention is probably on Twitter but you can use my email as well.