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

CodePudding user response：

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.