SVG

1 min readApr 17, 2017

SVG is easily one of the best tools you have at your disposal to create graphics on the web. It’s vector-based, lightweight, and best of all, native to HTML5.

What can you create with SVG?

Much like MS Paint, or any other primitive graphics/drawing tool, you have at your disposal both the means to make line-based drawings and also native shapes, such as circle, rectangle etc. Behold:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <svg>
      <circle cx="100" cy="100" r="40" stroke="orange" stroke-width="6" fill="red" />
    </svg>
    <svg>
      <polygon points="50,5 40,50 190,78 10,78 160,50"
      style="fill:red;stroke:orange;stroke-width:6" />
    </svg>
  </body>
</html>

Note that the tw0 objects may be created in separate SVG elements or in the same one to be more succinct.

SVG

What can you create with SVG?

Written by Silvana Goberdhan-Vigle