Introduction to SVG: Performing Decor

Script the landscape from SVG components selected from the library.

1) Create a template library

First, consider the case when the library is on the page. It comes true with an svg tag containing several shapes, in our demonstration - a rectangle and a circle.

<svg id="repository">
  <rect id="rect" width="200" height="100" style="fill:rgb(100,150,200);" />
  <circle id="circle" cx="300" cy="80" r="60" style="fill:rgb(0,160,0);";/>
</svg>

Figures Library

It would also be possible to create images dynamically. For example, the following code creates a circle that fills in red.

var cir = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute("cx", 40);
cir.setAttribute("cy", 60);
cir.setAttribute("r", 35);
cir.setAttribute("fill", "red");

Another solution is to use images stored in SVG files that will be generated by software such as Inkscape or SVG-Edit.

An SVG image can be integrated in several ways. For example, with the xlink attribute of an image:

<svg width="96" height="96">
  <image xlink:href="code/boat.svg" src="code/boat.png" width="100" height="100"/>
</svg>

The advantage of this method, which includes an image tag in the svg tag, is that you can display a replacement bitmap if the browser is too old to support SVG. How to use this tag, we will see in the article SVG: Car on the road and the schedule of events. The second method is to use the object tag.

<object width="100" height="100" data="code/plane.svg"></object>
<object width="100" height="100" data="code/boat.svg"></object>
<object width="100" height="100" data="code/building.svg"></object>

File Library

This is ideal for loading SVG images into a page and displaying them. We can still use the third method - iframes:

<div style="display:none">
<iframe id="iplane" width="100" height="100" src="code/plane.svg"></iframe>
<iframe id="iboat" width="100" height="100" src="code/boat.svg"></iframe>
<iframe id="ibuilding" width="100" height="100" src="code/building.svg"></iframe>
</div>

The object tag resizes the image, which is not an iframe check box. IFRAMES are placed in a layer that is not displayed because you only want to use their contents, not show them, so this is not important here.

Using iframes or object content is very simple, as we will see.

2) Composition creation

We create a surface like we do for Canvas, but the container here is the svg tag:

<svg class="surface" id="surface"></svg>

Components are inserted using the appendChild DOM method:

var surface = document.getElementById("surface");

var rect = document.getElementById("rect");
var clonerect = rect.cloneNode();
clonerect.setAttribute("x", 100);
clonerect.setAttribute("y", 200);
surface.appendChild(clonerect);

var circle = document.getElementById("circle");
var clonecir = circle.cloneNode();
surface.appendChild(clonecir);

A clone of both figures is created so that it does not disappear in the gallery above, since appendChild will otherwise move the tag to the DOM from the gallery to the svg tag.

Also dynamically added shape:

surface.appendChild(cir);

This gives the following composition:

Now we will create a composition from an object stored in svg files. A new surface is created with the city ID:

<svg class="surface" id="city"></svg>

The getSVG function is used to extract the contents of a file after loading into an iframe.

function getSVG(iframeID, objID)
{
  var ifr = document.getElementById(iframeID);
  var graphics = ifr.contentWindow || ifr.contentDocument;
  return graphics.document.getElementById(objID);
}

The arguments are the ID of the iframe into which the file is loaded and the ID of the content in the svg file. The file contains a <g> tag with an identifier to identify the content to insert into our surface, for example:

<g id="boat"> ... </g>

It is important to display the svg content after the page is fully loaded and to use the onload property in the window.

Before components are included, they have a color and position on the surface. Because the <g> tag has no x or y attributes, the translate property is used instead.

function displaySVG() 
{   
  var city = document.getElementById("city");
  var building = getSVG("ibuilding", "building");
  building.setAttribute("transform", "translate(360,126)");
  building.setAttribute("fill", "#ccc");	
  city.appendChild(building);

  var boat = getSVG("iboat", "boat");
  boat.setAttribute("fill", "#090");	
  boat.setAttribute("transform", "translate(10,247)");	
  city.appendChild(boat);

  var plane = getSVG("iplane", "plane");
  plane.setAttribute("fill", "blue");	
  plane.setAttribute("width", "120");	
  plane.setAttribute("height", "50");	
  plane.setAttribute("transform", "translate(60,30)");	
  city.appendChild(plane);	
}
window.onload=displaySVG;

Here is the final table:

You can go further, add animations, allow the user to interact with the table, this is the advantage of the svg format... this will be the subject of subsequent articles... The split demonstration uses the principles described on this page.