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:
<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!
Drawing Shapes in SVG
<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 X coordinate for the center of the circle|
||The Y coordinate for the center of the circle|
||The radius of the circle|
<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>
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
height attributes in the opening tag:
<svg width="500"> <rect width="200" height="100"> </svg>
SVG vs. Canvas: Main Differences
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
<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.