Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

If you want to embed your hand-crafted SVG in your web page, you can use any of the methods discussed below.

Using <object> Tag

If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is your best option:

You can provide fallback text or images within the <object> block.

Using <embed> Tag

Although it’s similar to <object>, <embed> never has been and probably never will be part of any HTML or XHTML specification. However, it’s supported by most browsers and is often used to implement Flash plugins.

Using <iframe>

Since browsers can render SVG documents in their own right, it’s possible to load images within an <iframe>:

You can provide fallback text or images within the <iframe> block.

Embedding Inline SVG XML

An SVG image can be added as a code island directly within your HTML5 page using outer <svg> tags:

Using <img> Tag

SVGs can be added to your web page like any other image:

The usual width, height, alt and other attributes can be added should you require them.

Using a CSS Background Image

SVGs can be used as a CSS background for any element:

You can use of these options to include SVG to your project.


The Author

Other Articles