Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript
We want to show an SVG avatar of the patio11bot, so we'll do that in three ways:
-
Using an
imgtag - which is easy, but doesn't let us access the internal SVG elements. -
Copy/pasting the SVG directly into the HTML document. That works great, but is really messy in the code
-
Using an
objecttag 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.
Instructor: [00:00] To make our patio11bot, we need a patio11 avatar. I made this friendly-looking patio11 avatar here. It's an SVG file, so it can scale however we'd like. We'd also like to access the elements inside the SVG, which is going to be important for later. The first and easiest way to get it to show up is to use an img tag, just like any other image.
[00:21] We can set the src and alt for that img tag. That totally works. The browser just interprets the SVG as an image and displays it on the page. We could also add some styles to limit the size of the SVG on both mobile and desktop. That works just as we would expect, to limit its size.
[00:44] However, there's one big problem with this approach for our use case. If we look at the element inspector in Chrome, then what we see is just the single img tag and not the actual internal SVG elements.
[00:55] That's fine for a typical image use case, but I want this patio11bot to actually talk. In the SVG file itself, I've labeled a mouth component and a hidden element called openMouth. If I toggle the visibility between those two, it should look like he's just talking.
[01:11] The first thing that we can do is just copy this entire SVG file. Back in index.html, we can paste that right into the HTML document. That works just fine. We can inspect that now and see all the different SVG elements.
[01:30] The only downside to this approach really is how messy it makes the HTML files. In order to keep the SVG in its own file, let's remove it again from the HTML file. Then we're going to embed it into the HTML file with the object tag. We can set the type to image/svg+xml and the data attribute to patio11.svg.
[01:51] Then we can also set an ID, which will be useful later. A great part about the object tag is we can put a fallback message if our browser doesn't support it. Let's test that out now. It shows up. Importantly, when we inspect it, we can see all of the SVG elements.
[02:11] There's one more trick to select those with JavaScript though. Let's make a new script tag at the bottom of the body and try to get at those SVG elements. We first have to grab a reference to the object tag itself. We can do that using the ID that we set.
[02:30] This is the important part. We have to grab the document of that object by calling contentDocument. That is what we can use to get the references that we need to the mouth and openMouth. We do that by calling getElementById, just like we would on a document itself.
[02:47] Finally, we'll call a helper method with those references, called talkRecurse. That method just opens and closes the mouth at random timing and then recurses for a set number of times. To test that out, we can add a quick button to trigger it. We can reload. Now we can make patio11bot talk.