HTML SVG

SVG stands for Scalable Vector Graphics

The <svg> element is used to embed SVG graphics in an HTML document.

The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector based graphics for the web.

The <svg> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="tomato" stroke-width="2" fill="black" />
</svg>

Try this code ❯

Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

SVG Circle

Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45" stroke="red" stroke-width="4" fill="green" />
</svg>

Try this code ❯

SVG Rectangle

Example

<svg width="200" height="100">
  <rect width="200" height="100" fill="red" stroke="green" stroke-width="10" />
</svg>

Try this code ❯

Key Differences between SVG and Canvas

These are some of the major difference:

SVG	Canvas
SVG does not depend on the resolution, which means it is resolution-independent. If we enlarge the image, it will not lose its shape.	Canvas is resolution-dependent. If the image is enlarged, it will start reflecting the pixels of the image.
SVG refers to shape-based.	Canvas refers to pixel-based.
SVG is best suited for applications with large rendering areas like google maps.	Canvas has poor text rendering capabilities.
SVG becomes slow rendering if it is complex because anything that uses the Document object model (DOM) at great extent will become slow.	Canvas provides the high-performance element best suited for rendering faster graphics like image editing, an application that requires pixel manipulation.
SVG refers to as powerful in a browser as it is vector-based and provides a high-quality experience. It can be paired with multimedia, audio, and videos.	Canvas is mainly powered in drawing shapes, graphs and complex photo compositions.
SVG can be modified through script and CSS.	Canvas can be modified through script only.
SVG images cannot be saved in other formats.	In Canvas, you can save the resulting images in .png and .jpg format.
SVG is mainly recommended for use in full-screen user interfaces.	Canvas is not being recommended for large screens.
The Size of a file for SVG can grow faster if the object has a large number of small elements.	For canvas images, the size of the file not increased much.
SVG is manly better for an application which is having fewer elements or items.	Canvas is mainly better for thousands of objects and careful manipulation.
SVG graphics are mainly developed using mathematical functions and formulas that requires fewer data to be stored in the source file.	In Canvas, to draw the graphics, there are many strategies to develop.
In SVG, the event model or user interaction is abstracted.	For Canvas, the event model or user interaction is granular.
SVG provides better scalability as it can be printed with high quality at any resolution.	Canvas provides poor scalability as it is not suitable for printing higher resolution.
SVG provides better performance with a larger surface or a smaller number of objects.	Canvas provides better performance with a smaller surface or a large number of objects.
The SVG syntax is easy to understand, but it is impossible to read the graphics object.	Canvas syntax is very simple and easy to read.

Comparison of Canvas and SVG

Comparison	SVG	Canvas
Definition	It is an XML based vector image format for interactivity.	It is an element in HTML to draw graphics on web pages.
Format	It uses a vector image format.	It uses the bitmap image format.
Flexible	SVGs are more flexible as we can expand the size beyond their natural	Canvas images are not that flexible.
Event Handlers	It provides any support for event handlers.	It does not provide support for event handlers.
Gaming	It does not suit for any gaming application.	These are well suited for gaming applications
Program	SVG refers to draw the program.	Canvas refers to paint the program.