title: HTML5 Graphics SVG, canvas and CSS
body: <p>I have read that HTML5 canvas and SVG tags were introduced.
  My question is, how were graphics made before SVG and canvas were introduced?</p>
  
  <p>Were only CSS and HTML used?</p>
  
  <p>//CIRCLE CANVAS</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;body&gt;
  
      &lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"&gt;
      Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  
      &lt;script&gt;
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(95,50,40,0,2*Math.PI);
      ctx.stroke();
      &lt;/script&gt; 
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ntYH4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9AHAV.png" alt="canvas"></a></p>
  
  <p>// CIRCLE SVG </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;body&gt;
  
      &lt;svg width="100" height="100"&gt;
        &lt;circle cx="50" cy="50" r="40"
        stroke="black" stroke-width="1" fill="white" /&gt;
      Sorry, your browser does not support inline SVG.
      &lt;/svg&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9AHAV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ntYH4.png" alt="SVG"></a></p>
  
  <p><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2" rel="nofollow noreferrer">example source</a></p>
  
  <p>How would this be done without canvas and svg tags. </p>