Importing vector shapes


I have a map of the United States that I need to make interactive. The map is in Illustrator, but I can export it as almost anything.

How can I import this map, either as a whole or state-by-state, so I can add button functionality, change colors on hover, etc?

I’ve Googled and am finding info on older versions that this cannot be done - so I just wanted to see if this can be done with the current version.


not yet, you’ll find some scripted / fiddled approaches in the forum …

Imports are on a asset by asset level. Hence, not relative positions to each other on import. Meaning you need to import them all individually as it makes sense for the task at hand and position them manually.

On other way is to export all assets with document bounds and then group each asset and move the bounds to appropriate dimensions. Works with SVG as the “white space” doesn’t cost much. In Pixel Assets that might add weight. In general that workaround adds HTML depths and complexity.

1 Like

Thank you for the responses.

I’ve decided to import the map as an SVG and trace it using Pencil on my iPad Pro using sidecar. This seems to allow the most flexibility.


1 Like

Ya know, tracing with sidecar isn’t unpleasant. I found it to be oddly relaxing.

This is the first useful thing I’ve traced in years and first on a tablet. Anyhoo, screen shot attached. It’s meant to have the ‘hand-drawn’ look.

Template here: US Map (hand drawn style) Template. Bare


Awesome - and thanks for posting. I’m sure this will be useful for other folks :slight_smile:.

In fact, shape morphing states is one of the most classic demos.

I need to find some tutorials on shape morphing and interaction.

If I make the entire map a symbol, can I morph into it from text so when it comes into the viewport it morphs from what the map is about into the map itself? And keep interactivity with the states? Sooo…many…questions! :crazy_face:

1 Like

Right now, Shape Morphing only happens for a single vector shape element’s path. Of course you can have multiple shape morphs animating at once, but you cannot take two paths and combine to a single one. As such the element remains the same including all of its actions.

This very video starts with a shape morph of California and Nevada:

1 Like

Thank you, sir! I’ll watch this now.

As to not disrupt the organization of the forums, I’ll ask further questions in their appropriate topics.

Once again, thank you for all of your help!


1 Like