SVG Tutorial
SVG stands for Scalable Vector Graphics.
SVG defines vector-based graphics in XML format.
Examples in Each Chapter
With our "Try it Yourself" editor, you can edit the SVG, and click on a button to view the result.
SVG Example
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Try it Yourself »
What you should already know
Before you continue, you should have some basic understanding of the following:
- HTML
- Basic XML
If you want to study these subjects first, find the tutorials on our Home page.
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
- Every element and every attribute in SVG files can be animated
- SVG is a W3C recommendation
- SVG integrates with other W3C standards such as the DOM and XSL
SVG is a W3C Recommendation
SVG 1.0 became a W3C Recommendation on 4 September 2001.
SVG 1.1 became a W3C Recommendation on 14 January 2003.
SVG 1.1 (Second Edition) became a W3C Recommendation on 16 August 2011.
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
- SVG graphics do NOT lose any quality if they are zoomed or resized
- SVG is an open standard
- SVG files are pure XML
Creating SVG Images
SVG images can be created with any text editor, but it is often more convenient to create SVG images with a drawing program, like Inkscape.
