Explain HTML5 Graphics

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.

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.

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.

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.

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.

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.