Sunday, February 24, 2013

Introduction to SVG, Silverlight, HTML5 Canvas

If you're not familiar with SVG or Silverlight, you should dabble with it a little.  It's very easy to use SVG and it opens up a lot of creative capabilities.  You can use SVG to paint shapes, text, png files within the content region of the browser.  If you use absolute coordinates for your div tags, buttons, text boxes, etc.  You can paint round these objects to spice up your web page.  Let me show you a tiny example to demonstrate how easy it is to get started:

<!DOCTYPE html>
<html>
<meta name='apple-mobile-web-app-capable' content='yes' />
<body>

<h1>Scalable Vector Graphics</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
   <rect x='25' y='150' width='150' height='25' style='fill:blue;' />
</svg>


<input type='submit' name='btntest' value='Test' style='position:absolute; left:55px; top:60px; width:100px; height:25px;' />

</body>
</html>


This sample will display a submit button below a title "Scalable Vector Graphics" and then paint a red circle below the button and a blue rectangle below the circle.  My goto site for attributes and shapes is the w3schools website: http://www.w3schools.com/svg/default.asp

SVG requries HTML 5 in order to work properly.  That means that you need to have ie9 or better, or you can use chrome, opera, firefox or safari.  SVG rendering will reder identically across all 5 browsers (I know, I've written complex graphical viewers that works on all 5).  In addition to these browsers, the SVG viewer will work on the iPad and iPhone as well as Android devices.  Silverlight has an advantage that it utilizes graphical hardware rendering on the PC, so ie will be blazing fast in Silverlight, but Silverlight does not work on hand-held devices and it requires the Silverlight plug-in.

So you're probably thinking "why SVG and not HTML5 Canvas?"  You can.  Here's an example of a square painted in the content region of the browser:

<!DOCTYPE html>
<html>

<meta name='apple-mobile-web-app-capable' content='yes' />
<body>


<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(5, 50, 200, 100);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'black';
      context.stroke();

</script>


</body>
</html>


First, you'll noticed that you need to use Javascript in order to render.  Second, you still need HTML 5 compatibility.  Last, but not least, you cannot change your rendered shape after it is rendered.  Canvas is like a paint program.  The image is painted into the canvas and you must erase the canvas and re-paint the image to make it move.  In SVG, each object exists in the browser, so you can use Javascript to move, scale, rotate and manipulate attributes of your shapes.  Silverlight also can be manipulated with Javascript.  Silverlight can also be written with C# that is compiled and run locally on the browser within the Siliverlight plug-in.  This capability is very powerful and allows very smooth interaction, however, it is restricted to PCs only.

For the following Silverlight example, you can download the "Silverlight.js" file from here by right-clicking and downloading the file to your computer.  Then you'll need to create the basic HTML file containing this code:

<!DOCTYPE html>
<html>
<head>

<script src="Silverlight.js" type="text/javascript"></script>
</head>

<body>

<center>
<div id="Ag1Host" style="background:#FFFFFF">
<script type="text/javascript">
var pe1 = document.getElementById("Ag1Host");
</script>
</div>

</center>

<script>Silverlight.createObjectEx({source: 'MyFirstSilverlightPage.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});</script>

</body>
</html>



Then you'll need a file named "MyFirstSilverlightPage.xml" that contains the following:


<Canvas
xmlns="
http://schemas.microsoft.com/client/2007"
xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml">

<Rectangle Width="200" Height="100" Fill="Blue" Stroke="Black" StrokeThickness="4" />
</Canvas>


As you can tell, Silverlight is a little more involved.  If you're using Visual Studio, you can ignore this setup and run your Silverlight project as a project.  Then all the necessary files will be automatically generated.  Here's a link to getting started using this method: Walkthrough: Creating Your First Silverlight Application.

If you are serious about adding graphical output to your website, you should investigate all of these technologies and get familiar with their basic behaviour.