Getting started:
Start with a small file that looks like this and save it as "myfile.svg" (or any filename ending with a .svg extension):
<svg xmlns="http://www.w3.org/2000/svg"> <circle r="50"/> </svg>
Then you can change the <circle> tag to anything else and draw nice pictures.
A. Simple objects
The object primitives defined by the specification of version 1.1 (1) are the line, rect(angle), circle, ellipse, polyline, polygon, text, and the path. Each is described with an XML tag such as the following example:
SVG code illustration <line x1="0" y1="100" x2="100" y2="0"
stroke-width="2" stroke=”black” />simple line
The above draws a black line (typically antialiased when drawn in the browser) of thickness 2 from the point (100,200) to the point (200, 100). If
one uses right-click in Internet Explorer, a zoom-in option appears. The visitor
will notice that unlike bitmapped graphics the line does not become grainy as
one zooms in.
SVG code illustration <rect x="0" y="0" width="200" height="150"
fill="#FFFF00" stroke="blue" stroke-width="5" />rectangle
This example draws a rectangle with its upper left corner at (200,200) its lower right corner at (500,400) with a blue boundary that is 5 units thick and which is filled with yellow.
SVG code illustration <text x="15" y="45" style="font-size:40" fill="red">
some text</text>text
The above draws the string “some text” in large red letters and positions the string at a particular position on the screen.
Other objects are similarly defined and can be appended, one after another into the display window, with the most recently defined element appearing in front or or on top of earlier-defined shapes.
SVG code illustration <rect x="0" y="0" width="200" height="100"
fill="#FFFF00" />
<ellipse cx="100" cy="50" rx="100" ry="50"
fill="red" />rect with ellipse
The above code specifies a red oval inscribed in a yellow rectangle.
One of the most flexible of SVG’s primitive objects (which differentiates SVG from the earlier
VML) is the path. A path uses a series of lines, and splines (either cubic or quadratic) to define arbitrarily long curves that combine smooth or jagged transitions. The following code
<path d="M 100 100 L 200 200" stroke="black" stroke-width="12"/>
defines a simple line equivalent to the line defined by
<line x1="200" y1="200" x2="100" y2="100" stroke-width="12" stroke="black" />.
It proceeds by placing the pen down at (100, 100) and then drawing a line to (200,200).
Similarly, the code
SVG code illustration <path d="M 100 200 L 200 300, 300 20,0 400 300, 500 200"
stroke="black" fill="none" stroke-width="5">path
draws a zig-zag in the plane resembling a “W”, moving from (100,200) to (200,300) and eventually to (500,200).
Likewise,
SVG code illustration <path d="M 0 0 L 100 100" stroke="black"
stroke-width="12"/>
<line x1="0" y1="100" x2="100" y2="0"
stroke-width="2" stroke="black" />path with line
defines two crossing lines: one thicker than the other.
A more complex path is given by
SVG code illustration <path d="M 20 40 C 120 -40 220 120 20 190 L 160 190"
stroke="black" fill="none" stroke-width="5" />more complex path
which resembles the numeral 2. The “C” portion of the path describes a cubic spline – the path begins at
(20,40) and heads toward (based on the tangent at the start point) (120, -40). The curve then heads down to the right toward
(220,120) but with a final destination of (20 190). The implementation of cubic splines in VML allowed no more than four coordinates per object – two end points and two control points in between that controlled the slope and acceleration at the end points. To adjoin multiple splines together into a single complex curve in VML required a bit more effort than in
SVG, though one of the de facto end points in SVG is actually an element of the preceding portion of the path.
Here's an example using a "compound path" having multiple starting points and using
SVG code illustration more complex path
Part B. putting SVG in a web page
Unlike the earlier VML from Microsoft, SVG code cannot be interleaved directly with HTML. I have not seen critics describe this as a limitation, but from the standpoint of teaching it in the undergraduate curriculum, I believe it to be a difficulty, since ultimately, to view SVG content within an HTML document, one must use the <embed> tag and pass information back and forth from HTML to SVG using the document object model of the SVG document – an entity ultimately separate from the HTML DOM.Nowadays, with HTML5 marching forward like a steamroller, and thanks in part to some benevolent intervention in its otherwise monolithic path, HTML5 will be allowing in-line presentation of SVG inside the HTML wrapper. The above statement may be stricken.
If I have saved a file called “testing.svg” then that SVG content may be placed into an HTML document through the following:
<embed src=” testing.svg”>
Attributes of this HTML tag such as height and width may be adjusted, with a resultant rescaling of the coordinate system within the SVG document – much in the same way that an <IMG> tag’s rescaling is handled by the browser.Note: The use of the <embed> tag is still, in my opinion, the single "best" way of putting SVG content into HTML that works across all browser-implementations.
<object> is frequently recommended because of fall-back messages for browsers that don't support SVG. Look here for further explanation.
Part C. operations: grouping, scaling, translation and rotation
For users of vector drawing programs (such as MacDraw, CorelDraw, Inkscape, or Adobe Illustrator) SVG’s grouping of objects and assignment of attributes to groups will seem quite natural.
Suppose we wish to take the two crossing lines of the following example:<path d="M 100 100 L 200 200" stroke="black" stroke-width="12"/> <line x1="100" y1="200" x2="200" y2="100" stroke-width="2" stroke="black" />And move both of them downward by 200 units. We may nest the code of both elements inside a group tag and then apply the transformation to both:
<g transform="translate(0 200)" > <path d="M 100 100 L 200 200" stroke="black" stroke-width="12"/> <line x1="100" y1="200" x2="200" y2="100" stroke-width="2" stroke="black" /> </g>Rotation and scaling work similarly for both groups of objects and individual objects.
This topic is explained in much more detail at this location.