Embed SVG in HTML - Here's how

SVG graphics offer several advantages over conventional image formats. This practical tip shows you how to integrate SVG graphics into HTML files.

Integrate SVG images directly into HTML

There are various ways to integrate SVG's into HTML. Most, however, have some drawbacks.

• It is particularly easy to integrate the SVG using "". To do this, simply open your SVG in a code editor (e.g. Notepad ++) and copy the code into your HTML code.
• The source code of your HTML file can get very long because the SVG takes up a lot of space.

Include SVG as an image component in HTML

A simple way to embed an SVG file in HTML is to use an "img" tag.

• With the "img" tag you embed the SVG like any other image. Although this is easy, it also prevents the use of JavaScript and links within the SVG.

Insert SVG with fallback in HTML

This option is suitable if you use an SVG file but also want to keep a conventional image available for older browsers.

• You can use an "image" tag within the "SVG" tag, in which you have both the actual SVG and another image with an "xlink: href" and an "src" attribute. Browsers that do not support SVG ignore the "xlink: href" attribute. All others output the SVG image.

Another practical tip tells you how to open an SVG file on your computer.