HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python TL;DR – HTML5 SVG stands for Scalable Vector Graphics. It is used to describe 2D graphics, such as vector-type diagrams and charts.
Contents
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>
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified 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:
<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:
<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 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.
