HTML Graphics

SVG (Scalable Vector visuals), the HTML5 <canvas> element, and CSS are some of the technologies used for creating visuals in HTML. An outline of each technique’s basic application in creating graphics is provided below:

We have already knew the HTML Image and their attributes.

Table Of Contents

HTML Graphics

SVG(Scalable Vector Graphics)

SVG is a markup language for vector graphics that is based on XML. Making scalable and resolution-independent visuals is an excellent use for it.

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

This code draws a red circle with a black border.

HTML5 Canvas

JavaScript is used to create visuals on the fly using the<canvas>element. It’s an effective tool for making intricate and dynamic images for animations, games, and data visualizations.

See the Pen
HTML5 Canvas by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.

This code creates a blue rectangle on a canvas.

CSS

Although CSS is mostly used to style HTML components, it may also be used to make basic animations and shapes.

See the Pen
CSS Graphics by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.

This code creates a green circle using CSS.

Combining Methods

For more intricate visuals, you can mix and match SVG, Canvas, and CSS. For static shapes, for instance, you could use SVG and then animate them using CSS or JavaScript.

Tools and Libraries

Additionally, a number of JavaScript libraries facilitate the creation of HTML graphics:

To create intricate data visualizations, use D3.js.
Three.js is used for 3D visuals.
To work with vector drawings, use Raphael.js.

Example of a Simple Animation with CSS:

See the Pen
CSS Animation by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.

This code creates a red square that moves back and forth.

Summary

SVG is very scalable and works well for vector-based graphics.
For dynamic, pixel-based images, canvas works well.
Simple motions and shapes can be created with CSS.
Complex and interactive graphics can be produced by combining these techniques.