v147 · HTML · SVG · XSLT

Compatibility Lab

Detects XSLTProcessor (still available for JS-driven transforms), DOMParser with image/svg+xml support, and inline SVG rendering. Runs a live DOMParser.parseFromString() SVG round-trip to confirm the recommended migration path works in this browser.

API probes

SVG delivery method compatibility matrix

Method	Chrome ≤146	Chrome 147+	Notes
Inline XSLT → SVG (xml-stylesheet PI)	✓ Rendered	✗ REMOVED	Was: XML + XSL PI → rendered SVG
XSLTProcessor (JS API)	✓	✓	Programmatic XSLT still available
DOMParser (image/svg+xml)	✓	✓	Recommended: parse SVG strings in JS
Inline SVG in HTML	✓	✓	Always works, always will
<img src="*.svg"> (image/svg+xml)	✓	✓	Static SVG file delivery
Standalone .xsl for non-SVG output	✓	✓	Unaffected when the transform does not produce SVG/MathML
Server-side XSLT → SVG	✓	✓	Transform before sending; send result as SVG

Removed SVG-producing path

The removed path is an XML or SVG document that points at XSLT with <?xml-stylesheet type="text/xsl" href="chart.xsl"?> and expects the browser parse step to emit SVG. In Chrome 147+, that SVG-producing path no longer renders; use DOMParser.parseFromString(markup, "image/svg+xml"), explicit XSLTProcessor JavaScript transforms, inline SVG, or server-side SVG generation instead.

Standalone .xsl files referenced by <?xml-stylesheet?> can still be parsed for non-SVG or non-MathML output. This lab separates that unaffected boundary from the removed SVG/MathML-producing scenario.

Live DOMParser SVG round-trip

DOMParser.parseFromString() — SVG migration target

Click "Parse and render SVG" to test DOMParser with SVG markup…

Migration pattern

/* Inline XSLT → SVG removed in Chrome 147. Migrate using one of these approaches: */ /* APPROACH 1: DOMParser (client-side, recommended) */ function parseSVGString(svgMarkup) { const parser = new DOMParser(); const doc = parser.parseFromString(svgMarkup, 'image/svg+xml'); const errNode = doc.querySelector('parsererror'); if (errNode) throw new Error('SVG parse error: ' + errNode.textContent); return doc.documentElement; // SVGSVGElement } // Insert into DOM: const svgEl = parseSVGString(` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="var(--accent-blue)"/> </svg> `); document.getElementById('container').appendChild(svgEl); /* APPROACH 2: XSLTProcessor (if you still need XSLT) */ async function xsltTransform(xmlText, xslText) { const parser = new DOMParser(); const xml = parser.parseFromString(xmlText, 'application/xml'); const xsl = parser.parseFromString(xslText, 'application/xml'); const proc = new XSLTProcessor(); proc.importStylesheet(xsl); return proc.transformToFragment(xml, document); // returns DocumentFragment } /* APPROACH 3: inline SVG in HTML — simplest */ // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> // <circle cx="50" cy="50" r="40" fill="var(--accent-blue)"/> // </svg> /* Detect removed path (browser renders XML with xsl PI as SVG): */ const INLINE_XSLT_SVG_REMOVED = (function () { // No JS way to detect this — assume removed in Chrome 147+. // Always use DOMParser or inline SVG instead. return true; }());

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗