Load svg from file using JavaScript

Question

I have searched the web but the answers showing embedding the SVG into the HTML using <object>, <img>, etc. What I want to do is open a large SVG file that contains lots of images, find the image I need, and show only that image on the page. How can I do that?

File structure is:

directory
- index.html
- script.js
- images.svg

`find the image I need` how do you do this? by the way I suggest using a backend templating language. — Weilory, Dec 18 '21 at 06:05

score 1 · Accepted Answer · answered Dec 18 '21 at 06:16

1

A few steps:

Use the Fetch API to get the image data.
Use a DOM parser to parse the XML into a document.
Find the SVG subset you want. (You didn't show us your XML, but this is likely as simple as document.querySelector().)
Create an SVG element. (This is actually a bit tricky due to the namespace. See also: JavaScript createElementNS and SVG)
Append it to the relevant element on your page.

answered Dec 18 '21 at 06:16

Brad

159,648
54
349
530

[Or do it with a Web Component](https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd) – Danny '365CSI' Engelman Dec 18 '21 at 14:01

score -2 · Answer 2 · answered Dec 18 '21 at 20:57

-2

hello damn i think you can add svg in your html code and run code but you cant font-size svg in css you can use width and height in svg to big font-size ok under

answered Dec 18 '21 at 20:57

reza_box2002

17
4

Load svg from file using JavaScript

2 Answers2