What is SVG and why is it used ?

  • SVG- Scalar Vector Graphics.
  • It is a popular tool for displaying two-dimensional charts, graphics and illustrations on websites.
  • Without losing any of its resolution it can be scaled up or down.
  • It can be animated in every element and attribute.
  • SVG images are stored in XML text files and defined in a Vector graphics.
  • SVG files can be compressed, scripted, indexed, and searched and  scaled in size without loss of quality.
  • They are rendered by most used web browsers and Then the XML text files can be created and edited with vector graphics editors or  text editors.
  • At any resolution SVG images can be printed with high quality.
  • If they are zoomed or resized SVG graphics do NOT lose any quality.

Syntax:

<!DOCTYPE html>
<html>
   <body>
      <h1>My first SVG</h1>
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="pink" />
         Sorry, your browser does not support inline SVG.
      </svg>
   </body>
</html>

 

Output:

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

What is the difference between SOAP and REST ?

                  SOAP                    REST It is a protocol. It is an architectural style. SOAP- Simple Object Access Protocol. REST- Representational State Transfer. It can’t use REST because it is a…
View Answer

What is Flexbox ?

It is a one-dimensional layout model that has efficient and flexible layouts with distributed spaces among items to control their alignment structure in CSS . It is a layout model…
View Answer

What is Semantic HTML ?

It is essential to understand the meaning of words during communication in any language. It becomes more critical and provides more semantic elements which make it easy to understand the…
View Answer