Display Inline SVG Using the <img> Tag

October 19th, 2011

SVG can be embedded into HTML documents with the <img> tag. Even better, standards-compliant browsers will also accept inline base-64 encoded SVG as a data URI. For example this figure:

was created with this tag:

In other words, it’s possible to generate and display vector graphics client-side without manipulating a DOM representation. This could be useful, for example, when generating complex vector graphics within a Web Worker, which lacks DOM access.