How to Defeat Webflow 10k Code Char Limit w/ DOMParser

In this video I'll show you how to get around the Webflow custom code limit for SVGs by using a CMS rich text field along with the DOMParser API. Before I used to do this by hosting SVGs as HTML documents in Github but with this we can avoid an extra fetch request and keep everything in one place - more organized!

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

Inside </body> tag

<script>
const COLOR_ONE_TO_REPLACE = "rgb(48, 172, 209)";
const COLOR_TWO_TO_REPLACE = "rgb(39, 138, 168)";

// Select the elements on page that we need by their attributes
const svgAsRichText = document.querySelector('[wb-element="svg-as-rich-text"]');
const svgContainer = document.querySelector('[wb-element="svg-container"]');
const color = document.querySelector('[wb-element="color-data"]');

// parse the svg as rich text to MIME type 'image/svg+xml'
const parser = new DOMParser();
const svgDocument = parser.parseFromString(
  svgAsRichText.textContent,
  "image/svg+xml"
);
// Select the SVG element from the newly created doc
const svgImage = svgDocument.querySelector("svg");

// Append the image to our container.
svgContainer.append(svgImage);

// Select all the paths within the SVG
const paths = svgImage.querySelectorAll("path");
paths.forEach((path) => {
  // if path color matches the one we want to replace, replace it.
  if (getComputedStyle(path).fill === COLOR_ONE_TO_REPLACE) {
    path.style.fill = color.style.backgroundColor;
  }
  if (getComputedStyle(path).fill === COLOR_TWO_TO_REPLACE) {
    path.style.fill = color.style.backgroundColor;
  }
});
</script>