NssSvgReplacer

Automatically replaces <img> SVG tags with inline SVG elements for CSS styling, and supports SVG-based CSS mask images. NUI

Getting Started

NssSvgReplacer observes the DOM for <img> elements pointing to .svg files and replaces them with inline <svg> elements. This enables full CSS styling of SVG content. Just instantiate it once — it handles all current and future SVG images automatically.

import {NssSvgReplacer} from "nui://nss_libs/ui/NssSvgReplacer/NssSvgReplacer.js";

new NssSvgReplacer();

Constructor

new NssSvgReplacer()

Creates the SVG replacer and starts observing the DOM via MutationObserver.

new NssSvgReplacer(); // Active — all SVG <img> tags will be inlined

Inline SVG Replacement

Any <img> with an .svg source is automatically replaced with its inline SVG content.

<!-- Before (in your HTML) -->
<img src="./img/icon.svg" class="my-icon" id="main-icon" alt="Icon" />

<!-- After (NssSvgReplacer transforms this to) -->
<svg class="my-icon" id="main-icon" viewBox="0 0 24 24">...</svg>

Attribute Handling

• class, style, id, data-* attributes are copied from the <img> to the <svg>.
• width and height attributes are removed from the SVG element.
• preserveAspectRatio="none" can be added to allow the SVG to stretch freely.

SVG as CSS Mask Image

Use the data-nss-libs-svg-replacer-image-mask attribute to load an SVG and apply it as a CSS mask-image on any element.

<div class="decorated-bg"
     data-nss-libs-svg-replacer-image-mask="./img/dialog_bg.svg">
</div>

TIP

This sets mask-image and -webkit-mask-image on the element. preserveAspectRatio="none" is automatically added.

Programmatic Usage

const bg_el = document.createElement('div');
bg_el.setAttribute('data-nss-libs-svg-replacer-image-mask', './img/frame.svg');
document.body.appendChild(bg_el);
// NssSvgReplacer picks it up automatically via MutationObserver

Events / Callbacks

None. The component operates automatically via MutationObserver.

CSS

None. NssSvgReplacer has no styles of its own — it enables CSS styling of SVG content.

Dependencies

• NssUiComponent — base class (initializes NssResponsive).

Things to Know

WARNING

The SVG is fetched via synchronous XHR with image/svg+xml MIME override. This happens during DOM mutation, so it's synchronous by design.

WARNING

The original <img> element is fully replaced in the DOM — event listeners on the <img> will be lost.

• The MutationObserver watches document.body with childList: true, subtree: true — it catches any SVG image added anywhere in the DOM.
• Only <img> elements with src ending in .svg are processed. Other image formats are ignored.