Scalable Vector Graphics (SVG) is an XML-based image format used to define two-dimensional vector graphics for the web. Unlike raster images (e.g., .jpg
, .gif
, .png
, etc.), vector images can be scaled up or down without losing quality.
An SVG image is created using a series of statements that follow the XML schema, which means SVG images can be created and edited with any text editor, such as Notepad. There are several advantages of using SVG over other image formats like JPEG, GIF, and PNG etc.
Tip: Vector images are composed of a set of shapes defined by mathematical equations, whereas bitmap or raster images are made up of a fixed set of dots called pixels.
Using the HTML5 <svg> element, you have the capability to seamlessly integrate SVG graphics into your document.
Let's look at the following example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding SVG in HTML</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>
Note: All major modern web browsers, including Chrome, Firefox, Safari, and Opera, as well as Internet Explorer 9 and above, support inline SVG rendering.
The following section will explain how to draw basic vector-based paths and shapes on web pages using the newly introduced HTML5 <svg>
element.
The most simple path you can draw with SVG is a straight line.
The below example will show you how to create a straight line using the SVG <line>
element:
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>
The x1
, x2
, y1
, and y2
attributes of the <line>
element specify the coordinates for drawing a line from (x1, y1)
to (x2, y2)
.
You can generate basic rectangle and square shapes using the SVG <rect>
element. Below is an example demonstrating how to create and style a rectangular shape with SVG:
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
The attributes x
and y
of the <rect>
element determine the coordinates of the top-left corner of the rectangle. Additionally, the attributes width and height specify the width and height of the shape.
You can create the circle shapes using SVG <circle>
element.
The below example will show you how to create and style a circular shape with SVG:
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
The attributes cx
and cy
of the <circle>
element define the coordinates of the center of the circle, while the attribute r
specifies the radius of the circle. If the attributes cx
and cy
are omitted or not specified, the center of the circle is set to (0,0)
.
Text can also be drawn on web pages using SVG. Text in SVG is rendered as a graphic, allowing you to apply graphic transformations to it. However, it still functions as text, meaning it can be selected and copied by the user. Let's explore an example to understand how this works:
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>
The attributes x
and y
of the <text>
element define the location of the top-left corner in absolute terms, while the attributes dx
and dy
specify the relative location.
Additionally, you can use the <tspan>
element to reformat or reposition a span of text contained within a <text>
element. Text contained in separate tspans, but inside the same text element, can all be selected at once when you click and drag to select the text. However, text in separate text elements cannot be selected simultaneously. Let's examine an example:
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>
HTML5 introduced two new graphical elements, <canvas>
and <svg>
, for creating rich graphics on the web. However, they are fundamentally different.
The table below summarizes some of the basic differences between these two elements, aiding in understanding how to use them effectively and appropriately.
SVG | Canvas |
---|---|
Vector based (composed of shapes) | Raster based (composed of pixel) |
Multiple graphical elements, which become the part of the page's DOM tree | Single element similar to <img> in behavior. Canvas diagram can be saved to PNG or JPG format |
Modified through script and CSS | Modified through script only |
Good text rendering capabilities | Poor text rendering capabilities |
Give better performance with smaller number of objects or larger surface, or both | Give better performance with larger number of objects or smaller surface, or both |
Better scalability. Can be printed with high quality at any resolution. Pixelation does not occur | Poor scalability. Not suitable for printing on higher resolution. Pixelation may occur |