HTML SVG Tag

The SVG is a two-dimensional vector graphics that based on XML. It’s a pure XML vector based graphic. SVG stands for Scalable Vector Graphics. We use SVG to create and display 2D Graphics on your website.

SVG Advantages

  • SVG file are optimized and small
  • Persist Image quality on retina displays
  • Images don’t lose quality when the image scaled, zoomed or even resized
  • W3C recommendation
  • Can be created with text editor
  • SVG files are XML file
  • Can be searched, indexed, scripted, and compressed
  • Not required a fancy equipment to create SVG images, can create withtext editor

Useful HTML Tag for SVG

  • <svg>
  • <circle>
  • <rect>
  • <line>
  • <ellipse>
  • <polyline>
  • <polygon>
  • <path>

Use SVG To Draw Circle

<svg width="100" height="100">
     <rect width="100" height="100" style="fill:blue;"/>
</svg>

Use SVG To Draw Rectangle

<svg width="100" height="100">
     <rect width="100" height="100" style="fill:blue;"/>
</svg>

Use SVG To Draw Line

<svg height="80" width="200">
    <line x1="0" y1="0" x2="100" y2="50" style="stroke:rgb(0,0,255);stroke-width:2" />
</svg>

Browser Compatibility

BrowserChromeEdgeFirefoxOperaSafari
<svg>4+Yes3+10+4+