Adding Inline SVG Image in HTML5 Documents

HTML Tutorials - Herong's Tutorial Examples

∟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>