SVG

SVG#

Scalable Vector Graphics is a way to draw iamges in the HTML documents. The following table shows the most common tags used to create SVG graphics.

Coordinates#

In SVG, coordinates increase toward the bottom-right. This can be confusing, as larger values of the “y” coordinate move an object downward.

The next cell shows the coordinate plane with numbers displayed on it.

%%HTML
<svg width="400" height="400" text-anchor="middle" viewBox="-500 -500 1000 1000">
    <line x1="-400" x2="400" y1="0" y2="0" stroke="black" stroke-width="3"/>
    <line x1="0" x2="0" y1="-400" y2="400" stroke="black" stroke-width="3"/>
    <text x="100" font-size="30">100</text>
    <text x="200" font-size="30">200</text>
    <text x="300" font-size="30">300</text>
    <text x="-100" font-size="30">-100</text>
    <text x="-200" font-size="30">-200</text>
    <text x="-300" font-size="30">-300</text>
    <text y="100" font-size="30">100</text>
    <text y="200" font-size="30">200</text>
    <text y="300" font-size="30">300</text>
    <text y="-100" font-size="30">-100</text>
    <text y="-200" font-size="30">-200</text>
    <text y="-300" font-size="30">-300</text>
</svg>
100 200 300 -100 -200 -300 100 200 300 -100 -200 -300

View box#

The viewBox attribute defines the coordinates and dimensions of the area to be displayed within a container element (the viewport).

The syntax is: "x y width height", where:

  • x, y: position of the top-left corner of the viewBox.

  • width, height: size of the viewBox.

Note: The viewport size should have the same proportions as the width and height of the container. Otherwise, the HTML may automatically adjust the viewport.

The following cell draws some rectangles of different sizes centered at the coordinate center to illustrate the scales. The viewport has the value "-40 -50 60 50", meaning it draws the area \(x \in (-40,20)\) and \(y \in (-50, 0)\).

%%HTML
<svg width="120" height="100" viewbox="-40 -50 60 50" text-anchor="middle">
    <g fill="none" stroke="black" stroke-width="3">
        <rect x="-50" y="-50" width="100" height="100"/>
        <rect x="-40" y="-40" width="80" height="80"/>
        <rect x="-30" y="-30" width="60" height="60"/>
        <rect x="-20" y="-20" width="40" height="40"/>
    </g>
    <g font-size="8">
        <text x="0" y="-42" >50</text>
        <text x="0" y="-32">40</text>
        <text x="0" y="-22">30</text>
        <text x="0" y="-12">20</text>
    </g>
</svg>
50 40 30 20

As a result, only the parts of the rectangle corresponding to the viewport are displayed.

Path#

A path is an element that can be used to create complex shapes, such as a series of lines, curves, and arcs.

The d attribute of the path tag allows you to specify the sequence of shapes that have to be displayed. The letter of the command is followed its parameters. The following markdown table describes the possible commands and their function.

Command

Description

Absolute

Relative

M/m

Move to a new point without drawing

M

m

L/l

Draw a straight line to a point

L

l

H/h

Draw a horizontal line

H

h

V/v

Draw a vertical line

V

v

C/c

Draw a cubic Bézier curve using two control points

C

c

S/s

Cubic Bézier curve using the reflection of previous control point

S

s

Q/q

Draw a quadratic Bézier curve using one control point

Q

q

T/t

Quadratic Bézier curve using reflection of previous control point

T

t

A/a

Draw an elliptical arc

A

a

Z/z

Close current path (line back to start of subpath)

Z

z

Note: By default, an SVG <path> is filled according to the shape defined by its data, even if the path is not explicitly closed. To prevent filling, use fill="none".

Find out more:

The following cell uses just one path tag to draw a simple picutre.

%%HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<path 
d="M 0 150 L 50 150 Q 50 0 100 150 L 150 150 Q 150 0 200 150 L 250 150"
stroke="black" fill="none"
/>
</svg>

Transform#

Elements in SVG have a transform attribute. The value must be a command with the corresponding parameters in the brackets after it.

The following table shows the commands available in the transform command.

Transform Function

Syntax Example

Description

translate

translate(30, 50)

Moves the element by (x, y) units. If y is omitted, it defaults to 0.

rotate

rotate(45) or rotate(45, cx, cy)

Rotates the element by angle (degrees), optionally around point (cx, cy).

scale

scale(2) or scale(sx, sy)

Scales the element. If sy is omitted, it defaults to sx.

skewX

skewX(30)

Skews the element along the X axis by the given angle.

skewY

skewY(30)

Skews the element along the Y axis by the given angle.

matrix

matrix(a, b, c, d, e, f)

Applies a custom transformation matrix.

The following example shows some texts to which the transformg tag has been applied. Each text has the same command applied to it.

%%HTML
<svg width="300" height="300" font-size="25">
    <text x="50" y="50" transform="rotate(45, 50, 50)">Rotate(45, 50, 50)</text>
    <text x="100" y="100" transform="skewX(25)">skewX(25)</text>
    <text x="25" y="150" transform="skewY(25)">skewY(25)</text>
</svg>
Rotate(45, 50, 50) skewX(25) skewY(25)

Text#

Use <text> tag to display text in the SVG pictures.

The following table displays attributes of the <text> tag.

Attribute

Description

x

Horizontal position of the start of the text.

y

Vertical position of the start of the text.

dx

Horizontal shift from the current text position.

dy

Vertical shift from the current text position.

rotate

Rotation of individual characters.

textLength

Exact length for the text to occupy (for stretching/shrinking text).

lengthAdjust

How the text length should be adjusted: spacing or spacingAndGlyphs.

text-anchor

Alignment of the text relative to x: start, middle, or end.

dominant-baseline

Controls vertical alignment of the text. Check dominant-baseline page of the MDN docs.

font-family

Font family for the text.

font-size

Font size.

font-style

Font style (e.g., normal, italic).

font-weight

Font weight (e.g., normal, bold, 400, 700).

fill

Color used to fill the text.

stroke

Stroke color for the text outline.

stroke-width

Width of the stroke around text.

visibility

Controls if the text is visible (visible, hidden).

opacity

Opacity of the text (0 to 1).

xml:space

How whitespace is handled (default or preserve).

clip-path

Applies a clipping path to the text.

transform

Applies transformations like rotate(), translate(), etc.

The following example shows the various ways you can modify text properties.

%%HTML
<svg width="500" height="300" style="background-color: #f9f9f9;">
  <text x="50" y="50" font-size="24" fill="navy">Simple text</text>
  <text x="50" y="100" font-size="30" fill="white" stroke="black" stroke-width="1.5">
    Outlined text
  </text>
  <text x="250" y="150" text-anchor="middle" font-size="28" fill="darkgreen">
    Center aligned
  </text>
  <text x="50" y="180" font-size="20" fill="crimson" rotate="0 15 30 45 60">
    Rotate
  </text>
  <text x="50" y="210" dx="0 10 20 30 40" font-size="18" fill="orange">
    Stagger
  </text>
  <text x="50" y="260" font-size="20" fill="purple" textLength="300" lengthAdjust="spacingAndGlyphs">
    Stretched to exactly 300px
  </text>
</svg>
Simple text Outlined text Center aligned Rotate Stagger Stretched to exactly 300px