Export as SVG animation

It seems no-one out there has made a real SVG animation export solution (Adobe AE has a plugin thing and so does the horrible UI/UX mess of Adobe Animate - but you still need to implement coding).

I know a lot of web designers are asked to make small buttons with for instance snap.svg, Vivus, GreenSock etc., but this means coding skills in JS or jQuery is needed. Hype should be able to make such fairly easy WYSIWYG style.

My question is: When will this option be added to Hype?


Thanks for your suggestion, @HansenHimself.

If you can tell us a little more about what types of things you’d like to create in SVG-animation form that would be great (and also what you mean by ‘SVG animation’ since you can already animate SVG elements individually in Hype). Knowing the types of animation you want to make is important for us!

We typically do releases early in the week, but beyond that I can’t make any date promises for features or releases, though we’ve been known to tease features at the Hype Conference.

Hi @Daniel (cool name BTW) :slight_smile:

What I miss is the ability to use SVGs not only as a static image, you can scale, rotate and stretch - but also edit and draw on screen. Take a look at virus.io or snap.svg. Saving one file to use along with simple CSS and with the aid of JS. That way you use the SVG as an element instead of a whole canvas.

at least when you make use of svg inline you’ve got all abilities …
just load snap and you’re ready to go for using its API

Which means coding, @h_classen :wink:
I want to use a GUI like Hype because I do not code very well…

this might be a good sample for a possible third-party-plugin :slight_smile:

1 Like

SVGator is a tool that does what you want - it launches officially next week.

1 Like

At least someone out there is solving the issue - sort of. It would still be nice to have it all in one app. Thanks,@drewbullen, for your answer.

I know svgator in its beginning stages but the experience seems weak. I wish Hype can export svg animations if say the animation is comprised of text, shapes, or pasted from vector apps like illustrator.

Agreed, that would be great but I don’t see that happening in the near term.

Currently, I use multiple tools depending on what kind of animation is the goal.

The closest thing to satisfying your wish is the Greensock suite of tools. However, they require some programming chops.

1 Like

Hi! I'm new to Hype Pro, just starting with my first project, but I wanted to know if this feature of exporting as SVG has gone anywhere? I can't find any more info for it than this post. I too have tried svgator.com, but as stated, it would be great to have the export ability here as well.

you can animate Hypes svg-paths, but export is html5 (html, js, svg), video, png-sequence or gif ...

Thanks for the feedback. I'd be curious of the context in which you would be using the .svg file where HTML or video formats do not fly?

Thanks for the replies @h_classen & @jonathan.

I currently use some static SVGs on a website of mine (in place of rasterized images)... I was hoping to replace them with animated SVGs instead... just give them some movement (they are only text). svgator.com produces files that would work for me, but I am enjoying Hype so far and like the idea of just using that...

hypes export can be embedded as div. so just replace your static svg ...

1 Like

This is potentially interesting... I'll try to look into that. It's just that my site is already set up with several customized, automated systems - and this particular one is designed to accept and insert an SVG... Thanks for your suggestions @h_classen!

An interesting extension would be a function going through all SVG elements in a scene, combining them into on SVG container and then triggering a download.

but it'll be static!¿

True, you are right. Short sighted answer :face_with_hand_over_mouth:

If one has such a function one could probably snatch a snapshot (maybe beginning of the main timeline) and a second snapshot (at the end) and do something with CSS transitions. Hmmm :face_with_monocle: but not sure if it’s worth the trouble writing it.

very special hm :wink: