How to Understand the Basics of SVG
SVG stands for Scalable Vector Graphics. Most modern web browsers support SVG. SVG is used, as the name suggests, to create graphics for display on the web. SVG is a web standard recognized and supported by the World Wide Web Consortium (W3C). The following steps will cover the basics.
Other People Are Reading
Instructions
-
-
1
SVG uses the markup language XML to define vector-based graphics on the web. The graphics are pure XML, they are not images in the sense that you may be used to with JPEG or GIF images. In other words, you can create SVG images with nothing more complicated than Notepad and some XML.
-
2
Because of the scalable part of SVG, the graphics can be reduced or zoomed and never lose any of their quality.
-
-
3
Since SVG images are defined with XML, any element in the graphic can be identified in the XML and animated. At first glance, you might not be able to tell an SVG animation from a Flash animation. The difference is that SVG is an open source technology that uses accepted standards such as the Document Object Model (DOM) to manipulate the image.
-
4
Here's an example. I'll make a graphic of a circle. The image shows a small SVG file, saved as circle.svg. The DOCTYPE is an SVG DTD. The circle has a radius of 40px, a 3px red stroke and a blue fill. This is XML, so all tags must be closed.
-
5
In an SVG compliant browser, here's how that looks.
-
6
The cx is the x-axis of the circle, the cy is the y-axis of the circle. With a circle, you can actually omit these two and simply use the r, which is radius. (With an ellipse, you would need the x and y axis.) Fill, stroke and stroke-width are self-explanatory.
-
7
The shapes include rect (rectangle), circle, ellipse, line, polyline, and polygon.
-
8
The graphic defined in the SVG file is inserted into an HTML file with either an embed tag (deprecated) and object tag or in an iframe. Simply point back to the .svg file for the source of the object.
-
9
A path tag is used to animate an object. The path in the image moves the object from a starting point to several positions and then closes the path. Here are the possible path commands: M=moveto, L=lineto, H= horizontal lineto, V=vertical, C=curveto, S=smooth curveto, Q=quadratic Belzier curve, T=smooth quadratic Belzier curveto, A=elliptical Arc and Z=closepath.
-
1
Tips & Warnings
This article just touches on some of the basic concepts involved in SVG. See Resources below for additional links to information.
Internet Explorer will not display SVG graphics without a plugin such as the Adobe SVG Viewer.
