Khan Khan -4 years ago 181
HTML Question

HTML5 Graphics SVG, canvas and CSS

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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download