Relation between HTML and SVG

This section describes how HTML is related to SVG, which an XML-based vector image language that can be embedded in HTML document to provide static or animated graphics.

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

Here is a good example of an HTML document with embedded SVG graphics from http://srufaculty.sru.edu/david.dailey/svg/intro/svg_intro.htm.

<!DOCTYPE html>
<!-- SVG_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<p>A nice looking graphics created by a SVG code:
</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 160,280 160,20 300,20 300,280 z" 
    fill="#f88" stroke="black" stroke-width="5"/>
  <path d="M 440,280 440,20 300,20 300,280 z" 
    fill="#8f8" stroke="black" stroke-width="5"/>
  <path d="M 100,350 300,100  500,350 z 
    M 250,320 250,220 350,220 350,320 z" fill="#ff8" 
    stroke="black" stroke-width="15" 
    fill-rule="evenodd"/> 
</svg>
</body>
</html>

When the above HTML document is displayed in a browser, you will see a nice looking graphics created by the SVG code. See the picture below:
HTML with SVG Example

Last update: 2014.

Table of Contents

 About This Book

Introduction of HTML

 What Is HTML?

 History of HTML

 Differences between HTML and XHTML

 Relation between HTML and CSS

 Relation between HTML and JavaScript

 Relation between HTML and DOM

 Relation between HTML and DHTML

Relation between HTML and SVG

 Introduction of HTML5 Features

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version