Fun with SVG

Basic Shapes

Lets render an SVG ourselves

<svg version="1.1" xmlns ="http://www.w3.org/2000/svg" width="300"  height ="300" viewBox="0 0 100 100" >

  <rect x="1"  y="1" width="98"  height ="98" fill="black"  stroke ="orange" />

  <circle cx="50"  cy="50" r="40"  fill ="darkslategray" stroke="yellow"  />

  <!-- below is a path with lines to form a triangle, Z returns to the starting point -->

  <path d="M 50,10 L 90,90 L 10,90 Z" fill="none" stroke="yellow"  />

  <circle cx="50"  cy="65.5" r="24.5"  fill ="orange" stroke="yellow"  />

</svg>

« prev next »

From Gary Parker of BMCC.