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 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

   


   
Below is an example of an svg used as an image.
   

Example 2: Using SVG as background image

   
   


   
This is Using SVG as background image

Example 3: Using SVG as it is

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

   
   
  


   
This is an exmaple of using CSS with HTML.
   
CSS helps in making the content and images of the webpage looks more simpler and presentable.

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 element. The 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

   


   
This is an example of CANVAS API in 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.