Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Types of graphics are supported by HTML5?
Graphics are the visual representations that are used to represent any idea or imagination in order to enhance the overall experience of the website for the user. Graphics helps in conveying a complex message to the user in a simple and understandable way. Some ways of representing message in graphics are through photos, arts, diagrams, flowchart etc.
Graphics in HTML are used for enhancing the appearance of webpage or website and to make the user interaction simple. There are different uses of graphics in HTML for which we have different technologies. We will discuss few of them below.
SVG
SVG stands for Scalable Vector Graphics. It is like HTML for graphics . SVG file always gets saved with a .svg extension. <svg> tag is a container tag because it has both opening and closing tag and in order to work it has to be added inside the <body> element. It produces high quality graphics, animations and images that are reusable, easy to understand and can be imported easily. They can be easily modified by editing markup language or by editing using stylesheet (like CSS).
SVG comes with a lot of built-in features like gradients, opacity, filters etc. and all these features makes scalable, smooth and reusable graphics for webpage.
Example: Using SVG as an image file
<!DOCTYPE html> <html lang="en"> <head> <title>SVG</title> </head> <body> <h1>Below is an example of an svg used as an image.</h1> <img src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="SVG"> </body> </html>
Example 2: Using SVG as background image
<!DOCTYPE html>
<html lang="en">
<head>
<title>SVG</title>
<style>
body{
background: url("https://www.tutorialspoint.com/images/physics-tutorials_icon.svg") no-repeat;
}
</style>
</head>
<body>
<p>This is Using SVG as background image</p>
</body>
</html>
Example 3: Using SVG as it is
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
width="375.00078"
height="728.17084"
viewBox="0 0 375.00078 728.17084"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M2.79045,484.29492c-.55273,0-1-.44727-1-1V201.5c0-70.91211,57.69043-128.60254,128.60254-128.60254h217.13771c.55273,0,1,.44727,1,1s-.44727,28-1,28l217.1377-27C60.58439,74.89746,3.79045,131.69141,3.79045,201.5V483.29492c0,.55273-.44727,1-1,1Z" fill="#3f3d56"
/>
<path
d="M348.29044,0c.55273,0,1,.44727,1,1V282.79492c0,70.91211-57.69043,128.60254-128.60254,128.60254H3.55021c-.55273,0-1-.44727-1-1s.44727-1,1-1H220.68792c69.80861,0,126.60255-56.79395,126.60255-126.60254V1c0-.55273,.44727-1,1-1h-.00003Z" fill="#3f3d56"/>
</body>
</html>
CSS
CSS stands for Cascading Style Sheets. It is the language for describing the presentation of web pages and their components like colors, layout and font information. CSS files are saved with .css extension.
It is mainly used to modify the HTML and SVG elements by using CSS properties. There are several in built CSS properties for HTML elements like for font we have font-size, fontwidth, font-weight. Similarly for other elements we have other properties. All these properties when applied to HTML and SVG elements produces webpage which is scalable, simple and easy to understand for the user.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<link rel="stylesheet" href="style.css">
<style>
body{
background-image: url("image.jpg");
background-color:aqua;
background-repeat: repeat;
background-position: 0%;
}
h1{
color:black;
border: 2px solid black;
font-size: 50px;
}
p{
color:black;
border:2px solid black;
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is an exmaple of using CSS with HTML.</h1>
<p>CSS helps in making the content and images of the webpage looks more simpler and presentable.</p>
</body>
</html>
Canvas API
Canvas API is a client-side scripting technology that allows the rich creation or modification of raster images. Canvas API uses vector-based methods for creating shapes and other graphical effects and because it has no DOM(Document Object Model) it can perform faster.
Canvas API is used for creating graphics using javascript and <canvas> element. The <canvas> element has two attributes width and height both of which are optional. But if we use these attributes and we don’t set their values then by default the width will be set to 300px and height will be set to 150px. The Canvas API is widely used by developers to develop high end games and fully featured applications.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CANVAS API</title>
</head>
<body>
<h1>This is an example of CANVAS API in HTML</h1>>
<canvas id="canvas" width="300" height="150" style="border:2px solid black;"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100,55,45,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
PNG − PNG stands for Portable Network Graphics. It is a static file format for the portable, well-compressed storage and exchange of raster images. PNG files are always saved with .png extension.
PNG files are rich in color with indexed-color, grayscale and have alpha-channel transparency. It can be used with HTML, CSS and SVG. PNG files are mostly designed for web because they have faster streaming and progressive rendering capabilities. And because of these capabilities they are highly supported in web browsers, graphical authoring tools and in image toolkits.
In the above lines we discussed some of the ways with which we can use graphics in html, but we are not limited by them and there are a lot of other ways provided by html and css to use graphics. Using moving graphics via animations, using auto changing graphics using carasoul and using videos is also possible given the flexibility that html provides.
Conclusion
To conclude, Data analytics can be a powerful tool for emergency management. It allows organizations to collect and analyze data in real-time, identify trends, and respond quickly to disasters. Data analytics can also help with predicting future events, creating more accurate plans for responding to emergencies, and improving overall preparedness. By leveraging the power of data analytics for emergency management, organizations can better protect their communities from disaster-related threats.
455 Views
