Streaming live at 10am (PST)

External SVG Injection to Webflow

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.

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.