Adding SVG code to Hype from Illustrator

Elements
1

Hi all, relatively new Hype user (since December 2015) using Hype for online advertising with a question about adding SVG code. The issue I’m having is that when I add SVG code generated by Adobe Illustrator CC 2015.3 to a blank Hype element within the inner HTML, the SVG is not visible within Hype but is visible on preview in a browser or even the Hype scenes window (also shows correctly when uploaded to our staging server).

In Illustrator I export as SVG/SVG options/show code then copy the code and paste into a blank rectangle’s inner html as shown here:

Screen Shot 2016-07-11 at 9.29.43 AM.png2126×944 179 KB

This is what I see in Hype:

Screen Shot 2016-07-11 at 9.42.13 AM.png2138×1518 383 KB

The file shown is attached for reference:
SVG-sample.hype.zip (15.0 KB)

If anyone can offer a suggestion to correct this it would be most appreciated - SVG would be preferred over PNG for building animations with small logos or graphic type and right now I’m stuck with just that:confused:

Thanks!

1 Like
2

It appears that Illustrator has introduced an issue with pasting SVGs (see this thread). The workaround is to first paste your SVG code into a tool like SVGomg and clean up the code.

  1. Click ‘Paste Markup’ on that page
  2. Click the download button
  3. Drag the downloaded SVG file into Hype
3

Thank you Daniel. When I paste the code from SVGomg into the blank Hype element it is still not visible within Hype, but is visible on previewing with the web browser. I’m trying to avoid drag and drop with SVG’s as our staging serving won’t render those, only SVG code pasted into a Hype elements inner HTML. I’ll keep trying to find a workaround.

4

I see – you would then need to open the downloaded .svg code from SVGomg and then paste that within the inner HTML of an element.

5

Correct, that is what I did with the same result, not visible in Hype only in browser preview.

6

There’s an easier way (this is also mentioned in this thread)

  • Select your vectors in Illustrator
  • ⌘ + C to copy
  • Create rectangle in Hype
  • Select Edit > Edit inner HTML
  • ⌘ + V to paste

This worked when copying from this test file, and it appeared in both the scene and scene preview.

file.ai.zip (129.2 KB)

7

Thank you Daniel! While this didn’t solve the issue it shed some light after seeing the file you attached - I’ve only been working with type converted to outlines, not objects. So the visibility in Hype is only an issue when working with type converted to outlines…I’ll dig deeper, but I think it might be a step being missed in Illustrator prior to adding the type-to-outlines into Hype. Thanks again!

8

This works...but for example
the export with normaal imported svg is 375 kb

and the one with copied the code is 1mb.....
i was hoping that the one with copied code was less than the normal way...or is there an option to make it smaller?

9

sorry, I made it smaller by doing a svg export by illustrator...
that made the svg 90kb...and the kb of the folder now is 300kb...

an export of an empty hype doc is 210kb...so the difference is the 90kb of the svg..exeptable

10

I'm a little unclear; are you all good?

Note that you can use File > Advanced Export in Hype Pro to disable some exported items if disk space is a major concern; a lot of the export will not actually be downloaded.

11

thanks, I'm using a lot of Export DCM