SVG Article

Introduction

Scalable Vector Graphics, otherwise known as SVG, is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the W3C (World Wide Web Consortium) since 1999.

SVG First appeared in 2001.

Images and their behaviours in SVG are defined in XML text files. THis means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

SVG can be used in files and in HTML web programming and images.

Features

Printing - Rich graphics and is compatible with CSS for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page.

Scripting and Animation - SVG drawings can be dynamic and interactive. Time-based modifications to the elements can be described in SMIL, or can be programmed in a scripting language. SMIL is recommended as the standard for animation in SVG.

Compression - SVG images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms. When an SVG image has been compressed with the industry standard gzip algorithm, it is referred to as an "SVGZ" image and uses the corresponding .svgz filename extension.

Other Features Include:

Paths
Basic Shapes
Text
Painting
Colors
Gradients and patters
Clipping and Masking
Filters
Interactivity
Linking
Fonts
Metadata

Pros/Cons

SVG has its pros and cons:

Pros	Cons
Small size - SVG image elements take up much less space than their twins created in raster format.	The file size is growing very fast, if the object consists of a large number of small elements.
Flexibility - With CSS, you can quickly change the graphics settings on the site, such as background color or the position of the logo on the page. To do this, you can edit the file in any text editor.	A bit of a learning curve - Understanding the syntax of SVG and how to properly display it on the web without errors takes time and effort to perfect. Using advanced features such as Masking and Clipping can take a bit of time to learn but can be a great pay off.
Scalability - The image scales without altering the quality. It is widely used for devices with screens and those close to them.	It only works with two dimensional images, so photographs do not work, so basically anything you would capture with a camera.
It's possible to view the contents of the SVG file in any browser.	It's impossible to read a part of the graphic object, only the entire object and it slows you down.

Extra Programs

Extra Programs related to SVG

Front End Technologies - HTML, CSS, JavaScript
Website Design
Front End Web Frameworks - ReactJS, VueJS, Angular
Animations and Graphics - P5js, CSS, Canvas

Sources

Summary

In conclusion:

SVG is an awesome way to learn new skills in graphics and animations. It is easier to grasp than CSS graphics (you can drawn shapes a lot more easily). It is graphically better than HTML Canvas and you can use animations with it by using the animation tag. This is very useful because you can make really cool animation with ease, also there are maskings and clipping properties which help a lot too. You can also use SVG in files and on the web.