Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

InstructorChris Achard

Share this video with your friends

Send Tweet

We want to show an SVG avatar of the patio11bot, so we'll do that in three ways:

  1. Using an img tag - which is easy, but doesn't let us access the internal SVG elements.

  2. Copy/pasting the SVG directly into the HTML document. That works great, but is really messy in the code

  3. Using an object tag to embed the SVG directly into the web page. We'll choose this solution because it's tidy, and also because it allows us to access the internal SVG elements.