SVG path import for custom shapes and text

[chrisgannon]

The ability to draw a bezier path (in a vector program) and convert that path data into usable Zdog code would be very useful.

[desandro]

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

---

Thanks for this feature request. Yeah, currently you have to hard code all your path commands. Adding SVG path importing would open up Zdog to a lot more custom designs, including proper typography.

[chrisgannon]

I have a rudimentary workflow for this using Greensock's MorphSVGPlugin method pathDataToBezier (to convert, well, path data to an array of bezier objects). You then pass that output into my own makeZdogBezier function that creates a Zdog-specific bezier structure.

I'm also animating and sequencing using Greensock.

Here's a few examples:
https://codepen.io/chrisgannon/pen/4ef3e5deaf41cf81415c52112ea2692c
https://codepen.io/chrisgannon/pen/886fb698e67c13b8369a2ec05a640900

[eeropic]

Cooool stuff!!
Was actually working on the same thing, but through Paper.JS -
it can import SVG and makes handling and conversion of the
vector objects very easy

https://codepen.io/eeropic/pen/rgQapW)

[chrisgannon]

@eeropic Nice demo! It seems we're both having to use large libraries for just one conversion operation which is quite wasteful and bloated. I would love to see Zdog have this built in.

Here's another demo - this one is pure SVG (with transparency)!

https://codepen.io/chrisgannon/pen/OYadbL

[eeropic]

Agree. But there’s just a lot of stuff to cover if you want to support using defs, embedded css classes for object styles etc. Maybe the SVG parsing part could be forked.

[eeropic]

@chrisgannon should we make a PoC with DOMParser? :)
Combined with something like https://github.com/jkroso/parse-svg-path/blob/master/index.js

[turbo]

@chrisgannon or @eeropic can either one of you please detail the workflow you've used to create and import these shapes? A short bullet point summary with code samples would be much appreciated. Trying to wrap my head around this 😅.

[chrisgannon]

• Create a path in AI and copy/paste into a text file.

• Copy just the path data and paste into @greensock's pathDataToBezier method.

• Pass the result of that into my own makeZdogBezier function

[turbo]

@chrisgannon Thx, was able to adapt that technique to vectors created with https://vectr.com.