Post
Ask Question

SVG Overview in HTML5

 
This article will provide some light on a tag of HTML5 named SVG. SVG stands for “Scalable Vector Graphics”. It is basically used to define vector-based graphics for the web. A very good advantage of the SVG is that if we zoom or resize an image then there is no loss of quality of the image.

SVG always defined the graphics in XML format. Using SVG we can animate every attribute in the file.


We can use this SVG tag inside the HTML tag or outside. If we use SVG from outside then for linking this SVG page to an HTML page we use:
 
Now we move to do some work on SVG.
 
1. How to make a rectangle using SVG
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">    
  3. <!--Scalable Vector Graphic-->    
  4. <svg version="1.1"     
  5.      xmlns="http://www.w3.org/2000/svg"    
  6.      xmlns:xlink="http://www.w3.org/1999/xlink"    
  7.      xmlns:ev="http://www.w3.org/2001/xml-events"         
  8.      baseProfile="full">    
  9.      <rect x="10" y="10" height="100" width="100"    
  10.           style="stroke:#333; stroke-width:4; fill:#0F0"/>    
  11. </svg>  
Output
 
 
So here we can see examples of an SVG in which there is no loss of image quality after zooming the image.
 
2. Make text using SVG
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">    
  3. <!--Scalable Vector Graphic-->    
  4. <svg version="1.1"     
  5.      xmlns="http://www.w3.org/2000/svg"    
  6.      xmlns:xlink="http://www.w3.org/1999/xlink"    
  7.      xmlns:ev="http://www.w3.org/2001/xml-events"         
  8.      baseProfile="full">    
  9.      <text x="20" y="40"    
  10.     style="stroke:none; fill:#000000;">    
  11.     sanjay kumar singh    
  12.     </text>    
  13. </svg>   
    Output
     
     
    Here we can also see that there is no loss of image quality after zooming the image.
     
    INKSCAPE software
     
    Inkscape is a professional vector graphics editor for Windows, Mac OS X, and Linux. It's free and open source.
     
     
     
    Here I make a man using the Inkscape tool. Code that is automatically generated by the Inkscape tool to only make the man:
    1. <SVG    
    2.    xmlns:dc="http://purl.org/dc/elements/1.1/"    
    3.    xmlns:cc="http://creativecommons.org/ns#"    
    4.    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"    
    5.    xmlns:SVG="http://www.w3.org/2000/SVG"    
    6.    xmlns="http://www.w3.org/2000/SVG"    
    7.    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    
    8.    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    
    9.    width="744.09448819"    
    10.    height="1052.3622047"    
    11.    id="SVG3787"    
    12.    version="1.1"    
    13.    inkscape:version="0.48.5 r10040"    
    14.    sodipodi:docname="drawing.SVG">  
    15.    <defs    
    16.       id="defs3789" />  
    17.    <sodipodi:namedview    
    18.       id="base"    
    19.       pagecolor="#ffffff"    
    20.       bordercolor="#666666"    
    21.       borderopacity="1.0"    
    22.       inkscape:pageopacity="0.0"    
    23.       inkscape:pageshadow="2"    
    24.       inkscape:zoom="0.35"    
    25.       inkscape:cx="-70.714286"    
    26.       inkscape:cy="520"    
    27.       inkscape:document-units="px"    
    28.       inkscape:current-layer="layer1"    
    29.       showgrid="false"    
    30.       inkscape:window-width="1366"    
    31.       inkscape:window-height="705"    
    32.       inkscape:window-x="-8"    
    33.       inkscape:window-y="-8"    
    34.       inkscape:window-maximized="1" />  
    35.    <metadata    
    36.       id="metadata3792">  
    37.       <rdf:RDF>  
    38.          <cc:Work    
    39.             rdf:about="">  
    40.             <dc:format>image/SVG+xml</dc:format>  
    41.             <dc:type    
    42.                rdf:resource="http://purl.org/dc/dcmitype/StillImage" />  
    43.             <dc:title></dc:title>  
    44.          </cc:Work>  
    45.       </rdf:RDF>  
    46.    </metadata>  
    47.    <g    
    48.       inkscape:label="Layer 1"    
    49.       inkscape:groupmode="layer"    
    50.       id="layer1">  
    51.       <path    
    52.          sodipodi:type="arc"    
    53.          style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#010900;stroke-opacity:0.96296297"    
    54.          id="path4305"    
    55.          sodipodi:cx="534.28571"    
    56.          sodipodi:cy="360.93362"    
    57.          sodipodi:rx="148.57143"    
    58.          sodipodi:ry="142.85715"    
    59.          d="m 682.85713,360.93362 a 148.57143,142.85715 0 1 1 -297.14285,0 148.57143,142.85715 0 1 1 297.14285,0 z"    
    60.          transform="translate(-185.71429,-145.71428)" />  
    61.       <path    
    62.          sodipodi:type="arc"    
    63.          style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#0109e3;stroke-opacity:0.96296297"    
    64.          id="path4315"    
    65.          sodipodi:cx="188.57143"    
    66.          sodipodi:cy="200.93361"    
    67.          sodipodi:rx="22.857143"    
    68.          sodipodi:ry="40"    
    69.          d="m 211.42857,200.93361 a 22.857143,40 0 1 1 -45.71429,0 22.857143,40 0 1 1 45.71429,0 z"    
    70.          transform="matrix(0.57125058,0,0,1,90.649876,0)" />  
    71.       <path    
    72.          sodipodi:type="arc"    
    73.          style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#0109e3;stroke-opacity:0.96296297"    
    74.          id="path4317"    
    75.          sodipodi:cx="492.85715"    
    76.          sodipodi:cy="190.93361"    
    77.          sodipodi:rx="15.714286"    
    78.          sodipodi:ry="35.714287"    
    79.          d="m 508.57143,190.93361 a 15.714286,35.714287 0 1 1 -31.42857,0 15.714286,35.714287 0 1 1 31.42857,0 z" />  
    80.       <path    
    81.          sodipodi:type="arc"    
    82.          style="opacity:0.95999995;fill:#0000ca;fill-opacity:1;stroke:#0109e3;stroke-opacity:0.96296297"    
    83.          id="path4319"    
    84.          sodipodi:cx="284.28571"    
    85.          sodipodi:cy="180.93361"    
    86.          sodipodi:rx="18.571428"    
    87.          sodipodi:ry="17.142857"    
    88.          d="m 302.85713,180.93361 a 18.571428,17.142857 0 1 1 -37.14285,0 18.571428,17.142857 0 1 1 37.14285,0 z" />  
    89.       <path    
    90.          sodipodi:type="arc"    
    91.          style="opacity:0.95999995000000005;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296296999999997"    
    92.          id="path4321"    
    93.          sodipodi:cx="280"    
    94.          sodipodi:cy="179.50504"    
    95.          sodipodi:rx="22.857143"    
    96.          sodipodi:ry="21.428572"    
    97.          d="m 302.85714,179.50504 a 22.857143,21.428572 0 1 1 -45.71428,0 22.857143,21.428572 0 1 1 45.71428,0 z"    
    98.          transform="matrix(1.3288976,0,0,0.54378156,-84.573681,72.117398)" />  
    99.       <path    
    100.          sodipodi:type="arc"    
    101.          style="opacity:0.95999995;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"    
    102.          id="path4323"    
    103.          sodipodi:cx="395.71429"    
    104.          sodipodi:cy="175.21933"    
    105.          sodipodi:rx="27.142857"    
    106.          sodipodi:ry="11.428572"    
    107.          d="m 422.85715,175.21933 a 27.142857,11.428572 0 1 1 -54.28571,0 27.142857,11.428572 0 1 1 54.28571,0 z"    
    108.          transform="matrix(1,0,0,1.0610854,2.8571429,-16.624552)" />  
    109.       <path    
    110.          sodipodi:type="arc"    
    111.          style="opacity:0.95999995;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"    
    112.          id="path4325"    
    113.          sodipodi:cx="347.14285"    
    114.          sodipodi:cy="222.36218"    
    115.          sodipodi:rx="7.1428571"    
    116.          sodipodi:ry="30"    
    117.          d="m 354.28571,222.36218 a 7.1428571,30 0 1 1 -14.28571,0 7.1428571,30 0 1 1 14.28571,0 z" />  
    118.       <path    
    119.          sodipodi:type="arc"    
    120.          style="opacity:0.95999995;fill:#71ecca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"    
    121.          id="path4327"    
    122.          sodipodi:cx="347.14285"    
    123.          sodipodi:cy="290.93362"    
    124.          sodipodi:rx="75.714287"    
    125.          sodipodi:ry="15.714286"    
    126.          d="m 422.85714,290.93362 a 75.714287,15.714286 0 1 1 -151.42857,0 75.714287,15.714286 0 1 1 151.42857,0 z"    
    127.          transform="matrix(0.79802031,0,0,0.64883286,68.765695,96.647987)" />  
    128.       <path    
    129.          sodipodi:type="arc"    
    130.          style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296296999999997"    
    131.          id="path4339"    
    132.          sodipodi:cx="348.57144"    
    133.          sodipodi:cy="625.2193"    
    134.          sodipodi:rx="202.85715"    
    135.          sodipodi:ry="235.71428"    
    136.          d="m 551.42859,625.2193 a 202.85715,235.71428 0 1 1 -405.7143,0 202.85715,235.71428 0 1 1 405.7143,0 z"    
    137.          transform="matrix(0.94592035,0,0,1,21.711865,-34.285714)" /> 
    138.       <rect    
    139.          style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"    
    140.          id="rect4341"    
    141.          width="17.142857"    
    142.          height="182.85715"    
    143.          x="262.85715"    
    144.          y="803.79077" />  
    145.       <rect    
    146.          style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"    
    147.          id="rect4345"    
    148.          width="80"    
    149.          height="14.285714"    
    150.          x="194.28572"    
    151.          y="980.93359" />  
    152.       <rect    
    153.          style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-width:1.03391075;stroke-opacity:0.96296297"    
    154.          id="rect4347"    
    155.          width="18.325224"    
    156.          height="182.85715"    
    157.          x="405.21429"    
    158.          y="809.50507" />  
    159.       <rect    
    160.          style="opacity:0.95999995;fill:#0709ca;fill-opacity:1;stroke:#01f3e3;stroke-opacity:0.96296297"    
    161.          id="rect4349"    
    162.          width="97.14286"    
    163.          height="14.285714"    
    164.          x="414.28571"    
    165.          y="975.2193" />  
    166.       <rect    
    167.          style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#010be3;stroke-opacity:0.96296299"    
    168.          id="rect4351"    
    169.          width="148.57143"    
    170.          height="20"    
    171.          x="48.57143"    
    172.          y="480.93362" />  
    173.       <rect    
    174.          style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#0105e3;stroke-width:0.76282506999999999;stroke-opacity:0.96296299"    
    175.          id="rect4353"    
    176.          width="14.963196"    
    177.          height="131.42857"    
    178.          x="48.343803"    
    179.          y="500.93362" />  
    180.       <rect    
    181.          style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#0116e3;stroke-opacity:0.96296299"    
    182.          id="rect4357"    
    183.          width="145.71428"    
    184.          height="22.857143"    
    185.          x="517.14288"    
    186.          y="478.07648"    
    187.          ry="0" />  
    188.       <rect    
    189.          style="opacity:0.95999995000000005;fill:#0709ca;fill-opacity:1;stroke:#0116e3;stroke-width:0.96534306000000003;stroke-opacity:0.96296299"    
    190.          id="rect4361"    
    191.          width="20.499195"    
    192.          height="129.88486"    
    193.          x="637.14288"    
    194.          y="348.98215" />  
    195.    </g>  
    196. </SVG> 
    Output
     
     

    Conclusion

     
    In this article, we studied SVG Overview in HTML5.


    Similar Articles