SVG Introduction

Last Updated : 20 Mar, 2024

SVG stands for Scalable Vector Graphic is a XML language used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. SVG is a web standard for vector-based graphics. It is an XML format that defines graphics.

In SVG files, every element and property can be animated. SVG is compatible with other W3C standards such as the Document Object Model (DOM) and XSL.

Prerequisite: Before you continue, you should have some basic understanding of the following: HTML and XML.

Advantages of SVG

SVG provides good printing quality at any resolution and therefore is highly usable.
It is an Open Standard and easy to use.
We can use any text editor to create and edit SVG images.
It is highly scalable and never compromises on quality on resizing.

Disadvantages

The size of text formatted raster images is bigger than binary formatted raster images.
Even for a simple image, the size can be large.

SVG Example

Now let’s understand SVG better using an example.

Example: In this example, We create an SVG line in HTML.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Welcome To GeeksforGeeks</h2>
<svg height="250" width="600">
    <line x1="10" y1="10" x2="400" y2="400"
        style="stroke:rgb(0,0,255);stroke-width:3" />
</svg>
</body>

</html>