Skip to content
Related Articles

Related Articles

SVG Introduction

Improve Article
Save Article
  • Last Updated : 14 Feb, 2022
Improve Article
Save Article

SVG stands for Scalable Vector Graphic. It can be 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: 

  • It 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.

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>


Output:

 

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!