SVG primer

Arun Ram
Department of Mathematics and Statistics
University of Melbourne
Parkville, VIC 3010 Australia
aram@unimelb.edu.au

Last updates: 30 January 2012

Three basic tags: path, circle, and ellipse

An example of a path is:

<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />

• M x y indicates 'move to coordinate x y'
• L x y indicates 'line to coordinate x y'
• Z indicates 'close path'
• C x1 y1 x2 y2 x y indicates a cubic curve to (x,y) using (x1,y1) as control point of beginning of curve and (x2,y2) as control point of end of curve.
• Q x1 y1 x y indicates a quadratic curve to (x,y) using (x1,y1) as control point.

Then

• the line

  <line x1="100" y1="300" x2="300" y2="100" stroke-width="5" />

  is the same as <path d="M 100 300 L 300 100" stroke-width="5" /> ;
• the piecewise linear path

  <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325, ... 1150,375" />

  is the same as <path d="M 50 375 L 150 375 L 150 325 ... L 1150 375" fill="none" stroke="blue" stroke-width="10" /> ;
• the closed piecewise linear path

  <polygon fill="line" stroke="blue" stroke-width="10" points="850,75 958,137.5 ... 742,137.5" />

  is the same as <path d="M 850 75 L 958 137.5 ... L 742 137.5 z" fill="line" stroke="blue" stroke-width="10" /> ;
the rectangle

<rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" />

is the same as <path d="M x+rx y L x+width-rx y ?????850 75 L 958 137.5 ... L 742 137.5 z" fill="line" stroke="blue" stroke-width="10" /> ;
• the rectangle with rounded corners

  <rect x="0" y="0" width="400" height="200" rx="50" fill="none" stroke="purple" stroke-width="30" />

  is the same as <path d="M x+rx y L x+width-rx y ?????850 75 L 958 137.5 ... L 742 137.5 z" fill="none" stroke="purple" stroke-width="30" /> .

Finally,

<circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="3" />

produces a circle with center (cx,cy) and radius r, and

<ellipse cx="600" cy="200" rx="100" ry="300" fill="red" stroke="blue" stroke-width="3" />

produces a ellipse with center (cx,cy), x-axis radius rx, and y-axis radius ry.

The <svg> tag and the Viewbox and Viewport

The initial viewport is specified by the width and height attributes of the outermost svg element (§7.2). The outermost svg element determines an initial 'viewport coordinate system' and a 'user coordinate system' which initially coincide (§7.3). The transform changes the user coordinate system (§7.4-7.6). The attribute viewBox="minx miny width height" specifies a rectangle which which creates an initial user coordinate system which causes the graphic to scale to fit into the viewport no matter what size the viewport is. If preserveAspectRatio is not specified then its value defaults to xMidYMidmeet (see §5.2), hence it is better to specify preservAspectRatio="none" to avoid bits of the picture getting cut off (see §7.7-7.9).

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" preserveAspectRatio="none" xlmns="http://www.w3.org/2000/svg" version="1.1">

is a template for the outermost svg element.

Arrowheads for commutative diagrams

The <marker> element is the appropriate way to include arrowheads. This will be indispensible for commutative diagrams in mathematics presentation. Follow the example in §11.6.1 which is as follows:

<defs>
<marker id="Triangle"
   viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" 
   markerHeight="3" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker> </defs>
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100"
marker-end="url(#Triangle)" />

Additional features

In §23.2, is the recomended approach to including MathML with the <foreignObject> tag. The <switch> (conditional) is used only to provide an alernate option for browsers that might not be MathML capable. Unless the author is going to provide a true alternate option, the <switch> should not be included.

Including text within svg is in §10. CSS styling is in §6.

Animation is a feature that should be utilised in the future. This is treated in §19. Interactivity is treated in §16. Filters, opacity and gradients are all features that could be useful, see §13-15.

Notes and References

The path command is treated in Section 8 of the specification. The commands rect, circle, ellipse, line, polyline, and polygon are all treated in Section 9 of the specification.

References

[w3cSVG] Scalable Vector Graphics (SVG) 1.1 (Second edition), W3C Recommendation, 16 August 2011 http://www.w3.org/TR/SVG11.

page history