Graphics Explanation in HTML5
Last Updated :
02 Aug, 2022
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.
HTML
<!DOCTYPE html>
<body>
<svg width="550" height="50" viewBox="0 0 550 50"
fill="green" xmlns="http://www.w3.org/2000/svg">
<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:
HTML
<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210729182205/Component1-300x258.png"
>
</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:
HTML
<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210729183033/Component2-300x189.jpg"
>
</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:
HTML
<!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:
Canvas API:
- 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:
HTML
<!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.
Similar Reads
How to Draw Dynamic Animations in HTML5 ? In this article, we will learn how to build dynamic animations on our webpage using the canvas elements in HTML5. The main purpose of this element is to create graphics from scratch or to manipulate it. It can be used to manipulate canvas using JavaScript API and create dynamic animations and graphi
4 min read
How to Draw Graphics using Canvas in HTML5 ? In this article, we will draw graphics by using the canvas element in the document. This tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Note: This tag is n
1 min read
Explain the use of figure tag in HTML5 In HTML, the <figure> tag is used to include self-contained information such as illustrations, diagrams, photographs, or code listings in a document. It is linked to the main flow, but it may be used at any place of a document, and the figure flows with the content, thus removing it should not
3 min read
Optimising Web Graphics in Web Design Web Graphics are a double-edged sword, as much as they grab user's attention and make our website more attractive, they also make our website slower. Google when they see huge size for images starts ranking our website lower because the images are just too big and Google can predict people may not l
5 min read
p5.js createGraphics() Function The createGraphics() function in p5.js is used for creating an off-screen graphics buffer. It creates and returns a new p5.Renderer object. Syntax: createGraphics(w, h, [renderer]) Parameter: This function accepts three parameters as mentioned above and described below: w: It is a number that sets t
2 min read
HTML Canvas Lines In this article, we will learn how to make lines in different styles on Canvas in HTML. There are various methods used to draw a line on canvas like beginPath(), moveTo(), lineTo(), and stroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line
3 min read
What is SVG Generator in HTML5 ? What is exactly SVG ? SVG stands for Scalable Vector Graphics. It is used for creating and defining graphics for the webpage. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and Attribute in SVG files can be
2 min read
Explain semantic elements in HTML5 In this article, we are going to learn about the semantic elements in HTML5. Semantic elements are the elements that describe their meaning to both the developer as well as to the browser. HTML5 provides us with many semantic elements as listed below:<article> tag: A article tag is used to spe
7 min read
HTML Canvas Drawing HTML Canvas Drawing facilitates the <canvas> element, along with Properties that help to draw on the HTML canvas. The various properties, attributes & events can be used with <canvas> element. Utilizing JavaScript, we can manipulate the canvas element to draw shapes, paths, and image
2 min read
HTML Image Exercises HTML is a fundamental skill for web development, and learning how to use images properly is an important part of creating engaging websites. The <img> tag allows you to embed images in your web pages, and with attributes like src, alt, width, and height, you can control how these images appear
8 min read