Bringing over assets from Adobe Illustrator


#1

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!


#2

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


(Jonathan Deutsch) #3

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.


#4

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.


#5

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.


#6

OK great - here you go:

Pancreas.ai.zip (2.0 MB)


#7

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?


#8

@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


#9

Anyone using clipboard managers like Quicksilver or Alfred?


#10

no - none of those


#11

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:


(jangeltun) #12

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