Plotting a simple SVG
We ran into a few glitches here the other day at Redshift Digital creating a GSAP animation with a simple SVG path. You would think with all the tools available this would not be too hard. Well, guess what? Sometimes there is too much technology and too many options. In order to help you avoid some of our mind boggled moments unraveling the vector mystery, here is a little workflow outlining part of the process.
The first hurdle was the asset for the SVG. This example, shows screenshots of Sketch. The asset to start our animation was a minefield of broken plots and dreams, disconnected paths and missed connections (Image 1). Exporting this SVG from Sketch and opening it in a text editor contains multiple paths, cryptic long numbers that are all transformed, translated and rotated. Plus, who knows what direction the thing is going in? Yes, direction is a thing since the animation goes from beginning to end.
Super messy SVG code from Image 1:
<svg viewBox="0 0 577 131">
<g id="Nodes-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy-13" transform="translate(0.000000, -142.000000)">
<g id="Group" transform="translate(-12.000000, 142.000000)">
<path d="M294.234899,100 C294.234899,83.4314575 280.818116,70 264.267676,70" id="Oval-2" stroke="#DDDDDD" stroke-width="2" transform="translate(279.251288, 85.000000) rotate(-90.000000) translate(-279.251288, -85.000000) "></path>
<path d="M264.267676,130 C264.267676,113.431458 250.850893,100 234.300453,100" id="Oval-2-Copy" stroke="#DDDDDD" stroke-width="2" transform="translate(249.284064, 115.000000) rotate(-270.000000) translate(-249.284064, -115.000000) "></path>
<path d="M517.234899,40 C517.234899,23.4314575 503.818116,10 487.267676,10" id="Oval-2" stroke="#DDDDDD" stroke-width="2" transform="translate(502.251288, 25.000000) rotate(-90.000000) translate(-502.251288, -25.000000) "></path>
<path d="M487.267676,70 C487.267676,53.4314575 473.850893,40 457.300453,40" id="Oval-2-Copy" stroke="#DDDDDD" stroke-width="2" transform="translate(472.284064, 55.000000) rotate(-270.000000) translate(-472.284064, -55.000000) "></path>
<path d="M0.991208961,130 L228.5,130" id="Line-Copy-3" stroke="#DDDDDD" stroke-width="2" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M295,70 L460,70" id="Line-Copy-4" stroke="#DDDDDD" stroke-width="2" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M518.5,10 L569.5,10" id="Line-Copy-6" stroke="#DDDDDD" stroke-width="2" stroke-linecap="square" stroke-dasharray="1"></path>
<circle id="Oval-3-Copy-4" fill="#BF3C95" cx="579" cy="10" r="10"></circle>
</g>
</g>
</g>
</svg>The first thing needed is a clean path from beginning to end on an Artboard. Create that path on the Artboard in about the location of where you are going to need it in the design. Image 2 is an example of a clean path on an Artboard in Sketch.
Ok, great! We have a nice clean simple path but when this path is exported from sketch, the G element in the SVG still has a transform applied.
Much cleaner SVG code from Image 2 with path selected:
<svg viewBox="0 0 573 120" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square" stroke-dasharray="1,1">
<g id="Artboard" transform="translate(0.000000, -99.000000)" stroke="#DCDCDB" stroke-width="2">
<path d="M0,218 L235,218 C251.569,218 265,205.552 265,189 C265,172.151 278.432,159 295,159 L461,159 C477.569,159 490,146.55 490,130 C490,113.451 504.432,100 521,100 L572,100" id="1"></path>
</g>
</g>
</svg>This seems like it might not be a big deal but it is hurdle number two. You do not want SVG code to include a transform. Transforming the SVG is saying draw this path but move it over here. Animating an SVG with the GSAP MorphSVG plugin is manipulating the path. If other animations are relying on this path, they are going to follow along the path but they will be below and over to the left or some other weird direction.
So how do you get a path from Sketch that is relative to the Artboard? This question took much longer to answer than I care to admit. I looked through preferences, Stack Overflow, googled all kinds of related terms then accidentally figured it out. In Sketch, make only the working path visible (Image 2), select the Artboard and export the Artboard as the SVG instead of selecting and exporting one path.
Now when you open the SVG in a text editor, it still probably has some long numbers but it is a lot more digestible and there should no longer be any transforming going on.
Image 2 SVG code with Artboard selected (slightly edited):
<svg viewBox="0 0 1440 1050">
<g>
<path d="M0,218 L235,218 C251.569,218 265,205.552 265,189 C265,172.151 278.432,159 295,159 L461,159 C477.569,159 490,146.55 490,130 C490,113.451 504.432,100 521,100 L572,100" id="1">
</path>
</g>
</svg>Here’s the stuff you need to know for a good SVG path.
1. <svg viewBox=”0 0 1440 250”> The last two numbers are the width and height of the SVG. In the SVG tag, it’s also helpful to check out the preserveAspectRatio tag for alignment. SVG does not follow typical behavior for CSS rules.
2. <g> Create your own class or id here and use CSS for stroke, fill, colors, etc.
3. <path d=M###,### L###,### C###,### ###,### ###,###> Here’s the real meat of the SVG.
What do all those letters and numbers mean in the path?
M###,### — This is the x, y position of the starting vector point.
L###,### — This is the x, y of a straight line vector with no handles in the path.
C###,### ###,### — This is the x, y position of a curved line. C numbers are the x, y of the bezier handle. The next set of numbers is the vector point.
Using this technique, changes can be made to the points in the Sketch file, and the x, y positions should correspond directly to the data in the D element of the SVG. (image 3)
Instead of re-exporting, opening in a text editor, finding which SVG to update and pasting code in the project, now only the numbers in the D element of the SVG need to be edited.
