Networks / Pajek
Package for Large Network Analysis

How to
combine SVG with Background Picture

In this hint we explain how to combine a Pajek's network picture in SVG with a bitmap background picture.

Suppose that we would like to overlay the following bitmap picture, stored in the file Pajek.jpg

Pajek

with a SVG picture, stored in the file acyclic.svg

First we determine the size of the bitmap picture - by importing it into some viewer (IrfanView). The size of Pajek.jpg is 1056 x 900.

We also determine the size of the SVG picture - by opening it in a text editor and looking at the parameters in the tag <svg>. The size of acyclic.svg is 493 x 533. If the SVG picture was not exported from Pajek with the transparent background setting in the Draw/Export/Options we have to comment out (or simply delete) the background rectangle (7th line)

<!-- rect width="493" height="533" style="fill:rgb(255,...,127);" / -->

Then we combine both pictures using the following 'template'

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 528 450" preserveAspectRatio="xMidYMid meet"> <g id="bitmap" style="display:online"> <image x="0" y="0" width="528" height="450" xlink:href="./pajek.jpg"/> </g> <g id="PajekSVG" style="display:online"> <g transform="translate(100 50)"> <g transform="scale(0.7)"> <image x="0" y="0" width="493" height="533" xlink:href="./acyclic.svg"/> </g> </g> </g> </svg>

We set the size of the viewBox and the bitmap image to the half of its original size, thus providing detailed background picture also after (the first) zooming. Using the transformations scale and translate we can control the size and position of SVG picture on the background picture.

We save the combined picture as PajekBG.svg. To include it into a HTML page we use the 'template'

<EMBED WIDTH="400" HEIGHT="300" SRC="./pajekBG.svg" NAME="networkBG" type="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/">

And here is the result

How to?; Pajek; Vlado/Networks