Pr.Pg Next Pg

<SVG>..</SVG> tag tutorials

  • SVG stands for Scalable Vector graphics, this is similar to the vector-based family of graphics, and they are different from raster-based graphics such as JPEG, GIF, and PNG, which store the color definition for each pixel in an array of data.

  • SVG defines the graphics in XML format.

  • SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

  • There are many advantages of SVG over raster-based graphics such as below:

    1. SVG graphics are created using mathematical formulas that require far less data to be stored in the source file because you don't have to store the data for each individual pixel.

    2. The SVG source file size tends to be smaller, so SVG graphics load faster than raster-base graphics and can be used in less bandwidth.

    3. SVG images are rendered by the browser and can be drawn programmatically. They can be changed dynamically, making them especially suited for data-driven applications, such as charts.

    4. SVG images can be printed with high quality at any resolution.

    5. SVG images can be zoomed without degradation.

    6. SVG is supported by all major browser such as Google Chrome, Firefox, Internet Explorer, Opera and Safari.



<svg attribute=value..>

<line attribute=value.. />


<!-- different shapes -->


<circle attribute=value.. />

<polygon attribute=value.. />




Example: HTML SVG program to create line, circle and polygon

Example: HTML SVG program to create rectangle and ellipse

Pr.Pg border                                              Next Pg