🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML5 SVG: Scalable Vector Graphics Explained

Reading time 4 min
Published Mar 27, 2019
Updated Jan 21, 2020

TL;DR – HTML5 SVG stands for Scalable Vector Graphics. It is used to describe 2D graphics, such as vector-type diagrams and charts.

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:

Example
<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>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

Example
<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:

Attribute Description
cx The X coordinate for the center of the circle
cy The Y coordinate for the center of the circle
r The radius of the circle

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

Example
<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:

Example
<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:

Example
<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:

Example
<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 HTML5 Canvas
XML-based format HTML element
Vector graphics Raster graphics
Great scalability Poor scalability
Modified via JS and CSS Modified via JS
Supports event handlers Doesn't support event handlers
Resolution independent Resolution dependent

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.