A quick hack

The data visualization fad has been running rampant for a few years now, but I wanted to detail a small SVG (Scalable Vector Graphic) hack I found helpful for those jumping on the vector train. Many of the SVG libraries available to programmers (I’m talking about Raphael, D3, Processing, etc) contain code that looks something like this:

1
2
3
4

< svg > viewBox = "0 0 1100 400" version = "1.1"
< path id = "s3" d = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60"
fill = "green" stroke = "black" stroke-width = "3"/ >
< /svg >

Where the path is defined by a set of letters (M – moveto, L – lineto) and numbers: “M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60” but defining all of that path logic myself just to render an octogon seems too complex, especially when considering that a more complex shape will have more complex path logic.

Finding SVG Paths in Illustrator

This is where a small hack can set you free. If you’re already design savvy, you can simply draw your shape of choice in Illustrator, hit Save As, select SVG, and hit Save. Then in the dialog box that appears, select the button that says “Show SVG Code”, and BAM! A .txt file will open up with your path defined for you.

Finding SVG Paths via the Browser

For those without Illustrator, there’s still hope. One way is to find SVG shapes that already exisit online through services such as The Noun Project where you can download an SVG file of your choice. Then open it up in your browser, inspect the element, and BAM! Your complicated SVG path logic is nested inside.

YOU’RE WELCOME. <3