HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
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:
<!DOCTYPE html> <!-- SVG_Example.html - Copyright (c) 2009 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:
For more SVG examples, visit "SVG Basics" Website at http://srufaculty.sru.edu/david.dailey/svg/intro/svg_intro.htm.
Table of Contents
Differences between HTML and XHTML
Relation between HTML and JavaScript
Relation between HTML and DHTML
►Relation between HTML and SVG
Relation between HTML and MathML
Introduction of HTML5 Features
HTML Document Structure and Content
HTML Document and Elements Syntax
Displayed and Printed HTML Documents
Responsive Design of Web Pages