In this tutorial, you’ll learn how to draw vector graphics on a web page using the HTML5 SVG element.
What is SVG?
SVG stands for Scalable Vector Graphics and is an XML-based image format for defining two-dimensional vector graphics for the website. A vector image, unlike a raster image (e.g.,.jpg,.gif,.png, etc.), can be scaled up or down to any extent without losing image quality.
SVG images are generated using a set of statements that follow the XML schema; as a result, they can be created and edited in any text editor, such as Notepad. SVG has a number of other benefits over other image formats such as JPEG, GIF, and PNG.
Searching, indexing, scripting, and compressing SVG images are all possible. JavaScript can be used to create and modify SVG images in real time. SVG images can be printed in high resolution at any scale. The built-in animation elements can be used to animate SVG content. Hyperlinks to other documents can be included in SVG images. Bitmap or raster images are made up of a fixed set of dots called pixels, while vector images are made up of a fixed set of shapes defined by math.
Embedding SVG into HTML Pages
Using the HTML5 <svg> element, you can directly embed SVG graphics into your document.
Take a look at the following example to see how it works in practice:
<!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>
Inline SVG rendering is supported by all major modern web browsers, including Chrome, Firefox, Safari, and Opera, as well as Internet Explorer 9 and above.
Drawing Path and Shapes with SVG
The following section will show you how to use the newly introduced HTML5 <svg>
Drawing a Line
A straight line is the most simple path that SVG allows you to build. The following example demonstrates how to use the SVG <line>
<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 draw a line from (x1,y1) to (x2,y2) (x2,y2).
Drawing a Rectangle
The SVG <rect>
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
The x and y attributes of the <rect>
Drawing a Circle
The SVG <circle> element can also be used to create circle shapes. The following example shows how to use SVG to create and style a circular shape:
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
The cx and cy attributes of the <circle> element describe the coordinates of the circle’s center, while the r attribute specifies the circle’s radius. The circle’s center is set to (0,0) if the attributes cx and cy are omitted or not specified.
Drawing Text with SVG
SVG can also be used to draw text on web pages. SVG text is rendered as a graphic, allowing you to apply all graphic transformations to it while still acting as text, allowing it to be selected and copied by the user. To explain how this works, consider the following example:
<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 <text> element’s x and y attributes define the top-left corner’s absolute position, while the dx and dy attributes define the relative location.
The <tspan> element may also be used to reformat or reposition the span of text within a <text> element. When you click and drag to select the text, all of the text is contained in separate tspans but within the same text, element can be selected at the same time. Separate text elements, on the other hand, cannot be selected at the same time. please see the below 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>
Differences between SVG and Canvas
HTML5 introduced two new graphical elements for creating rich graphics on the web, <canvas> and <svg>, but they are fundamentally different.
The table below summarises some of the main differences between these two elements, helping users understand how to use them effectively and appropriately.
SVG Canvas Based on the vector (composed of shapes) Based on a raster (composed of pixels) Several graphic elements that become part of the DOM tree of the page The behavior of a single element is similar to <img>. Canvas can be saved to format PNG or JPG Modified by CSS and script Modified only by the script Good ability to render text Poor capabilities to render text Give better performance with smaller objects or a larger surface, or both, you can obtain good performance. A larger number of objects or a smaller surface, or both, give a better performance. Improved scalability. Can be printed at any resolution with high quality. There is no pixelation. Bad scalability. Not for higher-resolution printing. Pixels can occur
