Hello readers, Today in my blog I will discuss Scaleable Vector Graphics Images.

Introduction:-

• It is an XML-based vector images created for 2D graphics.
• Using the Vector Graphics we can create geometric objects such as lines and curves.
• It is also used to create graphical Images with the help of XML grammar to represent textual information.
• SVG provides a structured description of mixed vector graphics that can be used in a function.

So basically, SVG is a web format in which the content developers can create a 2-D graphics using XML.

Why should we use SVG ?

• It has small size files that can easily be compressed.
• We can easily change its size when required.
• On retina display, it looks great.
• It uses Filters and interactivity as design controls.
• It uses pure XML language.
• It has a high quality when taken to any resolution.
• Anyone can easily create these images at any text editor.

The three basic rules of XML and SVG syntax are as follows :-

• All tags that are used in XML and SVG are case sensitive.
• Every tag needs to be closed if started.

SVG Icons :- The SVG Icons are basically SVG images that are used inside various web applications or mobile applications.

These Icons can be used as logos inside a web page.

Advantages of SVG Icons :- The best advantage of using SVG Icons is that we can easily change its size and can display them in an application where ever needed.

SVG Coordinate System :- The SVG Coordinate System starts from upper left corner such that the point x=0 and y=0.

Now for creating the SVG Images we need SVG Elements below is the list of few elements such as circle, ellipse, clipPath, filter, line, pattern, path, polygon, gradient, llinear gradient rect, text, symbol, image etc.

So, the root element that is used in SVG Images is the <svg> element. Below is the syntax for it :-
 

copytext

<svg xmlns="http://www.w3.org/2000/svg"
 
xmlns:xlink="http://www.w3.org/1999/xlink">
 
</svg>
 
 

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</svg>

Here is an example showing the use of SVG :-

copytext

<svg xmlns="http://www.w3.org/2000/svg"
 
xmlns:xlink="http://www.w3.org/1999/xlink">
 
<rect x="10" y="10" height="100" width="100"
 
style="stroke:#ff0000; fill: #0000ff"/>
 
</svg>
 
 

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<rect x="10" y="10" height="100" width="100"

style="stroke:#ff0000; fill: #0000ff"/>

</svg>

In this example, I have created a simple rectangle with 100px height and width. To style it I have used filter and stroke.

For creating the SVG Images there are know various software introduced which can help the web developer for making SVG Images. Below is the list of these softwares :-

• RAW
• Inkscape
• SVG.js
• Method Draw
• Snap.svg

Conclusion :-

The SVG Images works overall modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.