Import svg file that is editable

When I save a svg from illustrator and import it, it becomes an image and not a vector shape that is editable. Do I need to use certain settings, when I export my svg. It will be annoying if you have to draw every vector shape again if you already have them in illustrator. So make sure this will be the best upgrade ever if this is fixed as well.

3 Likes

As far as I know, you still can’t edit ‘svg’ in Hype. Hype 4 has introduced vector animation tools, but, you’ll need to draw it in Hype itself (I’ll love to be corrected about this). You can animate your SVG in Adobe Animate and export it as an animated SVG from there and import it in Hype. It works for me.

If you choose this pipeline, Adobe Animate doesn’t have built-in animated SVG export options, you’ll need this extension: https://github.com/TomByrne/Flash2Svg. It has a few limitations, and you might have troubles to export the exact animation you want.

Hype doesn’t support native SVG. It only uses SVG as a background image and therefor has very limited possibilities for animation (on the whole blob) and doesn’t offer animation to individual path elements. There are workarounds but they require extra steps and don’t allow animation using the GUI. They merely allow to embed the SVG as is…

… still much room for improvement here. I sincerely hope Hype hasn’t backed itself into a corner with it’s custom vector format.

You can always import individual parts as separate SVG elements and then animate the resulting image containers as whole objects.

Adobe offers import / export tools among its programs. Hype can import SVG from many programs (it's a standard) and has its own internal polygon creation system (vector shape) which is more powerful and complex than a simple SVG.

It would probably be useful for Adobe to create an export to Hype, even Affinity designer has its own SVG and I would like it to be Affinity (or Adobe) to create a specific export. Adobe is unlikely, because it works with AnimateCC but Afifnity could do it!

So I agree with your request but I hope it happens in another way because it would increase the visibility of Hype in the world of digital designers.

I attend the Affinity forum and I rebuilt MEDUSA in hype starting from Affinity draw, it is very boring is true but if I could also animate the imported objects would not be fantastic?
Hype can improve the quality of other software and Serif Affinity needs a serious companion in HTML5. So ,we can spread this on internet to helps the hype development :slight_smile:

this is the AD file of medusa
medusa.afdesign.zip (439.7 KB)

2 Likes

Thanks for the feedback. We understand the importance and possibilities of full SVG import. I can say this was by far our v4 beta testers' #1 most requested feature :smiley:.

We haven't; our in-memory representation is a subset of SVG.

Simply put, having a full SVG import is large task to do and it was important for us to start with a narrow but useful scope for vector shapes in 4.0.0.

3 Likes

For me a lack of import vectors is a deal breaker it is a BASIC feature and you can use libraries for it and it’s not a “that” big task. Also, your software isn’t the cheapest one. So I can’t find any “why not” here. I will ask for a refund sorry…
So you added vector support that MUST be created inside your app which is not a vector drawing program? Even software like key-shape has full SVG import - and its ONE PERSON company. so…

@Vas1900 importing SVG is possible without problems, if you refer to the conversion of vector shapes you need to know that it is a more complex format and was introduced in the last release, not before. If this is a limit for you, maybe this might not be the right software for you and there are other more complex and expensive solutions that also have a heavier output.

1 Like

I will just stick with a Keyshape and add interactions with a code. Keyshape has a full SVG support and its cheap. so… I was hoping to do some cool things in Hype but I do have a complex vectors. so yeah you are probably right is not for me. As they’ve added svg support in a weird way. https://www.keyshapeapp.com/ here is keyshape - and yea you don’t need to redraw anything mate :slight_smile:
cheers

Keyshape looks interesting, but it seems to be focused only on SVG. Hype has a broader range and SVG has only recently been introduced. I think you can expect to see a lot more happening in this area in the next few updates.

Personally I would consider using both tools…

2 Likes

interesting software Keyshape, thanks
yes, depends on your needs.

..if you have time, visit Affinity forum and spread the request!

Dear vasqes,

I have looked at Keyshape and that seems to do what I want. I like hype and it is very easy to work with, but the import of svg is crucial. So I consider to work with both, like Trond suggested.
Thanks.

Yes, in that I agree. I was part of the beta and as much as I value the vector tool it recreates some aspects of actual SVG I wasn’t sure about in the way they have been implemented. If you look closer under the hood they make sense but for people just using the product or expecting it to just work with SVG it feels odd.

My finding and assumptions about the state of affairs goes back to the runtime and specially the timeline engine. It has it’s own way of doing things and rather then having a general purpose engine it is very tightly tailored around the timeline concepts presented in the GUI and the symbol mapped to the store format (JSON+Loader). The animation engine has currently only the capabilities to animate stuff created by the runtime and allows only access to exposed elements in the runtime. Meaning it isn’t possible to use it beyond the Hype Document scope on generic nodes or attributes. It also lacks callbacks. I guess it was easier to incorporate animations on Vector Tool attributes by using the built in functionality and timeline concept then to expose attributes on actual SVG elements.

This approach has the emphasis on tooling and turns Hype in the long run I to a full fledged editor.

The other approach would have been to turn the animation engine and GUI into an more generic animation engine and exposing SVG scaffolding in the GUI. Leaving editing shapes primarily to 3rd parties.

One approach starts at the tooling and works it’s way towards compatibilities to standards like SVG (better for beginners). The other way would have work from an existing format like SVG backwards (better for experts and exchange).

I would tend to true SVG handling working towards editing down the line but it requires these mentions additional 3rd party tools. I can understand the path Hype is taking offering it own and complete tooling first.

yes exactly. but that approach is a huge mistake in 2019. It is an old school closed standard/inside our app approach. Which is really not acceptable in current standards? I think if you have/had beta tests and users you should be listen to them and tweak/change your roadmap. It meant to be a big update, and it is. But lack of import vector option? Come on!
So now you have Hype 4 a great app for banners and things not so cheap. But without vector import its impossible to use for eg. if you work with third-party teams or freelances who use any vector program but not hype to create vector art :D. You can slice your vectors and export them in parts but you won’t be able to animate curves that have been created outside Hype… I don’t know who is in charge of the product there but should think about it while road mapping Hype. And tbh hype is the software for professionals not for kids so YOU should know that it will be the first feature that professionals are going to ask for. So I dont understand the logic behind that… Well but I applied for a refund and I will wait for the next version. I also decided not to update as a company we have more than dozen licences. We will wait or develop a different pipeline and completely remove hype. It is always a good idea as a company :smiley:

1 Like

Happy to help. Btw. Keyshape uses CSS for animations so has a native support for any device iOS and android no funky JS :smiley: its really good I tested it in a huge company :smiley:

I am a user as you are only making assumptions or to whom are you replying? I guess the topic and thread in general. I agree on standards support first. As I made clear in my previous post… I also understand why they did it, though. And there are at least two sides to a coin. Some are experts but many beginners. Also having full SVG support can lead to some ugly performance optimization problems. Too many curve points etc.

If you know what your doing you can use SVG as a great container with included ID’s or classes and target some nice animations on them like seen with Greensocks TweenEngines and an app like https://spiritapp.io/

1 Like

+1
I agree, depends on the project

If you know what your doing you can use SVG as a great container with included ID’s or classes and target some nice animations on them like seen with Greensocks TweenEngines and an app like https://spiritapp.io/

Which is what I ended up doing. Works well for my project.

Yes me too. I consider mostly Hype more of an HTML5 composer then an content editor but with the vector tool I find myself using it from time to time over going to another app.

But whatever works as there are many user that render GIFs and movies with Hype. It’s a beast with many heads.

Thanks for the feedback, we definitely understand how great being able to edit SVGs within Hype and make use of its animation capabilities would be.

While we don’t make promises on specific features or release dates, I think one could infer a 3rd point on a line from 2 existing points - that is (1) Hype 3.6 did not have any vector shape capabilities, and (2) Hype 4 has some. A trendline may emerge :wink:.

“Shapes” was our top user request for the entire 8 years of Hype’s life, and I think we also have enough data points to know the trendline is for full SVG editing being the next one :slight_smile:. We like to implement top requests.

As a company, if something is useful, we prefer to refine and release the useful bit first. This reduces risk (say if no one needs a feature we spent too long on) and gets something into the hands of users that may help their animations. This approach also helps us figure out what parts should be expanded in the future, and which parts might not need to be. Along with that, browser bugs are extremely common, and rolling out features can let us know where edge cases exist.

At a basic level, any SVG editor must have its own internal representation of the SVG in order to manipulate it. Hype’s pushes a bit of this into the export so we can more easily manipulate it at runtime. Hype does not just playback animations - it is an interactivity tool allowing for arbitrary changes with timelines and API access. This means even the runtime needs to be very knowledgeable about the vector shapes.

The approach we took is forward-looking and compatible with future changes to allow for importing SVGs, manipulating them, and exporting.

Finally I’d like to point out that Hype 4 is probably the largest update we’ve done. Yet it is all additive - if there’s a new feature that doesn’t fully fit your needs, all your previous knowledge of Hype 1-3 will 100% apply (okay, maybe 99.9% as I think we changed 2 keyboard shortcuts and a couple bug fixes around symbol behavior). If you thought Hype 3 was a professional grade tool, then by this virtue Hype 4 is as well. We don’t remove or damage other features when developing new versions. We want users to be on a very smooth ride as our major, minor, and bugfix releases develop.

10 Likes

:100: :clap: :clap: :clap:

For people with lounge access there are some assumption I made about the tech and the possibilities …

https://forums.tumult.com/t/vector-tool-4-5/16141?u=maxzieb

So I am not worried at all. Looking forward to the evolution of my favorite tool.

1 Like