SVG and HTML
As described earlier, SVG is an image file format. Thus, it can be used as the
src for an
<img> element in HTML:
<img src="/images/triangle.svg" alt="A triangle">
However, the SVG itself is just text. And that text shares a lot of characteristics with HTML, as both are derived from XML. As SVG became more commonplace, the W3C added support for inline SVGs - placing SVG code directly in a HTML document:
<svg viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg"> <path d="M 100 50 L 100 150 L 300 150 Z" stroke="black" fill="#dd3333"/> </svg>
In fact, that is how we handle most of the SVGs we are presenting to you in this chapter. There are some additional benefits to this approach:
- The SVG is contained in the html document, so there is no need to download additional files as with an
- The SVG definition also contains a
<a>element, which is identical to its HTML counterpart. When you use the SVG inline, it works just like a regular link in the page.
- The inline SVG can also be modified by CSS and JS - we’ll take a look at each next.