Import/Export Vector Art

Hi, I’m trying to make an animated & a still vector logo. What’s the recommended workflow in Hype 4? To me it would be easiest to create the logo in Hype then export as SVG, or similar static vector format, but that doesn’t appear to be an option…?

The example is simple line art, and the animation is as simple as using “create line draw animation” in Hype, but we need the final logo to be identical in both animated web & in print.

there is no vector-export. But you may copy paste the svg-code from a rendered Page …

1 Like

Does the entirety of the logo animate? If most is static, build the static part in the graphic editor of your choice, import that portion into Hype and then build the animated part in Hype. As @h_classen mentioned, you can get the full SVG data from a shape created in Hype, so that could then be imported into your graphics editor. Copying a vector shape and pasting it into a text editor will give you its SVG shape. The current point in the timeline would represent the SVG data you get when you copy:

2 Likes

Thanks @h_classen & @Daniel.

For anyone still confused by this, the process of exporting an SVG from Hype that works for me is:

  1. Open the Hype document in Hype 4

  2. Select the vector shape and cmd-c copy

  3. Paste the text that is copied into a text editor

  4. Copy the <SVG...>...</SVG> text (excluding the <DIV...> and </DIV>)

  5. Open a vector editor (I use Affinity Designer)

  6. Create New from Clipboard

  7. Export as whatever.svg (or any other image format you fancy)

It could be that I'm overcomplicating things (if so all suggestions would be welcome) but the above does seem to work.

@Daniel it would be lovely if a future version of Hype had an export SVG function to streamline this, or even just a 'copy SVG to clipboard'. Hype's pretty excellent for SVG creation - I actually prefer it to Affinity Designer for creating bezier shapes and paths. It would be great to be able to generate icons, etc. from Hype without needing the above 7 step process.

2 Likes