SVG

https://youtu.be/7NcnVEF5cmE

Transcript

1. SVG SIMPLE - VALUABLE - GRATIFYING
2. SCALABLE VECTOR GRAPHICS XML & Two-Dimensional Graph
3. WHY? • Colorful & Detailed • Interactive & Stylish with css • Responsive • Advanced Animations • Gzip • Cross-Browser Suport
4. WHEN NOT TO USE? Complex images & Images no vector
5. HOW USE? • Tag IMG • Background-image • iframe/object/embed • Data URIs • Inline SVG
6. Cartesian plane 50 50
7. Structure <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- draw! --> </svg>
8. Rect <svg width="500" height="200"> <rect x="20" y="10" width="100" height="50" stroke="#000" fill="blue" /> </svg>
9. Circle <svg width="500" height="200"> <circle cx="100" cy="100" r="40" stroke="#000" fill="blue" /> </svg>
10. Ellipse <svg width="500" height="200"> <ellipse cx="100" cy="60" rx="100" ry="50" fill="blue" /> </svg>
11. Line <svg width="500" height="200"> <line x1="20" y1="10" x2="180" y2="60" stroke="blue" stroke-width="4"/> </svg>
12. Polyline <svg width="500" height="200"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="blue" stroke-width="4" /> </svg>
13. Polygon <svg width="500" height="200"> <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="blue" stroke="#000" stroke-width="4"/> </svg>
14. Path <svg width="500" height="200"> <path d="M250,10 L200,100 L300,100z" fill="none" stroke="blue" stroke-width="4"/> </svg>
15. Animation - CSS (https://codepen.io/angeliski/pen/WZwLzZ) - Keyframes - Animation CSS3 - SMIL (https://codepen.io/angeliski/pen/rGePVg) - Embedded
16. JS Manipulation - Exemplo: https://codepen.io/angeliski/pen/xXVMOG - D3.js - Snap.svg - Greensock
17. Getting Started - Download SVG (Icomoon, SVG Cuts, https://github.com/willianjusten/awesome-svg) - Inkscape, Sketch e Illustrator - Go!
18. Fim @angeliski_ https://github.com/angeliski https://angeliski.com.br