SVG Tutorial
SVG stands for Scalable Vector Graphics.
SVG defines vector-based graphics in XML format.
SVG graphics are scalable, and do not lose any quality if they are zoomed or resized.
SVG is supported by all major browsers.
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" xmlns="http://www.w3.org/2000/svg">
<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 a 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 graphics in XML format
- Each element and attribute in SVG files can be animated
- SVG is a W3C recommendation
- SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript
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
How does it Work?
SVG has elements and attributes for rectangles, circles, ellipses, lines, polygons, curves, and more.
SVG also supports filter and blur effects, gradients, rotations, animations, interactivity with JavaScript, and more.
A simple SVG document consists of the <svg> root element and several basic shape elements that will build a graphic together.
Creating SVG Images
SVG images can be created with any text editor, or with a drawing program, like Inkscape.
For you to learn the concept and basics of SVG, this tutorial will just use plain text to teach you SVG.
The next page shows how to embed an SVG image directly into an HTML page!
