Vector Graphics

Vector Graphics are used to create images and illustrations. Images can be rendered in 2 ways :

Vector Images - SVG (Scalable Vector Graphics)
Raster Images - PNG, JPEG, GIF, BMP

SVG is an algorithm which defines the image's shape, size, color and orientation

Renders without pixelating and almost instantly,
Complex shapes creation can be cumbersome.

Raster Image is a pixel-based image, where each pixel is a color

Renders with pixelating if stressed and takes longer to render,
Complex shapes creation is easy.

SVG is defined using XML
Zoom into this page and see the differnce between the 2 images - GitHub's Vector vs Raster example
SVG can be added to HTML content using :

SVG added to webpage using src and srcset - cannot be styled or interacted with using CSS or JS
SVG added using SVG inline with <svg> - can be styled using CSS
Every approach has its own pros and cons, use <svg> if you prefer styling content.
However, SVG is not supported by all browsers and multiple SVG inline images could slowdown the page.

SVG images are invaluable in responsive design since they could infinitely scale without losing quality.
SVG images complexity can be reduced using tools like Inkscape which is also free and open source.

Source : MDN Web Docs

This simple SVG illustration was created using <svg> element and its attributes i.e., using SVG inline with simple shapes like <rect>, <circle>, <ellipse>, <polygon> and <text>.