Overview of SVG

In raster graphics, an image is represented by a two dimensional grid of pixels. The HTML5 Canvas 2d API is an example of a raster graphics API. Drawing with the Canvas API updates the canvas’s pixels. PNG and JPEG are examples of raster image formats. The data in PNG and JPEG images also represents
Vector graphics are quite different. Vector graphics represent images with mathematical descriptions of geometry. A vector image contains all of the information needed to draw an image from high-level geometric objects such as lines and shapes. As you can tell by the name, SVG is an example of vector graphics. Like HTML, SVG is a file format that also has an API. SVG combined with the DOM APIs form a vector graphics API. It is possible to embed raster graphics such as PNG images inside of SVG, but SVG is primarily a vector format.
SVG lets you do many of the same drawing operations as the canvas API. Much of the time, the results can be visually identical. There are some important invisible differences, however. For one thing, the text is selectable. You don’t get that with canvas! When you draw text onto a canvas element, the characters are frozen as pixels. They become part of the image and cannot change unless you redraw a region of the canvas. Because of that, text drawn onto a canvas is invisible to search engines. SVG, on the other hand, is searchable. Google, for instance, indexes the text in SVG content on the web.
SVG is closely related to HTML. If you choose, you can define the content of an SVG document with markup. HTML is a declarative language for structuring pages. SVG is a complimentary language for creating visual structures. You can interact with both SVG and HTML using DOM APIs. SVG documents are live trees of elements that you can script and style, just like HTML. You can attach event handlers to SVG elements. For example, you can use click event handlers to make SVG buttons or shaped clickable regions. That is essential for building interactive applications that use mouse input.