HTML SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily.

SVG is a XML based format to draw vector images. It is used to draw two dimentional vector images.

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define graphics for the Web
  • SVG is a W3C recommendation

Browser Support SVG

It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.

Element Chrome Edge Firefox Safari Opera
<svg> 4.0 9.0 3.0 3.2 10.1

HTML SVG Element

The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle & Rectangle

<svg width="100" height="100">
     <circle cx="50" r="40" stroke="pink" stroke-width="4" fill="red" />
</svg>
<svg width="200" height="100">
     <rect width="200" height="100" style="fill: green; stroke-width: 5; stroke: black" />
</svg>

Output

Rounded Rectangle

<svg width="400" height="180">
<rect  width="150" height="150" x="50" rx="20" ry="20" style="fill: pink; stroke: blue; stroke-width: 5; opacity: 0.7" />
</svg>

SVG Advantages

  • Use any text editor to create and edit SVG images.
  • Being XML based, SVG images are searchable, indexable and can be scripted and compressed.
  • SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized
  • Good printing quality at any resolution
  • SVG is an Open Standard

Comparison between Canvas and SVG

Canvas SVG
Canvas not support for event handlers SVG support for event handlers
Resolution dependent Resolution independent
Poor text rendering capabilities Best suited for applications with large rendering areas
Well suited for graphic-intensive games Not suited for game applications

To learn more about SVG and Canvas

HTML Canvas Tutorials

HTML SVG Tutorials

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved