Horje
SVG Introduction

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>

Output:

SVG Examples

 

 


Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
Foundation CSS Introduction Foundation CSS Introduction
How to make font-size that expands when we resize the window using jQuery ? How to make font-size that expands when we resize the window using jQuery ?
CoffeeScript Class Method CoffeeScript Class Method
How to reverse array of DOM elements using jQuery ? How to reverse array of DOM elements using jQuery ?
How to break forEach() method in Lodash ? How to break forEach() method in Lodash ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 10



 

Horje