Bringing over assets from Adobe Illustrator

Hello Hypers!

We bring over the art from Illustrator to Hype as our work flow. However, on some computers that we use, masked images, translucent images, or some images don’t come over on copy and paste, but on other computers they do. What is the reason for this? I assume it is some setting we need to turn off / on.

Thanks!

When copying elements from Illustrator, Hype received something like this from a simple rectangle:

<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="200px" height="168px" viewBox="0 0 200 168" style="enable-background:new 0 0 200 168;"
	 xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<defs>
</defs>
<g>
	<rect x="0.5" y="0.5" class="st0" width="199" height="167"/>
	<path d="M199,1v166H1V1H199 M200,0H0v168h200V0L200,0z"/>
</g>
</svg>

When this is pasted into Hype, a new SVG file is created and added to the Resource library. I’m finding that opacity, complex shapes, and bitmap images are copied correctly into Hype. Can you share a .ai file and let me know what you’re trying to copy in? I’m using Illustrator 22.1.

When including an image, you get a pretty huge string of text encoded as base64, which is pretty inefficient. So ideally, you would just import the bitmap as a regular image to avoid the bloat. The SVG file below represents a shape and image, which is how Illustrator shares copied data with other apps: https://cl.ly/2f023H2s1o36

Also there is a setting in “File Handling & Clipboard” for copying to Include SVG code. You may want to look to see if that is consistent between users.

Hi @Jonathan - yes we did that and ensured the settings were all the same for “File Handling and Clipboard” in Illustrator, but no luck.

Incomplete images.hype.zip (1.1 MB)

In this file - you will see 2 images. The left hand image is an incomplete one brought over simply by copying and pasting from Illustrator. The right side image is what it should look like (That is a PNG image). On my computer I keep seeing incomplete images and have to take the time to convert to PNGs. However, on a colleagues computer, they can simply copy and paste and bring over complete images.

The images are of the pancreas by the way! :slight_smile:

If there is a way to upload the .ai or .pdf file of the image I would be happy to post that so you can see what I am trying to copy and paste over to Hype.

If you add it a zip file before dragging into your reply that should work if the file is under 3MB. If it is over, wetransfer.com or dropbox would be best.

OK great - here you go:

Pancreas.ai.zip (2.0 MB)

When copying that object into Hype from AI, I get a complete SVG:

copied-from-ai.hype.zip (308.4 KB)

43 PM

Are you copying from different versions of Illustrator?

@Daniel
Yup, that is what some others in our group get from their computers while some others don’t. We are all using Illustrator 22.1 on iMacs

Anyone using clipboard managers like Quicksilver or Alfred?

no - none of those

Not sure what could be happening here. For your case, I would recommend using the Asset Export Panel so you can reliably get the SVG:

21 PM

Using these SVG settings:

2 Likes

A big benefit of exporting to SVG from Illustrator is the ‘Minify’ option. It greatly reduce the file size.

1 Like

The Asset Export tip works as expected.


But I did run in to the issue above. I know this is 5yrs on from this post but Its my first time using AI and I thought it worth documenting my results in the hope it give some more clues as to what is going on..

A simple copy and paste straight into Hype ( all Assets selected )

Produces in Hype a pastedVector:


From the same clipboard and pasting into a Rects innerHTML :

It only includes the Text element ?.


Second copy attempt : In Illustrator and hiding the Text, with all others selected :

Direct paste the same result as the direct paste above.


InnnerHTML paste:

It now gives you some svg

<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1043.5 722.5"><defs><style>.cls-1{fill:#32003f;stroke:#000;}.cls-1,.cls-2{stroke-miterlimit:10;}.cls-2{fill:url(#Super_Soft_Black_Vignette);opacity:.48;stroke:#fff;stroke-width:3px;}</style><radialGradient id="Super_Soft_Black_Vignette" cx="390.5" cy="317" fx="390.5" fy="317" r="265.708" gradientUnits="userSpaceOnUse"><stop offset=".574" stop-color="#130c0e" stop-opacity="0"/><stop offset=".798" stop-color="#130c0e" stop-opacity=".651"/><stop offset=".819" stop-color="#130c0e" stop-opacity=".705"/><stop offset="1" stop-color="#130c0e" stop-opacity=".95"/></radialGradient></defs><g id="ZVhB27.tif"><rect class="cls-1" x="24.5" y="6" width="750" height="716"/><rect class="cls-2" x="135.5" y="41" width="510" height="552"/></g></svg>

But the data is missing. I think it is trying to reference the asset objects but this is the first time I have ever used AI so not 100%.

1 Like