HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 SVG

SVG stands for Scalable Vector Graphics, it is used to define graphics for the Web.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

The HTML <svg> element defines a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images


SVG Rectangle

Rin code

SVG Circle

Rin code

SVG Line

Rin code

SVG Ellipse

Rin code

SVG Polygon

Rin code

SVG Polyline

Rin code

SVG Gradients

Rin code

Difference Between SVG and Canvas

The HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web, but they are fundamentally different. The following table summarizes some of the basic differences between these two elements, which will help you to understand how to use the Canvas and SVG elements effectively and appropriately.

SVG Canvas
Multiple graphical elements, which become the part of the DOM Single HTML element similar to <img> in behavior
Modified through script and CSS Modified through script only
Better scalability — can be printed with high quality at any resolution Poor scalability — not suitable for printing on higher resolution
Support for event handlers No support for event handlers
It works perfectly with apps tagged with large rendering areas like Google Maps With Canvas, you always have the option of saving images as .png or .jpg