Paths and groups

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-18
Updated:
2016-11-18
Tags:
animation DOM
PreserveAspectRatio

Default:
preserveAspectRatio=”xMidYMid meet”

uniformly scales, like background-size: cover; in CSS

Takes Three Parameters:
X: Min, Mid or Max
Y: Min, Mid or Max
and: Meet / slice

"Align the _____ of the element's viewBox with  _______ value of the viewport."

or ​none​ !

​Meet​ (default)
the entire viewbox is visible in the viewport, the viewbox is scaled up

so basically ​Meet​ will resize the drawing to fit the element while ​Slice​ will cut it off and show as large as possible of the svg drawing in the element as possible.

​none​ and scales and possibly distorts the drawing to fit it in all directions
Paths and Groups

​<g>​ element is good four grouping the elements that are commonly styled (with ​fill​ and ​stroke​)
you can also add ​class​ attribute for styling. 

Polyline

just an array of points. great for data visualisation 

Paths

​<path..>​ what are the letters ? ​d​ etc. Capital letter (​M​) is absolute positioning, the undercase is relative. 

M,m => moveTo (start of a path, or a new path)
L, l => lineTo (diagonal lines)
H,h => horizontal line drawn from the current position
V,v => vertical line drawn from the current position
Ending path:
Z,z => joins the end of a path (like in the second example)
  <svg viewBox="0 0 218.8 87.1">
  <g fill="none" stroke="#000">
    <path d="M7.3 75L25.9 6.8s58.4-6.4 33.5 13-41.1 32.8-11.2 30.8h15.9v5.5s42.6 18.8 0 20.6" />
    <path d="M133.1 58.2s12.7-69.2 24.4-47.5c0 0 4.1 8.6 9.5.9 0 0 5-10 10.4.9 0 0 12.2 
32.6 13.6 43 0 0 39.8 5.4 15.8 15.4-13.2 5.5-53.8 13.1-77.4 5.9.1 0-51.9-15.4 3.7-18.6z" />
  </g>
</svg>
Curve commands:

C,c => cubic-bezier
S,s => reflecting cubic-bezier (same on both sides/ends of the curve)
Q,q => quadratic bezier- where both sides share the same control point
T,t => command control point that's been reflected
A,a => elliptical arc