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, size 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 blx-prop attribute.
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.6/packages/inline-svg/index.min.js"></script>

CSS (Optional)

No CSS is required for basic functionality. The inlined SVG will inherit styles from your existing CSS.

The SVG will inherit the color property when using blx-prop="fill" or blx-prop="stroke".

2. Add Required attributes

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

Optional: Color mode override

  • blx-prop="fill" - Forces the SVG to use fill="currentColor", making it inherit the text color from CSS.
  • blx-prop="stroke" - Forces the SVG to use stroke="currentColor", useful for outline-style icons.

If no blx-prop is specified, the SVG preserves its original fill/stroke behaviour after cleaning hard-coded colors.

Optional Enhancements

Color modes

  • blx-prop="fill" - Forces the SVG to use fill="currentColor", making it inherit the text color.
  • blx-prop="stroke" - Forces the SVG to use stroke="currentColor", useful for outline-style icons.

Caching

The script automatically caches fetched SVGs, so multiple instances of the same icon only require one network request.

Styling with CSS

Once inlined, you can target SVG elements directly:

.my-icon path {
  transition: fill 0.2s ease;
}
.my-icon:hover path {
  fill: var(--accent-color);
}

Accessibility

BLX Inline SVG preserves accessibility information from the original image:

  • Alt text preservation - The alt attribute from the image is transferred to data-alt on the SVG element.
  • ID and class preservation - Original IDs and classes are maintained on the inlined SVG.

Recommendations

  • Always include meaningful alt text on your image elements for screen reader users.
  • For decorative icons, use alt="" to indicate the image is presentational.
  • Consider adding role="img" and aria-label to the parent container if the SVG conveys important information.

Tip: This works with the native Webflow image element.