Monica Wojciechowska
Frontend developer + data visualization engineer. Pierogi lover + world traveller.
The Language of Shapes
Understanding the (SVG) Path
New Jersey
Philly
Washington DC
MechE
SSE
Marketing
North Carolina
Econ
Programming
ChillJS...
Soccer
Pole vault
Muay Thai
THE PATH
^
(super abstract)
THE SVG PATH
^
(slightly less abstract)
What is the SVG?
Scalable Vector Graphic
What is the SVG Path?
=
HTML
SVG
text
graphics
<g />
<circle />
<rect />
<line /><div />
<h1 />
<ul />
<p /><path />Why understand the path?
POTENTIAL
PRACTICALITY
PLEASURE
Why is it difficult to understand the path?
<path fill="none" d="M2.568,7.179H8.96c1.411,0,2.557-1.145,2.557-2.557c0-1.412-1.146-2.557-2.557-2.557H8.534c-0.235,0-0.426,0.19-0.426,0.426c0,0.236,0.191,0.426,0.426,0.426H8.96c0.941,0,1.704,0.763,1.704,1.705S9.901,6.327,8.96,6.327H2.568c-0.236,0-0.426,0.19-0.426,0.426C2.142,6.988,2.333,7.179,2.568,7.179 M15.778,7.179c0-0.941-0.763-1.704-1.704-1.704h-0.427c-0.235,0-0.426,0.19-0.426,0.426c0,0.235,0.19,0.426,0.426,0.426h0.427c0.47,0,0.852,0.382,0.852,0.852c0,0.471-0.382,0.853-0.852,0.853H0.864c-0.236,0-0.426,0.19-0.426,0.426c0,0.235,0.19,0.426,0.426,0.426h13.21C15.016,8.884,15.778,8.12,15.778,7.179 M16.631,9.736H2.568c-0.236,0-0.426,0.19-0.426,0.426c0,0.236,0.19,0.426,0.426,0.426h14.062c0.94,0,1.704,0.764,1.704,1.705s-0.764,1.704-1.704,1.704h-0.427c-0.235,0-0.426,0.19-0.426,0.427c0,0.235,0.19,0.426,0.426,0.426h0.427c1.411,0,2.557-1.145,2.557-2.557S18.042,9.736,16.631,9.736 M10.665,11.44H4.273c-0.236,0-0.426,0.19-0.426,0.426c0,0.236,0.19,0.427,0.426,0.427h6.392c1.412,0,2.557,1.145,2.557,2.557s-1.146,2.557-2.557,2.557h-0.426c-0.236,0-0.426,0.19-0.426,0.426s0.19,0.427,0.426,0.427h0.426c1.883,0,3.41-1.526,3.41-3.409S12.548,11.44,10.665,11.44"></path>
How can we gain understanding?
LITERACY
COMPREHENSION
CREATION
LITERACY
COMPREHENSION
CREATION
Book
Sentences
Words
Letters
LITERACY
COMPREHENSION
CREATION
Path
Path data
Commands
Letters and/or Numbers
<path fill="none" d="M 110,10 l 80,80 v -80 h -40"></path>LITERACY
COMPREHENSION
CREATION
SVG Path Commands
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
move to (x,y)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
line to (x,y)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
horizontal line to (x)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
vertical line to (y)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
Cubic bezier curves (cX1,cY1 cX2,cY2 eX,eY)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
Smooth Cubic bezier curves (cX2,cY2 eX,eY)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
Quadratic bezier curves (cX,cY eX,eY)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
Smooth quadratic bezier curves (eX,eY)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
Elliptical arcs (rX,rY rotation, arc, sweep, eX,eY)
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
closePath
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
C1 = 2/3C + 1/3P1
C2 = 2/3C + 1/3P2
P1
P2
C
C1
C2
LITERACY
COMPREHENSION
CREATION
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
| M | m | L | l |
|---|---|---|---|
| H | h | V | v |
| C | c | S | s |
| Q | q | T | t |
| A | a | Z | z |
LITERACY
COMPREHENSION
CREATION
| M | moveTo | x, y |
| C | curveTo | x, y, x1, y1, x2, y2 |
| A | arcTo | rx, ry, angle, large-arc-flag, sweep-flag, x, y |
| Z | closePath |
LITERACY
COMPREHENSION
CREATION
finding our path
But did we find what we were looking for?
Finding our path
Shaping our path
LITERACY
COMPREHENSION
CREATION
The path is beautiful.
Thank you.
Resources
-
svg-pathdata https://www.npmjs.com/package/svg-pathdata
-
Mavo Path Builder: https://mavo.io/demos/svgpath/
-
Why SVGs are awesome according to Sarah Drasner: https://www.youtube.com/watch?v=sxte3WpyO60
-
MDN Path Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-
MDN Path Docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
-
D3 curve explorer: http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8
-
Free SVG icons - http://svgicons.sparkk.fr/
-
“Awaiting the perfect tool” article - https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/
Demystifying the SVG Path
By Monica Wojciechowska
Demystifying the SVG Path
The SVG path is the building block of building blocks: all basic shapes can be created from a simple path. When twisted, turned, extended, and cut, in the right manner, a path becomes a picture. During this presentation, we’ll take a deep dive into the language of the SVG path element, to demystify the magic behind implementing these transformations.
