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

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

• javascript
• svg

Share Improve this question Follow asked Dec 18, 2021 at 6:01 Damn VegetablesDamn Vegetables 12.5k1616 gold badges9595 silver badges174174 bronze badges 3

• find the image I need how do you do this? by the way I suggest using a backend templating language. – Weilory Commented Dec 18, 2021 at 6:05
• I would guess its a sprite. – Rafael Herscovici Commented Dec 18, 2021 at 6:10
• @Weilory It has lots of child <g> elements under the <svg> element, and each g` element has a label attribute with the name of the image, so I can find the image I want by that name. – Damn Vegetables Commented Dec 18, 2021 at 6:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

A few steps:

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

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