In this article, we will explain the concept of graphics in HTML5. Graphics are representations used to make web-page or applications visually appealing and also for improving user experience and user interaction. Some examples of graphics are photographs, flowcharts, bar graphs, maps, engineering drawings, constructional blueprints, etc. Usually, the following technologies are used in web graphics with HTML5 Canvas API, WebCGM, CSS, SVG, PNG, JPG, etc.
SVG (Scalable Vector Graphics)
- These are images created by a markup language that are reusable, simple, high-quality standalone images that can be exported and imported as well.
- They are cross-browser friendly and can be used both on the client-side and server-side of the application.
- They can be manipulated to create animations, hybrid images, etc by editing the markup language or by editing using a stylesheet.
- Files come with a .svg extension.
Example: The following demonstrates the SVG in markup form.
<!DOCTYPE html><body>
<svg width="550" height="50" viewBox="0 0 550 50"
<text x="0" y="20">I love GeeksforGeeks</text>
<svg>
</body>
</html>
|
Output:
SVG text
PNG (Portable Network Graphics)
- They are portable, static and lossless with proper indexed-color control.
- Files come with a .png or .PNG extension.
- Cross-browser friendly and have streaming capabilities.
Example:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src=
>
</img>
</body>
</html>
|
Output:
JPG or JPEG (Joint Photographic Experts Group)
- Lossy compressed with an adjustable degree of compression.
- Used mainly with digital photography and can achieve a compression of 10:1.
- Files come with a .jpg or jpeg extension.
Example:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src=
>
</img>
</body>
</html>
|
Output:
CSS (Cascading Style Sheets):
- This is a type of language mainly used for designing and HTML and SVG elements by using code.
- They are scalable and give more space for creativity to the user.
- Files usually come with a .css extension.
Example:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
<div class="star"></div>
</body>
</html>
|
styles.css: The following code is used in the above HTML file.
body {
position: relative;
}
.star {
position: absolute;
width: 423px;
height: 384px;
left: 456.7px;
top: 80.34px;
background: #346d33;
transform: rotate(18.69deg);
}Output:
- Has no DOM and uses vector based methods to create objects, graphics and shapes.
- Canvas API applications can be standalone or integrated with HTML or SVG.
- Widely used for games
- Client-side scripting with native modern browser support.
Example:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="canvas1" width="400" height="200"
style="border:2px solid green; border-radius:35px">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
|
Output:
WebCGM (Web Computer Graphics Metafile)
- Very similar to SVG when it comes to graphical features.
- CGM is the ISO standard for vector image definition.
- Used in aeronautics, automotive engineering, technical illustration, etc.
- They are not widely used traditionally. More modern approaches have been to use SVGs, Canvas, etc.
So, the graphics are used to make a web page, application, or any digital element that need visual interaction especially HTML5 based, need Graphics for the best User Experience.