Scalable Vector Graphics: Brief Intro

The scalable vector graphics (SVG) format is widely used for two-dimensional images. Most browsers and vector drawing application handle this format.

svg element

Create an svg element. This creates a display area, which the standard calls an SVG viewport.

<svg>
</svg>

This SVG viewport will typically have the default size of 300px (width) by 150px (height). However, you can set a different width and height. (The default units are pixels.)

<svg width="300" height="300">
</svg>

This sets the origin (coordinate 0,0) to be the upper left corner of the viewport. The first coordinate is increasing rightwards, as with traditional Cartesian coordinates. However, the second coordinate is increasing downwards, reversing the convention of traditional Cartesian coordinates. This is the viewport coordinate system. Abstractly drawing takes place on an unbounded imaginary canvas, but only drawing that is encompassed by the viewport will display.

However, we can rescale a large drawing so that it displays in a small viewport, using the viewBox attribute. This is effectively zooming out to see more of the drawing. The viewBox attribute can also select pieces of a drawing to display in the viewport, effectively zooming in on part of the drawing. The viewBox attribution requires four parameters: the two starting coordinates in the drawing, along with a width and height determining how much of the drawing to display. Here is an example of zooming in on the top right corner.

<svg width="300" height="300" viewBox="0 0 100 100">
</svg>

The viewBox attribute effectively transforms the viewport coordinate system. In this example, the aspect ratio (i.e., the width/height ratio) is the same for the viewport and viewbox. If this is not the case, the aspect ratio of the viewbox is preserved, and it centered in the viewport as a size such that it just fits. You can change this behavior with the rather complex preserveAspectRatio attribute. For example, if you want the viewbox content stretched as needed to exactly fit the viewport, use preserveAspectRatio="none". (This introduction does not cover this attribute in more detail; see the online documentation.)

Basic Shapes

SVG provides basic shapes as convenient shorthands for the use of the path element, which we will discuss later.

SVG’s line element constructs a line segment between two points, given their Cartesian coordinates \((x_1,y_1)\) and \((x_2,y_2)\). To paint the line, set a color for the stroke property. (Any CSS color is permissible.) Perhaps surprisingly, the default value is "none".

SVG’s polyline element constructs a sequence of line segments between points, given their Cartesian coordinates as a points attribute. SVG paths have stroke and fill attributes that determine what is to be painted. Although stroke has a default value of "none", :code:`fill has a default value of "black". See the painting documentation for details.

SVG’s polygon element constructs a sequence of line segments between points, given their Cartesian coordinates as a points attribute. It behaves like polyline, except that it connects the last point to the first point.

While it is simple enough to draw a rectangle with the polygon element, SVG also provides the rect element. This requires the coordinates \((x,y)\) of a corner, along with the width and height relative to that corner. We can also use the text element to paint text on the canvas. However, aesthetic text placement and sizing by hand is taxing.

SVG’s circle element constructs a circle, given the Cartesian coordinates of its center and its radius.

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle fill="none" stroke="teal"  stroke-width="2"
     cx="50" cy="50" r="40"/>
</svg>

SVG’s ellipse element constructs an ellipse, given the Cartesian coordinates of its center and two radii.

<svg width="100" height="100" viewBox="0 0 100 100">
  <ellipse fill="none" stroke="blue"  stroke-dasharray="5 10"
     cx="50" cy="50" rx="40" ry="20"/>
</svg>

path element

The path element and has a d attribute, which specifies defines a path to be constructed. The value of this attribute is a string that uses a special minilanguage that has six types of path-construction commands.

MoveTo:: M, m
LineTo:: L, l, H, h, V, v
ClosePath:: Z, z
Quadratic Bézier Curve:: Q, q, T, t
Cubic Bézier Curve:: C, c, S, s
Elliptical Arc:: A, a

MoveTo and LineTo Commands

In the following, \(x\) and \(y\) (possibly subscripted) stand for numbers, measured in pixels. xxx

\(M x,y\): Without constructing anything move the current point to coordinate \(P_c=(x_0,y_0)\). This is called an absolute MoveTo.
\(L x_1,y_1\): Construct a line segment from the current point \(P_c\) to the new current point \(P_n=(x_1,y_1)\). This is called an absolute LineTo. Additional coordinate pairs produce additional absolute LineTo commands.
\(M x_0,y_0,x_1,y_1\): Move the current point as before, but then construct a line segment from \(P_c\) to \(P_n=(x_1,y_1)\). Equivalent to \(M x_0,y_0Lx_1,y_1\). As second coordinate pair (or more if desired) produces an implicit absolute LineTo.
\(Z\): Construct a line segment from the current point \(P_c\) to the first point in the path (\(P_0\)). Joins line ends according to the stroke-linejoin setting.

There are also two specialized comands, H and V, for horizonal and vertical line construction. With H, specify only the new horizontal coordinate; the vertical coordinate is implicit and unchanged from the current point. With V, specify only the new vertical coordinate; the horizontal coordinate is implicit and unchanged from the current point.

<svg width="400" height="400" viewBox="0 0 50 50">
<path fill="none" stroke="blue"
  d="M10,10,40,40H10Z"
</svg>

Relative Movement

\(m\ x,y\): Without constructing anything, move the current point from the initial value coordinate \(P_0=(x_0,y_0)\), to the new value \(P_0 + (x,y) = (x_0+x,y_0+y)\). This is called a relative MoveTo. Additional coordinate pairs produce additional (implicit) relative LineTo commands.
\(l\ x,y\): Construct a line segment from the initial current point \(P_o=(x_o,y_o)\) to the the new current point \(P_n=P_o + (x,y)=(x_o+x,y_o+y)\). This is called a relative LineTo. Additional coordinate pairs produce additional (implicit) relative LineTo commands.
\(m\ x_0,y_0,x_1,y_1\): Move the current point as before, but then construct a line segment from \(P_o=(x_0,y_0)\) to \(P_n=(x_0+x_1,y_0+y_1)\). Equivalent to \(m x_0,y_0lx_1,y_1\). As second coordinate pair (or more if desired) produces an implicit relative LineTo.
\(z\): Same as Z.

There are also two specialized comands, h and v, for relative horizonal and vertical line-segment construction. With h, specify only the change in the horizontal coordinate; the vertical coordinate is implicit and unchanged from the current point. With v, specify only the change in the vertical coordinate; the horizontal coordinate is implicit and unchanged from the current point.

<svg width="400" height="400" viewBox="0 0 50 50">
<path fill="none" stroke="blue"
  d="M0,0,m10,10,30,30h-30z"
</svg>

Note

To style an SVG path with CSS, give it an id attribute. Hover-responsive styling can assist data visualizations. (Addtionally, paths can themselves be added via CSS.)

Curves and Arcs

Quadratic Bézier Curve

A quadratic Bézier curve constructs a smooth curve definitions between two end points, using a third point as a control point. The first point is the current point, \(P_o\). The second point is the control point parameter, \(P_c\). The third point is the endpoint parameter, \(P_n\). It also becomes the new current point.

\(Q\ \ x_c,y_c\ \ x_n,y_n\): Construct a quadratic Bézier curve from the current point \(P_o=(x_o,y_o)\) to the end point \((x,y)\), using the control point \((x_c,y_c)\). Any additional coordinate pairs serve as parameters for additional (implicit) absolute quadratic Bézier curve (Q) commands.
\(T\ x,y\): Like Q, but implicitly produce the control point by reflecting the previous Bézier curve command’s control point through its endpoint. Any additional coordinate pairs serve as parameters for additional (implicit) absolute quadratic Bézier curve (T) commands.

<path fill="none" stroke="teal"
      d="M 10,50 Q 15,10 40,50 T 70,50" />

\(q\ \ x_c,y_c\ \ x,y\): Construct a quadratic Bézier curve from the current point \(P_o=(x_o,y_o)\) to the end point \(P_o+(x,y)\), using the control point \(P_o+(x_c,y_c)\). Any additional coordinate pairs serve as parameters for additional (implicit) relative quadratic Bézier curve (q) commands.
\(t\ x,y\): Like q, but implicitly produce the control point by reflecting the previous Bézier curve command’s control through its endpoint. Any additional coordinate pairs serve as parameters for additional (implicit) relative quadratic Bézier curve (t) commands.

Cubic Bézier curves

A cubic Bézier curve constructs a smooth curve definitions between two end points, using two other point as control points. The first point is the current point, \(P_o\). The second point is the control point parameter, \(P_c\). The third point is the endpoint parameter, \(P_n\). It also becomes the new current point.

\(C\ \ x_{c_{1}},y_{c_{1}}\ \ x_{c_{2}},y_{c_{2}}\ \ x_n,y_n\): Construct a cubic Bézier curve from the current point \(P_o=(x_o,y_o)\) to the end point \((x,y)\), using the control points \((x_{c_{1}},y_{c_{1}})\) and \((x_{c_{2}},y_{c_{2}}\). Any additional coordinate triples serve as parameters for additional (implicit) absolute cubic Bézier curve (C) commands.
\(S\ \ x_{c_{2}},y_{c_{2}}\ \ x,y\): Like C, but implicitly produce the first control point by reflecting the previous Bézier curve command’s second control point through its endpoint. Any additional coordinate pairs serve as parameters for additional (implicit) absolute cubic Bézier curve (S) commands.

<!-- example of one Cubic Bézier curve (C) plus extension (S) -->
<path fill="none" stroke="teal"
      d="M 10,50
         C 15,10 30,5 40,50
         S 60,90 70,50" />

\(c\ \ x_{c_{1}},y_{c_{1}}\ \ x_{c_{2}},y_{c_{2}}\ \ x,y\): Construct a cubic Bézier curve from the current point \(P_o=(x_o,y_o)\) to the end point \(P_o+(x,y)\), using the control points \(P_o+(x_{c_{1}},y_{c_{1}})\) and \(P_o+(x_{c_{2}},y_{c_{2}})\). Any additional coordinate triples serve as parameters for additional (implicit) relative cubic Bézier curve (c) commands.
\(s\ \ x_{c_{2}},y_{c_{2}}\ \ x,y\): Like c, but implicitly produce the first control point by reflecting the previous Bézier curve command’s second control through its endpoint. Any additional coordinate pairs serve as parameters for additional (implicit) relative cubic Bézier curve (s) commands.

Elliptical Arcs

Elliptical arcs are curves defined as part of an ellipse. The EllipticalArc command A takes parameters \(r_x\ r_y\ \theta\ f_a\ f_s\ x\ y\). Here \(r_x\) and \(r_y\) are the ellipse radii (rx and ry), Here \(\theta\) (angle, in degrees) rotates the ellipse clockwise relative to the horizontal axis, \(f_a\) is the large-arc-flag, \(f_s\) is the sweep-flag, and \((x,y)\) is the endpoint (x and y). (A negative angle produces counter-clockwise rotation.) Use A to construct an arc from the current point \(P_0\) to the Cartesian coordinate \((x,y)\), which becomes the new current point. The large-arc-flag and sweep-flag picks which one of four possible arcs to construct. This is rather complicated, and this tutorial does not discuss it in any detail. See the elliptical arc curve documentation for details.

large-arc-flag: small arc (0) or large arc (1)
sweep-flag: counterclockwise turning arc (0) or clockwise turning arc (1)

The a command works the same way, except that the endpoint is \(P_0+(x,y)\).

Miscellaneous SVG Information

Although SVG has good support on the web and in the ePub standard, it does not yet have good PDF support. Thefore, the need to convert SVG images to PDF images is widespread. If you used a vector drawing language or application, the best solution is usually to re-export as PDF. If you only have an SVG file, perhaps because you created your drawing by hand, there are many conversion options. One is svglib, a pure-Python library for reading SVG files and converting them to other formats by means of the ReportLab Open Source toolkit. It can read existing SVG files and convert them into ReportLab Drawing objects, which in turn can be exported as PDF.