The second benefit of XML is that it’s designed to be interoperable with HTML, which means you can put the above code directly in an HTML file, without any changes, and it should display the image.

First, it means that it is human-readable. If you were to open up a JPEG in a text editor, it would just look like gobbledygook. If you were to open up an SVG, however, it would look something like this:

So, clearly SVGs are awesome! Time to go convert all of our images to SVG, right?

Typically, you will not want to create SVGs from scratch in your code.

However, it’s pretty common to download an SVG and want to tweak or adjust it just a little bit, so knowing what all the bits and pieces are, and how they work is very useful.

So it’s doing quite a lot! Be sure to play around with different values in the example above to get a feel for how it affects the shapes.