Skip to content

SVG

SVG (Scalable Vector Graphics) is a markup-based language similar to HTML, but for laying out images.

A simple SVG might look like:

<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="blue" />
    <circle cx="100" cy="100" r="50" stroke="red" fill="none" />
</svg>

SVG is mostly unitless, whereas in HTML and CSS we have to specify units like "300px" or "20em". The values of attributes instead should be thought of as relative, if your graphic is 100x100, you know that the center point is at (50, 50).

The decision on how these virtual units convert to real-world units is made when you embed in an HTML page, in a PDF document, print, etc.

Coordinate System

Like many things in computer graphics, SVG uses a top-left origin system. The top left corner of an SVG is typically (0, 0). The bottom right would be (width, height).

Example

viewBox

On the root svg element, width and height control how the image appears in the context of the HTML page (if embedded directly).

viewBox controls the interior coordinate system. It takes four values separated by spaces: "minX minY width height".

If the viewBox and the width/height have different proportions, preserveAspectRatio decides how it fits. The default centers the graphic and keeps it fully visible

Example

Basic SVG Elements

Common Attributes

  • fill - interior color of drawn shape/path (default: black)
  • stroke - outline color of drawn shape/path (default: none)

Not required attributes, but we'll use them in upcoming examples. (Can also be set via CSS styles.)

SVG defines tags for common shapes, each with a few required attributes.

Circle and Ellipse

  • cx & cy - used to define center of circle
  • r - radius

Example

An ellipse has (instead of r):

  • rx & ry - the x and y radius:

Example

Rect

Attributes:

  • x, y - offset (top left corner) defaults to (0, 0)
  • width
  • height
  • rx, ry - optional, radius of rounded corners

Example

Line

Attributes:

  • x1, y1
  • x2, y2

Example

Polyline and Polygon

Each takes a list of points as shown in the example below. polyline is a continuous line, whereas polygon closes the loop.

Example

Text

The text element has a lot of additional properties. The text to display goes between the opening and closing tags.

Example

Path

Finally, <path> is the most flexible SVG shape.

It takes a d attribute which is a string containing a series of "pen moves".

Some of the most common values:

Command Name Parameters Example Description
M / m moveto x y M 10 10 Move the pen without drawing
L / l lineto x y L 90 10 Straight line to point
C / c cubic Bézier x1 y1 x2 y2 x y C 20 0 80 0 90 10 Curve with two control points
Q / q quadratic Bézier x1 y1 x y Q 50 0 90 10 Curve with one control point
A / a arc rx ry rotation large-arc sweep x y A 30 30 0 0 1 90 10 Elliptical arc
Z/z closepath none Z Both create straight line back to the start of the subpath
  • Uppercase commands use absolute coordinates. lowercase commands are interpreted relative to the current point.
  • In A, large-arc and sweep are flags (0 or 1) that pick which of the possible arcs is drawn.

Example

Styling

Like HTML, styling can be done inline, with CSS classes, or external stylesheets.

Example

Grouping and Transforms

We often have related objects that we want to keep together logically, and we can use <g> to create groups, and then apply transforms to these groups.

Some of the most common transforms:

Transform Syntax Example Description
translate translate(tx ty) translate(20 10) Move by tx, ty
scale scale(sx [sy]) scale(2) Scale; sy defaults to sx
rotate rotate(angle [cx cy]) rotate(45 50 50) Rotate in degrees clockwise, around the origin or (cx, cy)

Example

More SVG References