0

I have read that HTML5 canvas and SVG tags were introduced. My question is, how were graphics made before SVG and canvas were introduced?

Were only CSS and HTML used?

//CIRCLE CANVAS

 <!DOCTYPE html>
    <html>
    <body>

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    </script> 

    </body>
    </html>

canvas

// CIRCLE SVG

   <!DOCTYPE html>
    <html>
    <body>

    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40"
      stroke="black" stroke-width="1" fill="white" />
    Sorry, your browser does not support inline SVG.
    </svg>

    </body>
    </html>

SVG

example source

How would this be done without canvas and svg tags.

1
  • IE4 was the first to introduce a canvas like element. Though not hardware accelerated it did provide a means of creating graphs, icons, and what not. That is now over 17 years ago. Before that web pages were just links and some low res images. Nobody really gave any thought to a browser being anything more than just linked document readers.
    – Blindman67
    Commented Mar 1, 2017 at 0:37

2 Answers 2

2

IE had an alternative SVG-like technology called VML (Vector Markup Language). IE5-8 supported VML, IE9 replaced VML with SVG support.

1

CSS, .gif (and other images), as well as Adobe Flash Player were used. (Images and CSS are still used)

With CSS:

   .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid #000
    }
<div class="circle"></div>

2
  • you changed your answer to my first question, css was used for graphics before svg and canvas where introduced? so in this case, would have done the graphic like this with a div tag, right?
    – Khan
    Commented Feb 28, 2017 at 22:40
  • 1
    I would use a div or another HTML element. But if I needed it to be animated I would have used a .gif image. Nowadays I'd use CSS and an HTML element with a CSS animation. CSS animations were introduced after SVG and canvas. Commented Feb 28, 2017 at 22:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.