HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 Inline SVG

« Previous

Next Chapter »

HTML5 has support for inline SVG.

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)

Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG.

Embed SVG Directly Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Try it yourself »

Result:

To learn more about SVG, please read our SVG Tutorial.