SVG in HTML


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. Unfortunately WordPress does not support inline SVG.

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
  Sorry, WordPress does not support inline SVG.  
</svg>

Leave a comment

Your email address will not be published. Required fields are marked *