Adding SVG code to Hype from Illustrator


#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:

This is what I see in Hype:

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!


#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!