What is the difference between Vector elements and the vector files from Adobe illustrator

alexlii · August 21, 2019, 2:38am

Hello,

I found Vector elements need more CPU usage, and it is easily cause safari crash on IPHONE, so, what is the difference between Vector elements and the vector files from Adobe illustrator?

Any tricks to use Vector elements for MOBible project please?

Thanks

MaxZieb · August 21, 2019, 7:37am

Under the hood both are plain SVG. The one from Hype is managed and the runtime updates it when you animated path data. If you only move the entire container they behave the same.

Adobe illustrator can produce more complex shapes and use/produce a much bigger scope of the SVG markup vs. Hype that can update its very simple SVG path subset.

Hope that helps.

tgr · August 21, 2019, 11:16am

SVG files can be optimized for size and presumably also CPU usage. More info here: https://petercollingridge.appspot.com/svg-optimiser

My guess is that SVG files from Illustrator are less CPU intensive.

MaxZieb · August 21, 2019, 11:24am

The intensity can arise from the file itself meaning the complexity of the path data and the CPU needed in redraws when moved. Hence, Illustrator can be much more intense as you can create much more complex layouts than in the Hype app. On the other hand Hype just doesn't have the tools to create multilayered SVG's yet. Each Vector Object is rendered into a single SVG file and the composite is done in the browser render layer. Adobe illustrator packages everything into one single SVG container and hence the composite is done in the SVG module of the browser. My hunch is also that the later is faster.

Then there is the Hype animation part that actually modifies the path data. Not sure how efficient that is done and that is a whole suit of speed tests on its own vs. other libraries and approaches to animate SVG (CSS-Animations etc.)

jonathan · August 23, 2019, 1:04am

If you are experiencing a crash in using vector shapes, can you please post a zip of your .hype document here or send it to support@tumult.com? It would also be great to know which iOS device you are using and any steps required to reproduce the crash.

alexlii · August 23, 2019, 8:36am

Hi Jonathan,

I already adjust the Vector element to be smaller ones, and it seems much bette nowr, anyway here is my hype document if you like to track any potential issues:
baoingredient.hype.zip (515.3 KB)

and here is the url at our site:

https://www.lovcour.com/baomachenizm/baoingredient/

I test it on iPhone 5, with IOS 12.3.1

if set the vector elements to be large ones, and scroll the page up and down, mostly it will be reproduced.

Thx

jonathan · August 25, 2019, 12:19am

To clarify, did you have mostly-identical SVGs from illustrator at the same size that did not create a crash at the same size as vector shapes from Hype?

alexlii · August 26, 2019, 3:24am

Hi @jonathan,

Great question.

To be frank, I use SVG mask from illustrator, but Usually only one in HYPE document, not so much svg files in one Hype project file . like the phoenix mask at this page:
https://www.lovcour.com/homenew/water_9a/

The color wheel is also created by Hype SVG elements, sometime, it will cause crash.

Since SVG element is a new function, and it is really a big GUN for me, and it is so convenient for us to create variable elements, so I use several SVG elements in one hype only RECENTLY.

For comparison, I create add several SVGs from illustrator into HYPE only for mobile mode, but use Hype SVGs element for PC mode, it seems quite stable:
Please check at this page if you like:

https://www.lovcour.com/bu_mechanizm/bu_ingredient/

Or you might like to check the document if you want track something.

bu_ingredient2.hype.zip (740.4 KB)

By the way, I found the svg element could be interpreted as DIV code when I try to copy one SVG element into Sketch or Adobe illustrator, Like this way:

although I do not know what does that mean, but it is really interesting.

Thanks, have a nice day.

jonathan · August 27, 2019, 10:22pm

Thanks for sending those my way.

Ultimately it is difficult to say specifically what may cause a crash without an apples-to-apples comparison, but fundamentally these crashes are generally related to the browser running out of memory. There are many different reasons why this could be the case, but I'd recommend for you the best item you can do is uncheck "Use WebKit graphics acceleration" for your documents. They are typically quite big (as in dimensions) and using the webkit graphics acceleration method will eat up significantly more memory resources (as there are GPU duplicates). Unless there's an animation that specifically performs poorly for you'd, I'd have that be a rule of thumb.

Correct, when you copy a Hype element and paste it into a text context, it will paste the inner HTML of the div. I originally just had this for debugging purposes for myself, but found others may get some value out of it. If you look inside, you'll see the <svg> element itself, which is what Hype generates. This can be extracted and used for all kinds of purposes, like putting in a graphics tool.

alexlii · August 29, 2019, 10:29am

Thanks.

Actually, I do not know what it is used for, is there any potential effect to any function please?

jonathan · August 29, 2019, 8:41pm

This box essentially adds a rotateY(0deg) transformation to all elements, turning them into 3D objects. As such, WebKit-based browsers currently will use GPU-based compositing. This can result in better performance for animations, but can come at the expense of using more memory.

mikefrost · July 12, 2020, 9:22am

Max is there anything that can convert illustrator documents to a vector shape that hype can then animate?

MaxZieb · July 12, 2020, 10:54am

Not really. One could program a converter, though. I’d like to see SVG support one day by allowing not full access but some custom properties function to hook up arbitrary attributes or styles.