Learn how to add SVG to a document either as a referenced element or inline.
- [Instructor] The best way to learn SVGs is to pick them apart piece by piece and figure out how they work. So that's exactly what we're going to do. In the exercise files for this movie you'll find the thing worth seeing, SVG from the previous chapter, as well as a standard index.html document and a style sheet. This html document and style sheet are both as bare bones as possible, all we have at the start is a figure element to place the SVG inside and some CSS to center that figure element horizontally and vertically.
There are two ways of adding an SVG to a document, as a regular image or as an in line element. Let's look at regular images first. Adding an SVG as a regular image is as simple as referencing it just like you would any other image. So inside the figure element I'll say image, source equals somethingworthseeing.svg. And I'm leaving the alt attribute empty here because the figcaption provides text based context for the image.
If we want to have access to the dom elements of the SVG from our document, we need to add the SVG as an in line element instead. This is where things get interesting. First I'll take away the image element because we don't need it. Next I'll go to somethingworthseeing.svg here you can see the SVG element starts up here, SVG ends down here, end SVG. I'll just copy all of that.
Go back to index.html and paste it in exactly where I want the SVG to appear. So now my index file is much bigger than it was before because in addition to having all the regular content we also have this SVG element which then sets up some in line styles and displays all the graphs. Save that, go back in the browser and reload it and now it looks the same in the browser but I can inspect each of these elements and apply any styling I want to them.
So again I can now change the size of the stroke and change the fill and change the color and everything else I want. So as you can see adding an in line SVG is really as simple as just copying the SVG code and adding it to your html document. But it causes a bit of clutter in the document, especially because we now have this in line style sheet in the middle of the document. So I'm just going to grab these styles here, cut them out, go into style.css and paste them in, I'll get rid of this style tag cause we don't need it.
Save that. Save index.html go back and reload in the browser and here you see everything works the same way. And that's because the SVG is now just part of the regular html document and our style sheet is supplied to the regular html document. So that means our single style sheet style.css is now applied not only to all the content of the document but also to the SVG which means we can use this SVG, style it any way we want and work with it using one unified style sheet.
This is the true starting point for understanding how SVGs work.
- What is SVG?
- Adding SVG to the web
- Drawing shapes
- Grouping shapes
- Styling SVG with CSS
- Adding text
- Designing with strokes, fills, gradients, and patterns