3. 3
To SVG or not to SVG
• CSS was made for layout, SVG was made for drawing
• Accessibility. SVG is just DOM.
• Debugging. Again just the DOM, Canvas is it’s own world
• Performance limitations when animating hundreds of elements
• 3D and extreme immersive experiences
4. 4
SVG is like an infinite sheet of graph
paper on which you can plot things
You view pieces of this infinite graph
paper through the viewbox
20. 2 0
Groups are like divs, you can move
and style of group of elements
Elements inside a group inherit style,
allowing for specificity, just like CSS
23. 2 3
The path is the most powerful
element in the world of SVG shapes
Paths create complex shapes by
combining lines, curves, and arcs
24. 2 4
Complex shapes composed of only
straight lines can be created as polylines
Polylines and paths can create similar
shapes but only paths can create curves
26. 2 6
It is not recommended to draw
complex path shapes by hand
However understanding path data will
help in modifying and animating
27. 2 7
Path data <path d=“” />
• Each command specified with a letter
• Uppercase means absolute, lowercase means relative to last point
• Move To: M x y
• Line To: L x y
• Horizontal To: H x
• Vertical To: V y
• Close Path: Z
29. 2 9
There are three commands you can
use to create smooth curves
Two of those curves are Bezier curves,
and the third is an arc or part of a circle
30. 3 0
There are an infinite number
of Bezier curves
Two simple curves are available in path
elements, Cubic and Quadratic
32. 3 2
Drawing path curves <path d=“” />
• Cubic: C x1 y1, x2 y2, x y
• Cubic Reflection: S x2 y2, x y
• Quadratic: Q x1 y1, x y
• Quadratic Reflection: T x y
53. 5 3
To JS or not to JS
• Sequencing in CSS is hard
• Real-time modification and editing animations
• Cross browser differences paved over with JS libraries
• Advanced animations made easy with JS library functionality
• User interaction and third party data