Prerequisites:
David Dailey, An SVG Primer for Today’s Browsers:
Read enough of this, and carefully enough, that you are able to meet the learning objectives immediately below.
Be able to:
defs, g, and use tags.The Primer was written in 2010, and things move rapidly. The W3C has two current standards for SVG:
They are working on modularizing the specification (i.e., breaking it down into parts like color management, CSS animations, CSS transforms, filter effects, vector effects) and plan to put together an SVG 2.0 specification in August 2014.1
What about browser support?
SVG Study shows off a number of shapes, text, Bezier curves, declarative animation and effects, and dynamic control through JavaScript.
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
...
</svg>The point (0, 0) is the left top corner of the SVG element. The x axis points right; the y axis points down.
SVG is an XML application (that is, a language in the XML framework). Therefore, SVG comments are XML comments; they look like this:
<!-- This is a comment. -->A line from (x1, y1) to (x2, y2):
<line x1="0" y1="0" x2="1" y2="1"/>A rectangle with left top corner (x, y):
<rect x="0" y="0" width="1" height="1"/>A circle with radius (cx, cy) and radius r:
<circle cx="100" cy="100" r="100"/>An ellipse with radius (cx, cy) and radii rx and ry:
<ellipse cx="100" cy="100" rx="50" ry="150"/>Paths:
<path d="..."/>where the value of d includes directions like these:
M x0 y0 moves the “pen” (invisibly) to x, yL x1 y1 draws a line from the pen position to x, yL x1 y1 x2 y2 ... draws multiple line segmentsL x1,y1 x2,y2 ... draws multiple line segments, but the commas may confuse some browsers.z at the end of a path closes it, i.e., draws a line back to the beginning.Q x1 y1 x2 y2 draws a quadratic Bezier curve with (x1, y1) as the intermediate control point and (x2, y2) as the end point.C x1 y1 x2 y2 x3 y3 draws a cubic Bezier curve with (x1, y1) and (x2, y2) as intermediate control points and (x3, y3) as the end point.Example:
<path d="M 0 0
L 100 80
C 250 400 600 90 300 300
z"/>draws a line from (0, 0) to (100, 80), a cubic Bezier curve from (100, 80) to (300, 300) with intermediate control points (250, 400) and (600, 90), and closes the path with a line from (300, 300) back to (0, 0).
Basic lines, curves, and shapes
In this example, we see the complete HTML page, so you can see how the SVG fits into it. This is one way of including SVG in an HTML page; others are discussed in the Primer.
In the remaining examples, only the SVG code will be shown.
For stroke and fill colors, SVG 1.1 recognizes all the color syntax of CSS2 colors: hexadecimal, rgb(255, 255, 255), rgb(100%, 100%, 100%); and the SVG recognized color keywords. Use “none” for no color (i.e., no stroke or no fill). The SVG 1.1 Full specification does not allow HSL, HSLA, or RGBA color specifications. The SVG2 draft color specification seems to allow HSL, HSLA, and RGBA color syntax, from CSS3 Color, and these all work in current Firefox and Chromium (other browsers?). Opacity (alpha) can (also) be specified separately.
fill="colorspec"stroke="colorspec"opacity="0.5" (opacity is the alpha component of a color; 90% opaque is 10% transparent).stroke-width="5"stroke-dasharray="7,5,7"stroke-linecap="round" (what are the other options?)Example:
<rect x="100" y="80" width="200" height="25"
fill="red" stroke="rgb(255, 255, 255)" opacity="0.6"
stroke-width="6" stroke-dasharray="8,4,12,4"/><text x="100" y="80" font-size="16">Partly cloudy.</text>Text elements can also have a style attribute with CSS style properties such as font-family, font-style, font-weight, font-size, text-decoration, etc.
Text can be made to run along a path, as explained in the tutorial.
Image files can be PNG, JPEG, or SVG.
<image xlink:href="IMAGE-URL" x="100" y="100" width="308" height="350"/>The notation xlink:href means that the href attribute belongs to the xlink namespace. Namespaces in XML are similar to packages in Java or modules in Python. You may need to identify this namespace with xmlns:xlink="http://www.w3.org/1999/xlink" either in the image tag or in the svg tag.
SVG supports affine transforms including translate, rotate, and scale. These are specified by the transform attribute in any element, either singly or in combination:
transform="translate(dx, dy)"transform="rotate(r, cx, cy)" where (cx, cy) is the center of rotation and r is the angle of rotation, measured clockwise in degrees.transform="scale(s)" applies scale factor s in both dimensionstransform="scale(sx, sy)" applies scale factor sx to the x dimension and sy to the y dimension.From the tutorial it sounds like scaling is pretty crude, and actually repositions the element because it just multiplies each coordinate by the scale factor, so you have to either position the object at (0, 0) before scaling and/or compensate by a translation.
Transforms can be combined:
transform="translate(100, 300), rotate(-50, 0, 0)"Transforms become really powerful when applied to groups. To put elements into a group, enclose them in g tags, and apply the transform to the whole group:
<g transform="...">
<path .../>
...
</g>Even more, you can define elements (groups or otherwise) by creating them in a defs element and giving them an id attribute (the elements are not drawn when defined); then use them (multiple times) with a use element. When referencing the defined element, be sure to prefix its id with # (e.g., #g0 instead of just g0):
<defs>
<g id="g0">
<path .../>
...
</g>
</defs>
<use xlink:href="#g0" transform="translate(50, 50)"/>
<use xlink:href="#g0" transform="translate(90, 110)"/>
<use xlink:href="#g0" transform="translate(200, 180), rotate(45, 0, 0)"/>Attributes of an element within a group can be set to inherit the value from the group:
<defs>
<g id="g1" fill="green">
<rect ... fill="inherit"/>
...
</g>
</defs>
<use xlink:href="#g1" transform="translate(60, 90)"/> <!-- rect is green -->
<use xlink:href="#g1" transform="translate(160, 190)"
fill="red"/> <!-- rect is red -->W3C Roadmap - SVG↩