Adding Inline SVG Image in HTML5 Documents

This section provides an tutorial example of adding inline SVG images in HTML5 documents using 'svg' tags.

SVG (Scalable Vector Graphics) is an XML-based vector image language that can be embedded in HTML documents to provide static or animated graphics.

To embed SVG images into an HTML document, you should follow these guidelines:

1. Images defined SVG 1.1 should be coded using the <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> element with two optional attributes specifying the SVG image border: "width" and "height".

2. The <svg> element can also have the "viewbox" attribute to scale the image size to match the border size.

3. Image components should be specified using XML tags defined in the SVG 1.1 specification. Some commonly used SVG components are: "rect", "circle", "ellipse", "line", "path", "polyline", "polygon", "text", etc.

4. When the HTML document is displayed, SVG images specified in <svg> tags will be inserted as inline content in the same way as <img> elements.

Here is a good example of using <svg> elements in HTML documents:

<!DOCTYPE html>
<!-- SVG_Italy_Flag.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head><title>SVG Example - Italy Flag</title></head>
<body>
<p>An inline SVG image is embedded to present the Italy flag 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 width="60" height="40" viewBox="0 0 152 102">
<rect width="152" height="102" fill="#000000"/>
<rect width="50" height="100" x="1" y="1" fill="#009246"/>
<rect width="50" height="100" x="51" y="1" fill="#ffffff"/>
<rect width="50" height="100" x="101" y="1" fill="#ce2b37"/>
</svg>
in a paragraph of text...
</p>
</body>
</html>

When the above HTML document is displayed in a browser, you will see an Italy flag displayed inline in a paragraph of text:
HTML with SVG Example

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

Introduction of HTML5 Features

 What Is HTML5?

 Differences between HTML5 and HTML 4

 HTML5 DOCTYPE Declaration

Adding Inline SVG Image in HTML5 Documents

 Adding MathML Formula in HTML5 Documents

 "article" and "section" Elements

 "header" and "footer" Elements

 "nav" and "aside" Elements

 "details" and "summary" Elements

 "figure" and "figcaption" Elements

 "audio" and "video" Elements

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version