HTML SVG

SVG (Scalable Vector Graphics) describes pictures with shapes, so they stay sharp at any size.

What is SVG?

SVG pictures are made of shapes like circles, lines and text, written as tags
They never get blurry when you zoom in or show them on a big screen
They are perfect for logos, icons, simple illustrations and charts
You can write SVG straight inside your HTML with the <svg> element

Your First SVG

Example

html

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="120">
  <rect x="10" y="10" width="180" height="100" fill="#fde2dc" stroke="#e34c26" stroke-width="3" />
  <circle cx="100" cy="60" r="35" fill="#e34c26" />
</svg>

</body>
</html>

Try it Yourself »

Shapes are drawn in order. The circle comes after the rectangle, so it sits on top.

Basic Shapes

Element	Draws	Main attributes
`<rect>`	Rectangle	`x`, `y`, `width`, `height`, `rx` (round corners)
`<circle>`	Circle	`cx`, `cy` (centre), `r` (radius)
`<ellipse>`	Oval	`cx`, `cy`, `rx`, `ry`
`<line>`	Straight line	`x1`, `y1`, `x2`, `y2`
`<polygon>`	Closed shape with corners	`points`
`<polyline>`	Open line with corners	`points`
`<path>`	Any shape	`d`
`<text>`	Text	`x`, `y`

Colours are set with fill (inside) and stroke (the outline), plus stroke-width for the line thickness.

Lines, Polygons and Text

Example

html

<!DOCTYPE html>
<html>
<body>

<svg width="320" height="160" style="border:1px solid #ccc;">
  <line x1="10" y1="150" x2="110" y2="20" stroke="green" stroke-width="4" />
  <polygon points="160,20 200,140 120,140" fill="gold" stroke="black" />
  <rect x="220" y="30" width="80" height="60" rx="12" fill="#2a7ae2" />
  <text x="230" y="120" font-family="Arial" font-size="16" fill="#333">Hello SVG</text>
</svg>

</body>
</html>

Try it Yourself »

The polygon's points is a list of x,y pairs. The shape closes itself from the last point back to the first.

The viewBox: Making SVG Scale

viewBox sets the drawing's own coordinate system: min-x min-y width height. The SVG can then be shown at any size and everything scales together.

Example

html

<!DOCTYPE html>
<html>
<body>

<svg viewBox="0 0 100 100" width="50">
  <circle cx="50" cy="50" r="45" fill="#e34c26" />
  <text x="50" y="62" font-size="36" text-anchor="middle" fill="white" font-family="Arial">W</text>
</svg>

<svg viewBox="0 0 100 100" width="150">
  <circle cx="50" cy="50" r="45" fill="#e34c26" />
  <text x="50" y="62" font-size="36" text-anchor="middle" fill="white" font-family="Arial">W</text>
</svg>

</body>
</html>

Try it Yourself »

Both logos use the same code. Only width is different, and both are perfectly sharp.

For icons, always use a viewBox and set the size with width or CSS. Then one icon works everywhere.

The path Element

<path> can draw any shape. Its d attribute is a list of commands:

Command	Meaning
`M x y`	Move to a point (without drawing)
`L x y`	Draw a line to a point
`Q cx cy x y`	Draw a curve
`Z`	Close the shape

Example

html

<svg viewBox="0 0 100 100" width="100">
  <path d="M 10 50 L 40 80 L 90 20" fill="none" stroke="seagreen" stroke-width="10" />
</svg>

This draws a tick mark. Design tools like Figma and Illustrator export icons as paths, so you will often copy them rather than write them by hand.

Styling SVG with CSS

Inline SVG shapes can be styled with CSS, just like HTML elements. You can even add hover effects:

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  .star { fill: #ccc; cursor: pointer; transition: fill 0.2s; }
  .star:hover { fill: gold; }
</style>
</head>
<body>

<p>Move the mouse over the star:</p>
<svg viewBox="0 0 100 100" width="120">
  <polygon class="star" points="50,5 61,38 95,38 67,58 78,92 50,72 22,92 33,58 5,38 39,38" />
</svg>

</body>
</html>

Try it Yourself »

Using an SVG File

SVG can also be saved as a .svg file and used like any image:

Example

html

<img src="logo.svg" alt="Workownix logo" width="120" height="40">

This is simpler, but CSS on your page cannot change the colours inside the file.

SVG or Canvas?

SVG	Canvas
Shapes are elements you can style and click	Only pixels, drawn with JavaScript
Sharp at every size	Can get blurry when stretched
Best for logos, icons, maps, simple charts	Best for games, photo editing, thousands of moving objects
Text inside can be read by screen readers and Google	Text is just pixels

See the Canvas chapter to compare.

Exercise

Which SVG element draws a circle with its centre at (50, 50)?