Hello reader's , Today we will discuss one of the new element of HTML5 used in creating graphic content on the web page.

Introduction :-

The term SVG basically implies as Scalable Vector Graphics. It belongs to the family of an XML based file format for creating 2D graphics that can be both static or dynamic.

These are different from raster based graphics as they store the colour definition of each pixel used in an array of data. Some of the raster based graphics are as follows :- JPEG, PNG, GIF.

SVG is a part of HTML5 specifications i.e it can include all the SVG tags and can be easily be inlined.

Features of Scaleable Vector Graphics in HTML5 :-

1. These are created using some mathematical formulas that basically require less data in the source file to be stored.

2. It is mostly used for creating vector type diagrams such as pie charts, 2D graphs in X,Y coordinates.

3. The SVG graphics do not lose its quality whenever zoomed in or out.

4. The SVG images can be easily created and edited using any editor.

5. The SVG images can be searched, indexed, scripted and can be compressed easily.

6. The SVG image for source file is basically a text-based file which makes its accessible and search -engine friendly for the users.

7. In SVG files, every element and every attribute can be animated.

 SVG Tag :-

The SVG has structural elements with an open and close tag i.e <svg> </svg>. We can have an inside svg elements for giving more detailed and can form an organised structure.

Basic Shapes Elements in SVG :-

There are several basic elements used in SVG are as follows :-

• Rectangle :- For creating a rectangle shape , we use <rect> element provided with width and height attribute to this element.

Below is the syntax for creating a rectangle :-

<svg
width="100" height="100">

    <rect x="10" y="10"width="80"height="80"rx="10"ry="10"fill="red"stroke="green" stroke-width="5" />

</svg>

• Circle :- For creating a circle shape , we use <circle> element provided with cx , cy and r attribute for specifying the coordinates and radius for forming circle.

Below is the syntax for creating a circle :-

<svg
width="100" height="100">

    <circle cx="50" cy="50" r="40" fill="red" stroke="#bada55" stroke-width="5" />

</svg>

• Ellipse :- For creating an ellipse , we use <ellipse> element provided with cx and cy attribute for specifying the coordinates of the center of the ellipse while rx and ry for specifying the radius.

Below is the syntax for creating an ellipse :-

<svg
width="100" height="100">

    <ellipse cx="50" cy="50" rx="30" ry="10" fill="red" stroke="green" stroke-width="5"
/>

</svg>

• Line :- For creating a line , we use <line> element provided with x1, x2, y1 and y2 attributes for specifying the start and end points on x and y axis.

Below is the syntax for creating line :-

<svg
width="100" height="100">

    <line x1="50" y1="50" x2="30" y2="10" stroke="green" stroke-width="5" />

</svg>

• Polygon :- For creating a polygon shape , we use <polygon> element provided with points attribute for specifying the x and y coordinates for each corner of the polgon shape.

Below is the syntax for creating a polygon :-

<svg
width="100" height="100">

    <polygon points="10,0 60,0 35,50" stroke="green" stroke-width="5" />

</svg>

• Polyline :- For creating a polyline , we use <polyline> element that is used to create any shape consisting of only straight lines provided with point attribute for specifying the various points over the coordinate.

Below is the syntax for creating a polyline :-

<svg
width="100" height="100">

    <polyline points="50,50 30,10" stroke="green" stroke-width="5" />

</svg>

• Path :- For definning a path , we make use of <path> element . It uses some commands for specifying th epath data , these are as follows :-
• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bezier curve
• T = smooth quadratic Bezier curve
• A = elliptical Arc
• Z = closepath

Below is the syntax for creating a path :-

<svg
width="225" height="225">

    <path d="M150 0 L75 200 L225 200 Z" />

</svg>

• 8. Text :- For defining a text , we use <text> element provided with the x and y coordinate for positioning the text.

Below is the syntax for creating a text :-

<svg
width="200" height="30">

    <text x="0" y="15" fill="red">Welcome</text>

</svg>

Some basic element parameters :-

As studying about the SVG , it uses graph for drawing images which is basically comprises of x and y coordinates. In SVG the start point is from top left corner.

Each SVG elements have some basic parameters , these are as follows :-

• X :- It defines the x- coordinate of the top left corner of the element.
• Y :- It defines the y-coordinate of the top left corner of the element.
• Fill :- This property helps in filling the element background color.
• Fill - opacity :- This property helps in filling opacity to the element's background color.
• Stroke :- This property hepls in providing border color to the element.
• Stroke-width :- This property helps in providing boder size to the element.

Browser Support :-

Basically , the SVG works for all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1 but some of its features do no support IE 9 like filters and shadow.

Conclusion :-

As SVG is a great technology that is used for creating vector graphics and we can even add animation over it and therefore it is easy to understand and work.