Import svg file that is editable

Happy Easter! :slightly_smiling_face:

3 Likes

interjecting for a moment here…

among many of the biggest selling points for me, is that Hype has a dedicated forum with a plethora of longtime users.

someone mentioned keyshape… which does not appear to have one.

2 Likes

Here’s to hoping editable Vector imports are coming in V5.0 :wink:

2 Likes

+1000 for this feature!!! I'm exploring ways to do a simple line drawing reveal animation, like animating a written signature, using vector paths. In AfterEffects this process is ridiculously complicated, and I was hoping that Hype would simplify it with the Line Draw feature on an imported vector path. Even importing SVG or copy/pasting a path from Illustrator works, but Hype still can't make it draw-able.
This would be a huge step forward in one of my favorite tools -- please consider adding it!
Thanks

2 Likes

+1000 has been added to the tracker! :smiley: (But really, thanks for the feedback!)

2 Likes

The steps to embed and animate external SVG files in Hype are relatively straightforward.

I made a short how-to video to demonstrate one way of doing this. Check it out here.

5 Likes

Thanks for putting this together! Do you have a sample document you can share also?

Very interesting. Thank you for making it so clear. :ok_hand:

The question I sometimes have is the following: if you use this person/tool a lot more than planned, why not persuade this person to join the team/buy the tool?

As I stated before there are little program out there made for Mac that could be easy to buy for Tumult. You guys need an investor day. :smiley:

1 Like

Can you clarify what you mean by "this?" I feel I'm missing context.

There are definitely some off-the-shelf projects that can help manipulate SVGs (shoutout to Paper.js which we current use pieces of), but the tricky part is proper integration given SVGs feature set is vast and has some different principles than how Hype thinks of a document.

Wow! http://paperjs.org/examples/
This project is very interesting. :exploding_head: My head just exploded.
Thank you! @jonathan

1 Like

They are definitely not Tadpoles!! :rofl:

2 Likes

:rofl:

1 Like

This feature ist an absolute must have. Is there any progress?

well, I thought I'd have a go!... and have actually had some success in getting shapes out of illustrator in to hype.
I did a bit of reverse engineering of the Hype doc (which is essentially a plist file) to find out where the shapes are stored. Thankfully, it still all works when the plist file converted to XML!. So I wrote an illustrator script to export path points as XML, then munge them in to the Hype document's plist file. Here's my progress...


Still a long way to go.
One issue is Hype's vector format doesn't support multiple paths in one vector shape. So every path in illustrator needs to come in to Hype as a separate shape.
The other issue, which is a dealbreaker is that Hype's vector shapes don't support compound paths / booleans.
I've also got to sort the control points properly. Almost there though.
And for whatever reason it's all upside down.
So it might be useful at least for solid shapes, but it's not really useful until Hype add support for compound paths and multiple paths per shape. I'm sure this is their stumbling block with development, not so much getting points and shapes across. And I guess when they do, they'll prob be able to import vectors then.

5 Likes

That's an insane hack! (In the best possible way).

I'm surprised it is upside down, but this type of problem is generally common. Are you importing from SVGs or from some Illustrator data?

And you're pretty much right on all points. The Hype Vector Shape is limited to just a few SVG path commands, so even making an importer on just the path part would probably not work with most paths in the wild. And that's before diving into SVGs that include multiple paths/shapes/etc. It is a pretty big spec :slight_smile:.

I wrote a script for illustrator to export a complete data.plist file. So I can just select the shape, run the script then replace the data.plist file.
I've solved the control points now, so the shapes are coming in perfect now. The upside-down issue I think is due to illustrator seeing top->down as -Y, where as Hype sees top->down as +Y.
illustrator-to-hype-screen-recording

5 Likes

This is cool, How about them edit points can you modify the shape(s) after they're brought into hype? @Jonathan maybe you can make some adjustments to Hype to support this script better? Perhaps an Import feature for Illustrator type paths using this type of script, just a thought.

I assume the data.plist file @wavey is making is an entire Hype document. So I'd imagine you could put it in a folder with the .hype extension, add an empty "Resources" folder, and then perhaps automate opening this file?

My recollection is @MaxZieb's Export To Hype (Adobe Illustrator Edition) makes a full file like this?

I understand why you would say this, and I should note we aren't meaning to be weird! The v4 vector shape support was just a subset intended to kick things off and still allow for useful functionality for making shapes and paths within the confines of Hype. Our #1 feature request from v1.0 days was to add support for arbitrary shapes and paths. Now our #1 feature request is to extend this to work with existing SVG files :slight_smile:.

That's interesting, thanks for linking that - tbh I hadn't even looked around (started off as a 'I wonder if...' / fun little project).

Having had a quick look (at the one on GitHub), it looks like @MaxZieb's version exports the full illustrator document as an SVG file and embeds in a hype document/template/symbol (and yep, pretty similar in that he generates the plist file too).

My version slightly different - it exports the selected illustrator paths as fully editable native Hype vector shapes.

But yes, @jonathan I'm generating a full plist file. Since my last post I've written a small dialog with folder selection, and It's at a stage where you select the blank hype doc and it overwrites the plist.
I did think all I need to do is just create a folder, a blank resources folder and with the plist that would be a full Hype document. I just assumed folders etc couldn't be created in js (My illustrator scripting skill level is near zero!), but having a look at @MaxZieb script and a bit more googling, it seems it is - just needs to be jsx!.

So I think I'm gonna carry on developing and get it to output as a full hype document armed with that knowledge :).

Quick update: Sorted the flipped Y issue, and added fill / stroke colour, stroke width, opacity, open/closed path support.

8 Likes