Paths and groups
PreserveAspectRatio
Paths and Groups
Default:
preserveAspectRatio=”xMidYMid meet”
uniformly scales, like
background-size: cover;
in CSSTakes 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<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