Why doesn't import the code together with the SVG?

Design help General
1

Hey folks,

i am really new to webflow and really struggeling at the moment with a task that seemed so simply at the beginning. I have a jpg of a hotel lobby with three doors on it. So the three doors need to have links on them. So i went intro Illustrator, imported the JPG, put Hotspots with links on it and exported as SVG. When i drag that SVG directly into CHROME or Safari for example, the hotspots work and are clickable. But when i import the SVG intro webflow, it seems that the code and the hotspots are missing. Can somebody help me with this problem? Thank you very much!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @Gordon

Webflow import SVGs just as images to display purposes.

If you want your SVG to be interactive you should paste the SVG source HTML code directly inside an Embed element

In Illustrator, go to:

  • File>Export>Export as
  • Then select the ‘SVG’ option from the dropdown and press ‘save’.
  • You’ll see a dialog box with SVG options, make sure minify and responsive are selected.
  • Then press show code.
3

Hey Paul,

thank you so much for your help. i think i have come a step closer to what i am achieving, but now struggling with another problem: what about having more than one SVG with a link on a site? Seems that i can’t get both links to work. What am i doing wrong here?

https://jkonf.webflow.io/lobby

4

Maybe it’s because you got an <a> nested inside another

I’m not sure though

image

5

Yeah Paul, thank you so much!!! This helped 100% and made my day!

1 Like
6

@Gordon glad to help! Enjoy Webflow :slight_smile: