External SVG Injection to Webflow

Design help Animations & Interactions
1

Hi everyone,
A quick question to see if anyone has found a solution to this before I waste a lot of time experimenting.
I wanted to create map which displays items on a page, users can click on a country and the CMS would filter items to show which items were associated with that item or area.
I have an SVG map, it has been separated into the countries on the map and when a user mouses over, it highlights the map element and using a bit of javascript, I was going to use it to hide/show items loaded from the CMS. I have the map, I have the item filtering worked out, my problem comes when I try to put the SVG into webflow.
If I try to embed the code from the SVG, it is too large. 10000 characters is the limit, but my map is 80000 characters.
If I load the into the assets panel and call it on the page, it just displays it as a flat image, all of my separation and classes/IDs are lost and not accessible from the DOM, so any interaction is lost.
Has anyone had any success with importing SVGs using Javascript or something similar? I see many injectors online, but many of these are quite old and also have issues with the everything coming from the same domain, so it might look ok under the webflow domain, but when I publish, I assume that anything hosted under uploads.webflow won’t work either.
Any help would be greatly appreciated.

2

So, the only way I could find as a workaround was a bit of a long way around, but it works.
I had 80000 characters.

  • So, I went into a code editor and between each few paths I would place the closing </svg> and then copy the header tag from the SVG which contains the size of the block. In my case it was <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 968.72 995.95">

  • I then placed all of the images within one div block and then overlaid each of the images on top of each other.

  • Next, I created a very low complex polygon overlay in Adobe illustrator. This took several revisions, but I was finally able to bring the overlay map I was trying to interact within the 10000 characters limit.

  • Each of the paths on the bottom layers had an ID as the name of each country.

  • Each of the paths on the overlay layers had the suffix “_btn” appended to the class of the ID of the element below.

  • I then used Jquery in another embed code block

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
  // MAP INTERACTIONS    
  $(document).ready(function(){
      
      // MOUSE OVER MAP ELEMENT
      
  	$('.ov').mouseover(function() {  
          var currentHover = (this.id);
          currentHover = currentHover.split('_')[0];
          document.getElementById("country-name").innerHTML = (currentHover);
          document.getElementById(currentHover).style.fill = "orange";
          console.log ('hovered over ' + currentHover);
  	});
  });
  </script>

  <div id="country-name-container">
  <p id="country-name">
      Country Name
      </p>
  </div>

So the key line in the code was

currentHover = currentHover.split('_')[0];

This just cuts off the last section of the path I am hovering over and changes it to the name of the element below.

It was a huge pain in the butt to get this done, but I had put a lot of time and effort into importing all of the data into the CMS, so I was not about to give up.
I love the no code way of thinking, but there will always be a place some tinkering and tweaking. I just wish that there was more character space to begin with to avoid these issues.

3

This is exactly what I’m needing to do. Can I maybe see your webpage to see the final result?

4

Also in exactly the same boat.
From my internet sleuthing, it seems like there are 100’s of other people with exactly the same - or very similar - problem when trying to load an interactive SVG into Webflow (usually a map). I really wish there was an easier solution to this. ahem

5

Webflow is a pretty useful tool to create websites quickly. It is not magic though, it is code and markup underneath just. If they created a tool to do everything, it would become massively complex, and as a result, either more unreliable or much more expensive (or both). Which would reduce their customer base and its accessibility to those it is trying to appeal to. The issue with SVGs it that when you load them as an image, they loose their ID and class attributes. So you need to drop them into a code block. The code blocks are too small to describe a big map (because you are trying to avoid coding anyway.) so you just have to stack break them up into layers and stack them on top of each other. Then create a top layer to interact with those layers below. Webflow strikes a nice balance for rapid visual development but they also allow you the keys to play around with some nice clean markup for the fringe areas. If you want to use a map, there are many map services which allow you to customise a map and drop it in to place, the forum where you can post a project and ask for help, or where you can hire a developer to do the work. Feel free to reach out with your project link if you are looking for some suggestions.

1 Like
6

Yes, I understand. It’s more bourne out of frustration that I cannot do something so simple (what I want to do works fine when just loading as an html/svg file in the browser), but that seemingly required a massive workaround to fit into webflow. It’s also down to my ignorance of coding - but I do love webflow for everything else :slight_smile:

For what it’s worth - I fixed my issue. It was incredibly simple, too:
I had uploaded the .svg map (with included scripts) to the assets in Webflow. When I placed them in the file, it was converted to an img tag, with an src URL to the file – On the webpage, none of the desired interactions (hover & click effects) worked. But navigating to the asset URL loaded a page where it did.

SIMPLE SOLUTION:
embed the .svg URL in and object tag, instead of img

e.g.
<object type="image/svg+xml" data="https://YOUR-FILE-NAME-HERE.svg"></object>

And this works like a charm :slight_smile:

(Props go to Poiple Shadow in this thread: css - SVG and Javascript not working 'online' in Chrome - Stack Overflow)

7

Great, you found stackoverlflow. When it comes to coding, there are always many ways to approach it. I needed to edit the svg anyway to assign classes and alter IDs so the map could filter (show/hide) CMS data that was on the page too, so just cutting it into layers, and exporting a low polygon version for the interaction was not that much work. It also allowed me to assign an animation to each layer of the map using the webflow tools, so when it loads, the countries in the map fly in from various directions to “build” the map. Happy you found a solution. Keep sharing.

8

Further to this, I have had the need to create another interactive map and experimented with your method further. The one downside to your approach is that it is sandboxed by the browser. Any code or interactions do not work outside of the SVG image. I guess this makes sense as a security feature. If I want to click on my SVG map and filter my CMS results based on where I click, then it is not possible to reference the IDs classes on either side. So for this purpose where you want to not just interact with the SVG, but use the SVG to interact with page items, you need to go through the process of breaking the SVG into code blocks as my original approach. Just to save anyone else who is stuck on this.