• SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other W3C standards such as the DOM and XSL
  • SVG - Circle

      Sorry, your browser does not support inline SVG.
    <svg height="100" width="100" >
    <circle cx="150" cy="150" r="130" stroke="black" stroke-width="3" fill="red" />
    Sorry, your browser does not support inline SVG.  
    </svg> 
    

    SVG - Concentric Circle

    <svg height ="300">
    <circle cx="150" cy="150" r="130" stroke="" stroke-width="2" fill="red" />
    <circle cx="150" cy="150" r="100" stroke="" stroke-width="2" fill="blue" />
    <circle cx="150" cy="150" r="70" stroke="" stroke-width="2" fill="green" />
    <circle cx="150" cy="150" r="40" stroke="" stroke-width="2" fill="violet" />
    </svg> 
    

    SVG Rectangle

    Sorry, your browser does not support inline SVG.
    <svg width="400" height="110">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
    Sorry, your browser does not support inline SVG.  
    </svg>
    

    SVG Rectangle With Opacity

    Sorry, your browser does not support inline SVG.
    <svg width="400" height="180">
    <rect x="20" y="10" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9">
    Sorry, your browser does not support inline SVG.  
    </svg>
    

    SVG Rectangle With Opacity Sample 2

    Sorry, your browser does not support inline SVG.
    <svg width="400" height="180">
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5">
      Sorry, your browser does not support inline SVG.  
    </svg>
    

    SVG Rectangle With Rounded Corners

    Sorry, your browser does not support inline SVG.
    <svg width="400" height="180">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
      Sorry, your browser does not support inline SVG.
    </svg>
    
    

    SVG Ellipse

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="250">
      <ellipse cx="150" cy="150" rx="130" ry="70" style="fill:yellow;stroke:purple;stroke-width:2" />
      <ellipse cx="150" cy="150" rx="100" ry="50" style="fill:green;stroke:black;stroke-width:2" />
      <ellipse cx="150" cy="150" rx="70" ry="30" style="fill:blue;stroke:black;stroke-width:2" />	  
    </svg>
    

    SVG polygon 4 Sides

    Sorry, your browser does not support inline SVG.
    <svg height="250" width="500">
      <polygon points="10,100 300,10 380,200 10,180" style="fill:gray;stroke:purple;stroke-width:4" />
      Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG polygon

    <svg xmlns="" version="1.1" height="190">
      <polygon points="100,10 40,180 190,60 10,60 160,180"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </svg>
    

    SVG polyline

    Sorry, your browser does not support inline SVG.
    <svg height="200" width="500">
    <polyline points="20,20 60,20 60,40 100,40, 100,140 240,140" style="fill:none;stroke:black;stroke-width:5" />
    Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG Path- Sample 1

    Sorry, your browser does not support inline SVG.
    <svg height="400" width="400">
      <path d="M200 10 L400 350 L10 350 Z" />
      Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG Path- Quadratic Bezier 1

    A B C
    <svg height="400" width="450">
      <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
      <path id="lineBC" d="M 250 50 l 150 300" stroke="blue"  stroke-width="3" fill="none" />
      <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"  fill="none" />
      <path d="M 100 350 q 150 -300 300 0" stroke="black"  stroke-width="5" fill="none" />
      <!-- Mark relevant points -->
      <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
      </g>
      <!-- Label the points -->
      <g font-size="30" font="sans-serif" fill="black" stroke="none"
      text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
      </g>
    </svg>
    

    SVG path stroke

    <svg height="100">
    	<g fill="none">
    		<path stroke ="red"  stroke-width="4" d="M5 20 l215 0" />
    		<path stroke ="blue" stroke-width="6" d="M5 40 l215 0" />
    		<path stroke ="lime" stroke-width="8" d="M5 60 l215 0" />
    	</g>
    </svg>
    

    SVG path stroke-dasharray

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
      <g fill="none" stroke="black" stroke-width="4">
    	<path stroke-dasharray="15,5" d="M5 20 l215 0" />
    	<path stroke-dasharray="10,10" d="M5 40 l215 0" />
    	<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
      </g>
    </svg>
    

    SVG path stroke-width

    Sorry, your browser does not support inline SVG.
    <svg height="80" width="300">
      <g fill="none" stroke="black">
        <path stroke-width="2" d="M5 20 l215 0" />
        <path stroke-width="4" d="M5 40 l215 0" />
        <path stroke-width="6" d="M5 60 l215 0" />
      </g>
      Sorry, your browser does not support inline SVG.
    </svg>
    
    

    SVG path stroke-linecap

    Sorry, your browser does not support inline SVG.
    <svg height="80" width="300">
      <g fill="none" stroke="black" stroke-width="6">
        <path stroke-linecap="butt" d="M5 20 l215 0" />
        <path stroke-linecap="round" d="M5 40 l215 0" />
        <path stroke-linecap="square" d="M5 60 l215 0" />
      </g>
      Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG Text

    This is a sample SVG Text! Sorry, your browser does not support inline SVG.
    <svg height="30" width="200">
      <text x="0" y="15" fill="red">This is a sample SVG Text!</text>
      Sorry, your browser does not support inline SVG.
    </svg>
    
    

    SVG Text Rotate

    This is a rotated sample SVG Text! Sorry, your browser does not support inline SVG.
    <svg height="200" width="400">
      <text x="0" y="15" fill="red"  transform="rotate(30,10,10)">This is a rotated sample SVG Text!</text>
      Sorry, your browser does not support inline SVG.
    </svg>
    
    

    SVG Text On Several Lines

    Several lines: First line. Second line. Sorry, your browser does not support inline SVG.
    <svg height="90" width="200">
     <text x="10" y="20" style="fill:red;">Several lines:
     <tspan x="40" y="45">First line.</tspan>
     <tspan x="40" y="70">Second line.</tspan>
     </text>
      Sorry, your browser does not support inline SVG.
    </svg>
    
    

    SVG Text As a Link

          This svg text is a link   Sorry, your browser does not support inline SVG.
    <svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
      <a xlink:href="http://www.knowstack.com" target="_blank">
        <text x="0" y="15" fill="blue">This svg text is a link</text>
      </a>
      Sorry, your browser does not support inline SVG.
    </svg>
    

    Horizontal Linear Gradient from white to black

    Sorry, your browser does not support inline SVG.
    <svg height="150" width="400">
      <defs>
        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="300" height="100" fill="url(#gradient1)" />
      Sorry, your browser does not support inline SVG.
    </svg>
    

    Vertical Linear Gradient from red to black

    Sorry, your browser does not support inline SVG.
    <svg height="120" width="400">
      <defs>
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="300" height="100" fill="url(#gradient2)" />
      Sorry, your browser does not support inline SVG.
    </svg>
    

    Vertical Linear Gradient from red to black and text inside SVG

    This is a text inside SVG Sorry, your browser does not support inline SVG.
    <svg height="120" width="400">
      <defs>
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="300" height="100" fill="url(#gradient2)" />
      <text fill="#ffffff" font-size="20" font-family="Verdana" x="10" y="50">This is a text inside SVG</text>
      Sorry, your browser does not support inline SVG.
    </svg>
    

    Radial Gradient from white to black

    Sorry, your browser does not support inline SVG.
    <svg height="150" width="500">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
        </radialGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG Blur Filter

    Sorry, your browser does not support inline SVG.
    <svg height="150" width="250">
      <defs>
        <filter id="f1" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="7" />
        </filter>
      </defs>
      <rect width="200" height="100" stroke="red" stroke-width="3" fill="blue" filter="url(#f1)" />
      Sorry, your browser does not support inline SVG.  
    </svg>
    

    SVG Glaussian Blur & Offset Filter

    Sorry, your browser does not support inline SVG.
    <svg height="150" width="250">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur stdDeviation="5" />
          <feOffset dx="5" dy="5" />
        </filter>
      </defs>
      <rect width="200" height="100" fill="grey" filter="url(#filter)" />
      <rect width="200" height="100" fill="yellow" stroke="black" />
      Sorry, your browser does not support inline SVG.  
    </svg>
    

    SVG Offset, Glaussian , Blend

    offset in="SourceGraphic" or in = "SourceAlpha". On using SourceAlpha the shadow will be in black

    Sorry, your browser does not support inline SVG.
    <svg height="140" width="140">
      <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
          <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
      <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
      Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG Animation

    Sorry, your browser does not support inline SVG.
    <svg width="300" height="300">
      <rect x="20" y="20" width="250" height="250" style="fill:blue">
        <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
      </rect>
      Sorry, your browser does not support inline SVG.  
    

    SVG Animation - A growing Rectangle that changes color

    Sorry, your browser does not support inline SVG.
    <svg width="300" height="300">
      <rect id="rec" x="10" y="10" width="300" height="100" style="fill:lime"> 
        <animate attributeName="x" attributeType="XML" begin="0s" dur="5s" fill="freeze" from="200" to="0" repeatCount="indefinite"/> 
        <animate attributeName="y" attributeType="XML" begin="0s" dur="5s" fill="freeze" from="100" to="0" repeatCount="indefinite"/> 
        <animate attributeName="width" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="100" to="300" repeatCount="indefinite"/> 
        <animate attributeName="height" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="10" to="200" repeatCount="indefinite"/> 
        <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
      </rect>
      Sorry, your browser does not support inline SVG.
    </svg>
    

    SVG Animation - Rectangles changing colors

    Sorry, your browser does not support inline SVG.
    <svg width="200" height="300">
      <rect x="10" y="20" width="90" height="60">
        <animate Color id="a1" attributeName="fill" from="red" to="blue" dur="3s" />
      </rect>
      <rect x="10" y="120" width="90" height="60">
        <animate Color id="a2" attributeName="fill" from="blue" to="yellow" begin="a1.end" dur="3s" />
      </rect>
      <rect x="10" y="220" width="90" height="60">
        <animate Color id="a3" attributeName="fill" from="yellow" to="green" begin="a2.end" dur="3s" />
      </rect>
      Sorry, your browser does not support inline SVG.  
    </svg>
    

    SVG Sample 1

    Layer 1
    <svg width="640" height="400" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <rect stroke="#0a0000" id="svg_1" height="88.999989" width="18.799999" y="210.8" x="101" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_5" height="124.99999" width="18.799999" y="174.900006" x="130.600006" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_6" height="134.99999" width="18.799999" y="164.50001" x="160.600006" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_7" height="157.399984" width="18.799999" y="142.100016" x="190.200005" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_8" height="131.39999" width="18.799999" y="168.100009" x="220.199989" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_9" height="110.599993" width="18.799999" y="189.400004" x="250.2" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_10" height="125.799988" width="18.799999" y="174.300014" x="279.800006" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_11" height="138.199982" width="18.799999" y="161.500008" x="309.800006" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_12" height="101.79999" width="18.799999" y="197.899998" x="339.400005" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <rect stroke="#0a0000" id="svg_13" height="198.199997" width="18.799999" y="101.499997" x="369.399989" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#5fbf00"/>
      <line stroke="#0a0000" id="svg_18" y2="299" x2="81" y1="30.000003" x1="81" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="none"/>
      <line stroke="#0a0000" transform="rotate(89.8749 255.002 299.413)" id="svg_19" y2="473.91475" x2="255.002" y1="124.910563" x1="255.002" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="none"/>
     </g>
    </svg>
    

    SVG Sample 2

    Layer 1
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <path stroke="#000000" id="svg_3" d="m30.603134,49.615082c1.522995,-1.237823 2.000549,-2.028915 2.000549,-2.028915l0.104034,0c0,0 -0.059692,1.086563 -0.059692,2.173172l0,22.518097l-9.156845,0l0,4.239899l23.841217,0l0,-4.239899l-9.037476,0l0,-30.614914l-5.167648,0l-9.919205,8.096817l3.525284,3.064972l3.869781,-3.209229zm21.554153,24.239548c0,0.847473 0.119385,1.726883 0.298462,2.662704l26.709854,0l0,-4.239899l-20.539352,0c0.104004,-7.951904 19.896378,-9.723267 19.896378,-21.186432c0,-6.024139 -5.452499,-10.025162 -13.08461,-10.025162c-9.337631,0 -13.101654,6.614334 -13.101654,6.614334l4.287628,2.411926c0,0 2.928299,-4.440842 8.39447,-4.440842c4.347336,0 7.454742,2.317993 7.454742,5.772507c0,8.215805 -20.315918,9.993607 -20.315918,22.430862zm-20.375671,-72.461609l-9.782745,0l0,13.730804l9.782745,0l0,-13.730804zm53.851242,4.799255l0,13.052368l-19.582565,0l0,-13.052368l-29.368744,0l0,13.039459l-19.56723,0l0,-13.039459l-11.846405,0l0,89.20076l92.180634,0l0,-89.20076l-11.815689,0zm6.931137,85.080017l-82.396164,0l0,-61.399979l82.396164,0l0,61.399979zm-11.83107,-89.879272l-9.784424,0l0,13.730804l9.784424,0l0,-13.730804z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" fill="#191919"/>
     </g>
    </svg>