SVG (Scalable Vector Graphics) is a graphic format used used to display a variety of graphics on the Web.
SVG uses XML (Extensible Markup Language) to define vectors that describe lines, curves, shapes, colors, and
text. Using vectors means that SVG graphics is infinitely scalable.
You might think that SVG and XML means it is extremely complicated but actually it is nothing more than
text files and is pretty much human-readable. That means you can modify SML files nad even create your own.
There are powerful and complicated WYSIWYG (What You See Is What You Get) applications for creating SVG graphics,
but there are trade offs. A WYSIWYG commonly adds a huge amount of overhead. This might be META data, unnecessary
precision, and non-standard code. When you hand code SVG you get fast and efficient graphics.
SVG has a huge number of practical uses; banners, charts, drawings, diagrams, graphs, icons, illustrations,
logos, maps, and much more. SVG is an W3C (World Wide Web Consortium) standard and as a global industry
standard it will continue to be the standard for vector graphics in the browser.
In this article I explain how to code the basic shapes; rectangles, rounded rectangles, circles, ellipses,
and polygons. All you need to follow along is a basic text editor like Windows Notepad and a web browser.
Save your files with the extension .svg and double-click on them to open them in your browser.