How to get SVG document data to be inserted into the DOM? - html

Question

I'm trying to load an SVG file from a CDN using this code:
<object type="image/svg+xml" data="https://cdn.mywebsite.com/path/file.svg"></object>
The SVG file is in an S3 bucket served by CloudFront CDN. It's content-type is set to "image/svg+xml". To the best of my knowledge, my S3 bucket and CDN are configured to allow CORS requests from any origin.
If I look at the browser Network tab, the HTTP GET request succeeds and it receives the SVG data in response. However, the document data is not inserted into the DOM, so it doesn't display and cannot be accessed by JavaScript.
How can I embed the SVG document into my webpage so that it becomes an accessible part of the DOM?

Answer 1

As Robert Longson kindly commented, embedding directly is impossible. But I did find a way.
I used this JavaScript (uses axios library):
var parser = new DOMParser();
let response = await axios.get('https://cdn.mywebsite.com/path/file.svg');
let svgDocument = parser.parseFromString(response.data, "image/svg+xml")
If CORS is configured correctly it allows the request, then you can parse the response body into a document. From there you can process the document or embed it.

Answer 2

Provided you are allowed to read the SVG, this native Web Component <load-svg>
reads the SVG as text
adds SVG to shadowDOM as DOM element
moves the style element from lightDOM to shadowDOM
So style is only applied to current SVG
<load-svg src="//graphviz.org/Gallery/directed/fsm.svg">
<style>
svg { height:180px }
text { stroke: green }
path { stroke: red ; stroke-width:3 }
</style>
</load-svg>
<script>
customElements.define('load-svg', class extends HTMLElement {
async connectedCallback() {
let src = this.getAttribute("src");
let svg = await (await fetch(src)).text();
this.attachShadow({ mode: 'open' }).innerHTML = svg;
this.shadowRoot.append(this.querySelector("style"));
}
});
</script>
More complex example: How to make an svg interactive to gather comments/annotations on depicted elements