\r\n\r\n\r\n\r\n## Usage\r\n\r\nImport the component in a client-side script file:\r\n\r\n```js\r\nimport \"@components-1812/svg-isolate\";\r\n```\r\n\r\n> This loads the bundle, auto-defines the custom element as `
\r\n\r\n\r\n## Custom definition\r\n\r\nIf you need to register the element under a different tag name or inject custom styles into its shadow DOM, use `SVGIsolate.define()` directly instead of the auto-import.\r\n\r\n#### Via `adoptedStyleSheets`\r\n\r\nBest for programmatically constructed styles or when working with a build system that produces `CSSStyleSheet` objects.\r\n\r\n```js\r\nimport SVGIsolate from \"@components-1812/svg-isolate/SVGIsolate.js\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(`:host { display: inline-block; }`);\r\n\r\nSVGIsolate.define(\"custom-svg-isolate\", { adopted: [sheet] });\r\n```\r\n\r\n#### Via raw CSS string\r\n\r\nBest for inlining styles directly without an external file.\r\n\r\n```js\r\nimport SVGIsolate from \"@components-1812/svg-isolate/SVGIsolate.js\";\r\n\r\nSVGIsolate.define(\"custom-svg-isolate\", {\r\n\traw: [`:host { display: inline-block; }`],\r\n});\r\n```\r\n\r\n#### Via external stylesheet\r\n\r\nBest for loading styles from a CSS file at runtime. URLs are resolved against `document.baseURI`, so relative paths are accepted.\r\n\r\n```js\r\nimport SVGIsolate from \"@components-1812/svg-isolate/SVGIsolate.js\";\r\n\r\nSVGIsolate.define(null, { links: [\"/path/to/styles.css\"] });\r\n```\r\n\r\nAll three options can be combined in a single `define()` call:\r\n\r\n```js\r\nSVGIsolate.define(\"custom-svg-isolate\", {\r\n\tadopted: [sheet],\r\n\traw: [\":host { display: block; }\"],\r\n\tlinks: [\"/path/to/styles.css\"],\r\n});\r\n```\r\n\r\nDuplicate entries are ignored automatically โ adding the same URL or `CSSStyleSheet` object twice has no effect.\r\n\r\n\r\n\r\n## Instance styles\r\n\r\nEvery `
\r\n\r\n\r\n## Default styles (bundle)\r\n\r\nWhen loaded via the auto-import bundle,
\r\n\r\n\r\n\r\n## `width` and `height`\r\n\r\nSets `style.width` and `style.height` on the `
\r\n\r\n\r\n## Base URL\r\n\r\nYou can provide a `base` attribute to resolve the `src` URL against a specific base path rather than the document's base URI.\r\n\r\nThe `base` is always a fixed URL to which the `src` is concatenated. If `base` is relative, it is resolved against `document.baseURI`. Then, if `src` is also relative, its resolved path is appended to the `base`.\r\n\r\nThe resulting URL follows this structure:\r\n\r\n```txt\r\n
\r\n\r\n\r\n## Cache\r\n\r\nBy default, `
\r\n\r\n\r\n\r\n## Loading Strategies\r\n\r\n`
\r\n\r\n\r\n\r\n## srcset & Responsive\r\n\r\n`
\r\n\r\n\r\n\r\n## Sanitize\r\n\r\n> [!WARNING]\r\n> **XSS Risk on Untrusted SVGs:**\r\n> If you are loading SVGs from untrusted user uploads or external user-generated sources, **always enable the `sanitize` attribute** and configure a secure sanitizer like `DOMPurify`.\r\n>\r\n> While static `