SVG stands for Scalable Vector Graphics. HTML has a tag called svg that allows you to show graphics on your website. SVG is used to define vector-based graphics for the Web. SVG defines the graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated. SVG is a W3C recommendation. SVG integrates with other W3C standards such as the DOM and XSL.

Before you dig into SVG you should have knowledge of HTML and XML. There is a library called D3.js that uses web technologies that the browser already understands that allows you to create awesome graphics with relatively minor effort. Of course, complex graphics require more effort. Before diving into D3, have a look at SVG in HTML. One good source is w3schools.com. They have a tutorial on SVG. If you click the Try It Yourself button at that website you can practice writing code and see the results.

Below is some HTML code that produces a blue rectangle. WordPress supports inline SVG code. I’m using the classic editor with the Text tab instead of the Visual tab.

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
</svg>