The <svg> element

Different ways to describe the drawing area.

Using height and width.

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

using viewBox

<svg viewBox="0,0 100,100">
</svg>

• Within the SVG it’s more accurate to describe units instead of pixels. Each of the three following SVGs all have the same stroke width (2).

The SVG Namespace

All SVG image documents are required to have the SVG namespace in the <svg> element.

xmlns="http://www.w3.org/2000/svg"

Coordinate System

Simple cartesian coordinates.

The viewBox

The viewBox is the visible area of the artwork in the SVG that will be displayed. Elements that exist outside of the viewBox will not be seen.

<svg viewBox="0 0 10 6">

<svg viewBox="0,0 10,6">

You can think of the viewBox as an analog to the artboard that can be found in Adobe Illustrator or other vector-based drawing applications. When Illustrator exports SVG files the artboard defines the viewBox.

The <line> element

<line x1="10" y1="20" x2="70" y2="40" />

<line x1="25" y1="25" x2="75" y2="75" />
<line x1="25" y1="75" x2="75" y2="25" />

The <circle> element

<circle cx="50" cy="50" r="25" />

The <ellipse> element

<ellipse cx="50" cy="50" rx="45" ry="25" />

The <rect> element

<rect x="25" y="25" width="50" height="50" />

rounded rect

<rect x="25" y="25" width="50" height="50" rx="8" ry="8" />

The <polygon> element

The <path> element

The <path> element has the capacity to be the most confusing, and yet the most flexible, SVG element that can be used to draw paths.

You’ll discover that once you begin to understand the path commands the element won’t seem nearly as frightening.

path: arc

The ArcTo command lets you draw an Arc in the following formula:

A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y

Arc and Sweep flags

When describing an arc path there are several directions that the path could follow, these directions are controlled with the arc flag and the sweep flag.

No flags set

<path d="M33,33 A33,33 0 0 0 67,67" />

large-arc-flag

<path d="M33,33 A33,33 0 1 0 67,67" />

sweep-flag

<path d="M33,33 A33,33 0 0 1 67,67" />

large-arc-flag + sweep-flag

<path d="M33,33 A33,33 0 1 1 67,67" />

x-axis-rotation

path: cubic bézier

Commands

• CurveTo (Cubic)
• Mirror Handle (Cubic S)

<path d="M3,4 C1,1 7,1 5,4" />

<path d="M10,60 C-10,90 110,90 90,60" />

<path d="M50,90 C-15,40 10,5 50,30 C90,5 110,40 50,90z" />

path: quadratic bézier

Commands

• CurveTo (Quadratic)
• Mirror Handle (Quadratic T)

<path d="M3,4 Q4,1 5,4" />

<path d="M5,80 Q50,5 95,80" />

Mirror handles

<path d="M5,40 C20,5 32.5,5 50,40 S82.5,75 95,40" />

<path d="M5,40 Q25,-15 50,40 T95,40" />

Transform

Transforms are...

Original

<rect x="25" y="25" width="50" height="50" />

Translate

<rect x="25" y="25" width="50" height="50" transform="translate(20,0)" />

Rotate

<rect x="25" y="25" width="50" height="50" transform="rotate(35)" />

<rect x="25" y="25" width="50" height="50" transform="rotate(35 50,50)" />

Skew

<rect x="25" y="25" width="50" height="50" transform="skewX(20)" />

<rect x="25" y="25" width="50" height="50" transform="skewY(20)" />

<rect x="25" y="25" width="50" height="50" transform="skewX(20) skewY(20)" />

<rect x="25" y="25" width="50" height="50" transform="skewY(20) skewX(20)" />

Scale

<rect x="25" y="25" width="50" height="50" transform="scale(1.5)" />

Matrix

To tranform: matrix(scaleX, skewX, skewY, scaleY, translateX, translateY)

<rect x="25" y="25" width="50" height="50" transform="matrix(-1,-.2,.5,1,75,10)" />

To rotate: matrix(cos, sin, -sin, cos, translateX, translateY)

<rect x="25" y="25" width="50" height="50" transform="matrix(.707,.707,-.707,.707,50,-20)" />

The <text> element

<text> allows you to add text in a single line into the SVG. You can apply the same SVG styles, transformations, and filters to text as any other SVG element.

<text x="25" y="75"&gt;I Love SVG!&lt;/text>

<tspan>

<tspan> allows you to change text styles within the line of text, much like a <span> element in HTML.

<tspan fill="red" stroke="none"&gt;&amp;#10084;&lt;/tspan>

There is no native line-wrapping in SVG text.

The <image> element

<image href="lion_cracker.webp" x="10" y="10" width="80" height="80" />

<image href="data:image/png;base64,..." x="42" y="42" width="16" height="16" />

The <symbol> element

<symbol id="card" viewBox="0 0 100 100"&gt;
            &lt;rect x="0" y="0" width="75" height="75" /&gt;
            &lt;path d="M50 90 C -15 40, 10 5, 50 30 C 90 5, 110 40, 50 90z" fill="rgba(255,0,0,1)" /&gt;
          &lt;/symbol&gt;
          &lt;symbol id="nested" viewBox="0 0 100 100"&gt;
            &lt;circle class="go" cx="50" cy="50" r="25" /&gt;
            &lt;use href="#card" x="50" y="50" width="15" height="15" /&gt;
            &lt;text x="33" y="48" font-size="12" stroke="none" &gt;nested&lt;/text&gt;
          &lt;/symbol>

The <use> element

Once the symbol is in your document, you can reuse it anywhere else in your document with the <use> element.

<svg height="200" width="200"&gt;
            &lt;use href="#card" x="10%" y="10%" width="80%" height="80%" /&gt;
          &lt;/svg>

The <foreignObject> element

Use the foreignObject tag to insert HTML elements into an SVG.