HTML5 SVG: Scalable Vector Graphics Explained

What Exactly is SVG?

You could say SVG is an equivalent of HTML, but for graphics. It is a markup language that developers use to describe 2D vector graphics. SVG is based on XML and works with other web standards (such as CSS and DOM) just fine.

Images in SVG are created and saved as XML text files using any text editor you prefer. That makes it possible to search and index them as well. However, you have to remember to save the files with a .svg extension.

Using SVG in HTML

SVG images are called scalable because their size can be increased or decreased without losing image quality. The reason for that is because vector graphics consist of paths rather than pixels. Images made of pixels (e.g., JPEGs) are called raster, or bitmap graphics.

To include vector graphics in you website, wrap the image data in the HTML <svg> tags. They define a container for the SVG graphics which then have to be nested within them:

<svg width="200" height="200">
  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)">
</svg>

Theory is great, but we recommend digging deeper!

Learn HTML5 and CSS3 to Build a HTML5 Website from Scratch

Stone River eLearning

4.0 (458)

Drawing Shapes in SVG

The <circle> tag is one of the HTML SVG tags. It defines a circle that should be drawn inside the SVG tag:

<svg width="300" height="300">
  <circle cx="110" cy="110" r="35" stroke="yellow" stroke-width="6" fill="green">
</svg>

As you can see in the example, the location and size of the circle is defined by three attributes:

The <rect> tag defines a rectangle shape in an HTML SVG element:

<svg width="450" height="350">
  <rect width="450" height="350" style="fill: rgb(0, 255, 0); stroke-width: 20; stroke: rgb(120, 10, 0);">
</svg>

In the example below, we create a rectangle with rounded corners:

<svg width="500" height="250">
  <rect x="40" y="30" rx="30" ry="30" width="200" height="200" style="fill: yellow; stroke: green; stroke-width: 15; opacity: 0.5;">
</svg>

The rx and ry attributes define the roundedness: if you specified both of them as 180, you would get a perfectly round circle as a result.

To create a more complex shape, use the <polygon> element. It consists of multiple straight lines that connect to create a closed shape:

<svg width="300" height="300">
  <polygon points="110,20 50,210 200,90 20,80 170,210" style="fill: green; stroke: yellow; stroke-width: 5; fill-rule: evenodd;">
</svg>

To define a polygon, we define points by stating a couple of numbers that represent its X and Y coordinates. Each point is connected to the next one with a straight line. The last point is also connected to the first one to close the shape.

In the example, the first pair we see is 110,20. As the positive X axis goes right, and the positive Y axis points down, our point is 110 pixels to the right and 20 pixels down.

To define the dimensions of a SVG element, include the width and height attributes in the opening tag:

<svg width="500">
  <rect width="200" height="100">
</svg>

SVG vs. Canvas: Main Differences

If you are already familiar with the HTML5 <canvas> element, you might be confused about what are the differences between these two elements. Both are used for graphics, and both require some basic JavaScript knowledge to use.

Let's compare SVG vs. canvas in detail:

HTML5 SVG: Useful Tips

• Beginners often get confused whether to choose SVG vs. PNG (Portable Network Graphics), as both support high color, transparency, and lossless compression. Keep in mind SVG is better if you need scalability or animations.
• If you need to create a custom shape but keep it open, choose <polyline> instead of <polygon>. That way, the first line will not join the last one.
• You can also save pictures created in Adobe Illustrator as SVG – all you need to do is specify the .svg extension when saving it.