You Should Be Using SVG

A talk discussing the benefits of SVG, Basic understanding of the file structure and samples on how to modify with CSS, Defs & Use elements, CSS animations and more...

Transcript

1. YOU SHOULD BE USING SVG
2. BEN VISSER @BENVISSER @THISISSOCIAL
3. 1 WIFE 5 KIDS 2 DOGS 1 BUSINESS
6. parklafun.com
7. joeledbetter.com
8. eatatbasil.com
9. saussyburbank.com
10. SVG BASICS
11. SCALABLE VECTOR GRAPHICS (SVG) SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.
12. WHY USE SVG? WHY NOW?
13. 1. BROWSER SUPPORT IS WAY SOLID IE8 IS THE ONLY THORN IN OUR SIDE
16. BUT MY GRANDMA USES IE8 AND SHE NEEDS TO SEE MY SWEET ICONS TOO!?! CHILL…WE GOT YOU COVERED
18. 2. INFINITELY SCALABLE WITH ONE FILE SIZE
19. SVG / 6k
20. SVG / 6k
21. SVG / 6k
22. SVG / 6k
23. PNG / ~30k to look good at largest size
24. PNG / ~30k to look good at largest size
25. PNG / ~30k to look good at largest size
26. PNG / ~30k to look good at largest size
27. 3. FUTURE PROOF BRING ON THE PIXEL DENSITY BRA’
29. 4. EASY TO IMPLEMENT MULTIPLE OPTIONS THAT WORK HOW YOU WOULD EXPECT
30. <img src=“donut.svg” />
31. <object data="donut.svg" type="image/svg+xml"> <img src=“donut.png" /> </object>
32. <iframe src=“image.svg">whoa iframes</iframe>
33. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <!-- donut base --> <g id="donut"> <path fill="#FFEBBF" d="M250,12.5C118.834,12.5,12.5,118.831,12.5,250S118.834,487.5,250,487.5 c131.169,0,237.5-106.331,237.5-237.5S381.169,12.5,250,12.5z M250,299.915c-27.57,0-49.921-22.347-49.921-49.915 c0-27.572,22.351-49.923,49.921-49.923c27.572,0,49.918,22.352,49.918,49.923C299.918,277.568,277.572,299.915,250 ,299.915z"/> </g> <!-- donut frosting --> <g id="frosting"> <path fill="#F39CC2" d="M433.204,177.319c-19.424-20.103-28.582-46.769-43.438-69.919c-16.524-25.75-65.617-16.817-90.439-29.809 c-26.26-13.75-42.691-42.205-76.386-36.803c-36.091,5.783-58.862,38.943-88.884,56.501c-14.42,8.436-30.122,14.551 -42.892,25.639 c-27.3,23.697-45.463,62.62-43.125,102.451c1.674,28.485,10.698,55.698,16.106,83.544c4.386,22.579,1.773,51.871,1 9.612,69.175 c17.313,16.791,46.608,15.063,67.878,23.035c35.171,13.185,57.312,53.838,94.554,60.485c37.938,6.771,66.279-26.02 1,98.483-39.527 c34.238-14.366,68.241-23.183,80.809-60.149c10.246-30.142,2.546-66.34,12.836-96.564 C448.676,234.937,458.51,203.493,433.204,177.319z M250,299.915c-27.57,0-49.921-22.347-49.921-49.915 c0-27.572,22.351-49.923,49.921-49.923c27.572,0,49.918,22.352,49.918,49.923C299.918,277.568,277.572,299.915,250 ,299.915z"/> </g>
34. HOW DO I ACTUALLY MAKE AN SVG? WE’VE GOT OPTIONS…
39. LET’S CODE 1. SVG ELEMENTS 2. DEFS & USE 3. FILTERS 4. RESPONSIVE SVG 5. ANIMATING SVG
40. SVG ANIMATION 1. SMIL 2. CSS 3. SNAP JS
41. THIS PART OF THE TALK WAS LIVE CODED. VIEW SAMPLES HERE: http://codepen.io/collection/AGbqLD/
42. BEN VISSER @BENVISSER @THISISSOCIAL