Inline SVG

Replaces external SVG images with inline markup so they can be styled with CSS.

The script replaces external SVG images with inline SVG markup so they can inherit currentColor, be styled with CSS, and animated.

How it works

Gathers all external SVG images on the page that have [blx-el=inline-svg] and replaces them with inline SVG markup.
Each SVG is fetched, cleaned, and injected directly into the DOM so it can inherit currentColor and respond to CSS.
The script supports multiple instances and only processes images with a matching selector.
Images using stroke or fill will adapt based on your CSS rules.
Non-SVG images (e.g., PNG, JPG) are skipped automatically.

1. Add Script

Add this <script> inside the before </body> tag of your page or project.
‍

<!-- BLOCKS Inline SVG by https://codeandwander.com -->
<script defer src="https://cdn.jsdelivr.net/gh/codeandwander/blx@v1.0.3/packages/inline-svg/index.js"></script>

2. Add Required attributes

blx-el="inline-svg" - add to the image

Tip: This works with the native Webflow image element.