SVG

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

     
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

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

Источник

HTML SVG Graphics

The HTML element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
	4.0	9.0	3.0	3.2	10.1

SVG Circle

Example

SVG Rectangle

Example

SVG Rounded Rectangle

Example

SVG Star

Sorry, your browser does not support inline SVG.

Example

style=»fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;»/>

SVG Logo

Sorry, your browser does not support inline SVG.

Example

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

• Resolution dependent
• No support for event handlers
• Poor text rendering capabilities
• You can save the resulting image as .png or .jpg
• Well suited for graphic-intensive games

• Resolution independent
• Support for event handlers
• Best suited for applications with large rendering areas (Google Maps)
• Slow rendering if complex (anything that uses the DOM a lot will be slow)
• Not suited for game applications

SVG Tutorial

To learn more about SVG, please read our SVG Tutorial.

Источник

HTML Canvas Graphics

The HTML element is used to draw graphics on a web page.

The graphic to the left is created with . It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

What is HTML Canvas?

The HTML element is used to draw graphics, on the fly, via JavaScript.

The element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
	4.0	9.0	2.0	3.1	9.0

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

Your browser does not support the canvas element.

Example

Add a JavaScript

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Draw a Line

Example

Draw a Circle

Example

Draw a Text

Example

Stroke Text

Example

Draw Linear Gradient

Example

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, «red»);
grd.addColorStop(1, «white»);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Circular Gradient

Example

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, «red»);
grd.addColorStop(1, «white»);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Image

HTML Canvas Tutorial

To learn more about , please read our HTML Canvas Tutorial.

Источник