Scalar Vector Graphics (SVG) is an XML language, where “X” stands for extensible. Unlike HTML, XML is more strict, and any errors may cause it to malfunction. Initially, the World Wide Web Consortium (W3C) attempted to update XHTML, but the inability to open websites due to mistakes proved to be a significant obstacle for XHTML 2.0. Consequently, HTML5 emerged as the standard that we still use today.

Just like HTML provides elements for defining headers, paragraphs, tables, and so on, SVG provides elements for squares, circles, ellipses, lines, polylines, polygons, and paths. These are the element names, and just like HTML, they are use the greater and less than symbols <circle cx="150" cy="150" r="80"/> where r is the radius of the circle. cx and cx the horizontal and vertical center position of the circle. As SVG is part of the Document object model DOM, it is possible to fill and stroke shapes using inline CSS, the same way you would using it in HTML. A 180 pixel square with a black stroke and red fill: <rect x="100" height="150" y="100" width="150" style="stroke: black; fill: red;"/>

Like illustrator files, SVG documents can become quite complex, as there can be many such elements, which can be filled with gradients or rotated, with filter effects, animations, interactivity, JavaScript, and so on. Because I do not expect anyone to hand code anything but the simplest shapes, there are programs available, like Illustrator, or the free Illustrator alternative, Inkscape, both of which exports and save to the SVG format. You can then link to that like any other picture or cut and paste the code directly into the HTML document. A benefit of SVG is that it works seamlessly into the HTML document, and uses CSS for naming layers, elements, etc.

I can display the same illustrator file I created for canvas using SVG. Where canvas renders the file into a bitmap, SVG remain vector, meaning it can scale without losing resolution.