Week 2- Simple logo in SVG - Business Web Technologies

This shows how to make a simple logo using SVG, an XML format for doing simple graphics that is now an HTML5 recommendation

by Brian von Konsky

HTML

<p>SVG</p>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="45" style="fill:yellow"/>
    <rect x="10" y="40" width="80" height="20" style="fill:green" />
    logo
    <polygon points="50,0 100,100 50,50 0,100" style="fill:red" />
</svg>

<p>Canvas</p>
<canvas id="myCanvas" width="100" height="100">
</canvas>

CSS

svg, canvas {background-color: blue;}

JavaScript

/*
 Try this:
 1. Sepcify ctx.strokeStyle ="purple"; to set outline colour
 2. Specify ctx.stroke() to draw the outline
*/

// Get DOM element and its drawing context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Draw a yellow filled circle
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.arc(50,50,45,0,2*Math.PI);
ctx.fill();

// Draw a green filled rectangle
ctx.beginPath();
ctx.fillStyle="green";
ctx.rect(10, 40, 80, 20);
ctx.fill();

// Draw a red arrow head
ctx.beginPath();
ctx.fillStyle="red";
ctx.moveTo(50, 0);
ctx.lineTo(100, 100);
ctx.lineTo(50, 50);
ctx.lineTo(0, 100);
ctx.fill();