Problem with SVG




Firts of all, sorry for my bad english. Hope i am being clear.

I have a problem importing SVG files.
I want to make a interactive map. I read and watched several articles and videos on the web and they said that the best way to do it, is make the map in illustrator and export it as SVG file, (i did it first with png´s but the images overlapping each other and i could not make exactly interactive regions. The regions did not change the color exactly in the border)
I did it with svg, but when i import the svg file in Hype i cant see the layers. The program show me the map as a unique image and i can not edit the paths to make them interactive. According with the articles in the web, it suppose that the svg file respect the layers.

I know that my svg file is fine, i checked it in this page:

What i am doing wrong?

Attaching the svg, illustrator and hype file.

Colombia Interactive (1.7 MB)

Please help me.

Thank you.

(drewbullen) #2

There are several ways to do this.

One way is to add the SVG code directly to a blank Hype element - that way you can access all the identifiers and classes directly and thereby make them interactive.

Here is an example of your map that changes to red following a click so it looks like this:

Here is the code that does this: Colombia Interactive (62.7 KB)

Removing the invisible square around SVG graphics

Thank you! this is very helpful.

I´m not very good with code. That is why i choose Hype to make my animations but i already understand how you did it. Do you know if there is a way to show all the paths in the inspector so i can work with them with out write code?

Thank you again.

(drewbullen) #4

No, unfortunately there is nothing in Hype equivalent to the layers panel in AI.


I just want to say thank you again for your example. I saw carefully the file you sent and i found how to do it. I just give attributes on the events onmouseover, onmouseout and onclick for each path and i could do what i wanted.


How can i display the names of the diferent regions when the pointer is over the map? is there something like alt text? Thank you.

(Freelancer) #7

@drewbullen nice way!

onclick="'style', 'fill: red');"  

the most simple way is split the AI in multiple SVG and then apply the animation to every shape.

Try this template and put your ( single region) SVG in the inter HTML ( only the code and not the SVG file) .
One symbol for each shape (18.3 KB)


Hello, thank you for your help.
I tried the file you sent me, but with that method i have the same problem that i had in the beginning. The “invisibles” squares overlapping and the text do not show up exactly when the pointer go to the other region.

I am attaching your file with some of my svg. (16.9 KB)

Thank you.

(PixelArt) #9

Mira esto y dime si es lo que necesitas, descomprimelo y miralo desde tu (149.6 KB)


Eso me sirve. Muchas gracias. Me gustaría saber cómo lo hizo. ES posible que me envíe el archivo HYPE así sea en un archivo .txt?

(Freelancer) #11

You must avoid overlapping of sensible areas ( on hover).
This is a simple trick, remove all actions in the SVG and add an invisible object over the shape ( in my example with red border) and reassign both actions to this new object.
place the rectangle over the shape like my example ( remote the red border).
BTW: in some cases you can use also ellipses, maybe is better. (126.5 KB)


OK. I know that has passed a while, but i want to share how i finally did this. Was a mix of all your help and the other subjects in this forums.

So, i have an svg with different paths with unique id each ones.
On the other hand, i have the animation with the names of the regions in timelines inside of symbols (1 symbol per region). Just like @michelangelo told me to did it. (thanks for that). The symbols have an unique id too.

Affter read this post How to create rollover buttons for this situation, and thanks for the @DBear example i figure out how to set attributes to each one of my paths. Just put the code when the scene load and that is it.

function clickAreas(hypeDocument, element, event){	
var Cundinamarca = document.getElementById("Cundinamarca");

var Tolima = document.getElementById("Tolima");


Cundinamarca.onmouseover = function () {
var symbolInstance = hypeDocument.getSymbolInstanceById('cundi');
	symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionForward);
	Cundinamarca.setAttribute("style", "fill: #35348a");
Cundinamarca.onmouseout = function () {
	var symbolInstance = hypeDocument.getSymbolInstanceById('cundi');
	symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionReverse);
	Cundinamarca.setAttribute("style", "fill: #6867a7");
	Cundinamarca.onclick = function () {"","_self");

Tolima.onmouseover = function () {
var symbolInstance = hypeDocument.getSymbolInstanceById('toli');
	symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionForward);
	Tolima.setAttribute("style", "fill: #35348a");
Tolima.onmouseout = function () {
	var symbolInstance = hypeDocument.getSymbolInstanceById('toli');
	symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionReverse);
	Tolima.setAttribute("style", "fill: #6867a7");
	Tolima.onclick = function () {"","_self");

I have to make one var to each region and that is- Thank you all for your help.