What‘s the best way to use vectors in Hype?

Tips & Tricks
1

Import a SVG (elements->images) or copy and paste directly from Illustrator?
I have a lot of vectors in one Illustrator-File and I want to do some animations in Hype. The easiest way for me would be “copy and paste”. But is it the right way? What about saving a SVG-File from Illustrator and importing it? What´s the difference?

2

That’s not how I do it. If you just cut-and-paste the file, you’ll miss an important step – optimization.

There’s software called SVGOMG, which can dramatically reduce the file size of an SVG... SVGOMG - SVGO's Missing GUI ...but if you have a lot of files to work with, you might want to use ImageOptim... ImageOptim — better Save for Web ...which can be used to drag-and-drop for SVGO optimization.

1 Like
3

In general there’s no difference between a .svg file and svg text in the Inner HTML of an element. We’ve only heard about one bug of svg SMIL animations not playing in Firefox if it is included as a .svg file. But there are some pros/cons to both approaches.

Inner HTML:

  • It is included within the *_hype_generated_script.js so you do not need another network connection to get the file. But - your HTTP server may be pretty efficient at multiple network connections anyways. Also, this will increase the size a little bit (I’d guess around 5%) since it needs to be escaped as javascript data. This also means it may take a little longer to parse. So I’d only do it for very small SVGs, say less than 5k.
  • You can more easily make direct code edits. But if you’re coming from a visual tool like Illustrator, chances are this applies less.
  • Direct access to the SVG nodes via code if you want to make programmatic manipulations (via below note from @lovetobuildstuff)

As a .svg file

  • You can make use of the Resource Library, including its update functionality if it finds the original has changed on disk. This can lead to quicker turnarounds. You can also easily “replace” with another format if need be.
  • The above note from @photics about optimizing :slight_smile:.
2 Likes
4

Ah, I see. Ok. Thank you for this clarification, Photics and Jonathan!

1 Like
5

also, if you have elements with id’s or class names inside your SVG image, it’s much easier to target those in JavaScript if the SVG code is directly pasted into the innerHTML.

I’m working on a project using maps with various locations - each location with a marker. I have one SVG graphic (pasted into a rectangle innerHTML). The SVG contains several different styles of marker icons. I can show or hide a specific icon for any given location by targeting a class name or id.

To my knowledge, I don’t think that’s possible with just dragging and dropping an SVG file from the resources library.

1 Like