Introduction

Scalable Vector Graphics (SVG) is a standard from World Wide Web Consortium (W3C). SVG is a graphics format in which images or shapes are specified in XML and then rendered by an SVG viewer. It describes the ways so that images or vector graphics can be drawn for use on the web. It is used to draw two-dimensional vector graphics.
SVG
As already said, it is a recommended standard from the W3C that describes how to create vector graphics using a markup language because since it can interpret XML, it can also interpret SVG and helps to check the structures of a SVG document or read it to bring out useful information. Since it is built on XML it also makes it simpler to produce SVG programmatically.
Since it is a “Vector Graphics”, the shapes to be displayed are stored as vectors or vector-like structures or we can say as numbers not as pixels.
Since it is “Scalable”, the viewer can scale the SVG image up and down in size without losing its quality because graphics are defined as numbers instead of pixels. Scaling the image means just multiplying or dividing numbers to define the SVG shapes.
The following are points to remember about SVG:
SVG Uses
As it is a vector graphics format, it is most commonly used for the following:
SVG Viewer
SVG is best viewed in Firefox and Opera web browsers, but Internet Explorer needs an SVG viewer plugin installation for viewing SVG.
SVG Advantages
SVG disadvantages
Embed your SVG XML directly into HTML pages:
SVG Example: Rectangle
  1. <html>
  2. <body>
  3. <h1>SVG IMAGE</h1>
  4. <svg width="300" height="110">
  5. <rect width="200" height="100" style="fill:#c80000;stroke-width:3;stroke:#000001">
  6. </svg>
  7. </body>
  8. </html>
Output
output image
SVG Example: Circle
  1. <html>
  2. <body>
  3. <h1>SVG IMAGE</h1>
  4. <svg width="200" height="200">
  5. <circle cx="70" cy="70" r="50" stroke="blue" stroke-width="5" fill="orange" />
  6. </svg>
  7. </body>
  8. </html>
Output
Output
SVG Example: Ellipse
  1. <html>
  2. <body>
  3. <h1>SVG IMAGE</h1>
  4. <svg height="150" width="400">
  5. <ellipse cx="130" cy="60" rx="100" ry="50" style="fill:lightgreen;stroke:purple;stroke-width:2" />
  6. Sorry, your browser does not support inline SVG.
  8. </svg>
  9. </body>
  10. </html>
Output:
SVG Image
Want to read more...
Thank you, keep learning and sharing.