fig2vect

Workshop: Creating a logo (PNG file)

PDF manual "fig2vect.pdf" available german version "f2vde.pdf" available too

	Overview
	Before we begin
	Preparing the logo basics in jFig
	Convert the file to SVG
	Manual correction of width and height in the SVG file
	Start Squiggle
	Manual modifications to the SVG file
	Converting the logo to PNG

Overview

In this course we will create a partial transparent PNG file to be used as logo on web pages. The logo will have a width of 210 pixels and a height of 62 pixels (same size as the logos in the upper left and upper right corner of this document).
In the table below the logo is placed in four table cells using different background colors.

This table cell has a white background.

This table cell has a lightred background.

This table cell has a lightgreen background.

This table cell has a lightblue background.

First we prepare the logo basics in jFig, later we convert the testlogo.fig file to testlogo.svg using fig2vect. After applying manual modifications to the SVG file we convert it to PNG using the Batik rasterizer.
To follow the course you need:

• jFig or XFig,
• the fig2vect program,
• SVG versions of the Ghostscript fonts,
• a "java" program, I suggest to use that one from http://javasoft.sun.com and
• the Batik software from http://xml.apache.org/batik

Before we begin

Before we begin we have to calculate the dimensions of our Fig file. Two conversions are run on the Fig file, it is converted to SVG using fig2vect first, the SVG file is converted to PNG using the Batik rasterizer. Both conversions should not result in distorsions, so the Fig file, the SVG file and the final PNG file should have the same width/height ratio.
The width/height ratio is given by the number of pixels, it is 210/62 which can be reduced to 105/31. So we will use 105 times the smallest usable length unit (sulu) for the image width and 31 sulu for the image height. Now we need to find the length of 1 sulu.
The fig2vect program calculates the image dimensions from the graphics elements (except texts) and uses PS points (72 per inch) for all output drivers. If this calculation does not result in integer numbers, the image is enlarged a little bit to have integer values for the bounding box. We want to avoid this rounding operation, so we need to choose image dimensions resulting directly in integer numbers after the conversion to PS points. This means one sulu must correspond to an integer number when expressed in PS points.
In jFig we want to use the magnetic grid which depends on the unit settings, the zoom factor and the magnetic grid settings. As the fig2vect output resolution is based on inches it is a good idea to set the units to inches in jFig too. The magnetic grid steps are fractions of one inch in this case, typically powers of 1/2. So the magnetic grid steps are candidates to become a sulu, we have to check which candidates can be expressed in integer numbers in all coordinate spaces involved:

• jFig internal units,
• Fig units for the testlogo.fig file and
• PS points.

sulu candidate	length in jFig internal units (2400 per inch)	length in Fig units (1200 per inch)	length in PS points (72 per inch)
1 inch	2400	1200	72
1/2 inch	1200	600	36
1/4 inch	600	300	18
1/8 inch	300	150	9
1/16 inch	150	75	4.5

As seen in the table the smallest candidate fullfilling our demands is 1/8 inch.
So we use 1 sulu = 1/8 inch. Our image width is 105/8 inch = 13+1/8 inch. The image height is 3+7/8 inch.

Preparing the logo basics in jFig

• First we make sure to use inches as units.
   
  
• We set the magnetic grid unit to 1/8 optical grid.
  
   
  
• Now we create the background rectangle, 13+1/8 inches wide, 3+7/8 inches high. First press the "create a rectangle" button, click once to the origin (0,0), use the horizontal scrollbar to move to the right and click on the point (13+1/8,3+7/8).
  Using the scrollbar while in "create a rectangle" mode may produce some irritations on the screen (wrong left border line). Don't worry, the irritations disappear after finishing the rectangle.
   
  
   
  
   
  
• To place our rectangle in the deepest possible layer we press the "edit object" button and click near one of the rectangle markers. The "edit rectangle" dialog box is shown. We click on the layer number, in the "select value:" dialog box we enter the new layer number 999 and press the "Set" button. In the "edit rectangle" dialog box we press "OK" to apply the new settings.
   
  
   
  
   
  
   
  
   
  
• Now we zoom out two times (so we have a zoom factor of 50%) to view the entire rectangle.
   
  
• We press the "create a text object" button to create a text. The program enters the text input mode and shows the default text settings used for new text in the bottom of the window.
   
  
• To change the font, we click on the font name "Times Roman". The dialog box "Select font:" is shown, we press the button for "Palatino-Bold".
   
  
   
  
• To change the font size we click on the current font size "12", the dialog box "Select value:" is shown. We enter 96 as the new default text size and press the "Set" button.
   
  
   
  
• To change the text alignment we click on the current alignment symbol, in the "Select value:" dialog box we choose centered text.
   
  
   
  
• Now we click into the empty space below the rectangle and type the text "Test 1". Clicking again into the free space allows to type another text "Test 2".
   
  
   
  
   
  
• To give the text some background we use the "create a rectangle" button. We click once to the first point of the rectangle and once on the final point.
   
  
   
  
   
  
• The other text should have a background of same size, so we want to copy the rectangle we just created. We press the "copy an object" button and click once one the upper left marker of the new rectangle (you can also use another marker). The border of the rectangle follows the mouse movements now. Place the rectangle and click to fix the position.
   
  
   
  
   
  
• Now we want to edit the rectangles, press the "edit object" button and click on one of the markers of the rectangle behind the "Test 1" text. We set the line pen color and fill color to yellow, line width to 0, filling to "pure" and the layer number to 200 (to have the rectangle below the text).
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  We repeat the procedure for the rectangle below "Test 2" but use line pen color and fill color red.
• Now we want to group the "Test 1" text with the yellow rectangle. We press the "create a compound object" button. We click on one of the markers of the text (the markers change from hollow to black-filled) and on one of the markers of the rectangle (all the rectangle markers changes their style to black-filled too). A right-click (click on the right mouse button) finishes the current compound object.
  We repeat the same procedure for the text "Test 2" and the red rectangle.
   
  
   
  
   
  
   
  
• Now we want to move the "Test 1" compound object to the upper left corner and the "Test 2" compound object to the lower right corner.
  We press the "move an object" button and click on the upper left marker of the compount object. The border of the object now follows the mouse. We click on point (0,0) to place the object.
  We are still in "move an object" mode, so we can click on (or near) the lower right marker of the "Test 2" compound object to move it to a position near the lower right corner of the background rectangle.
  Both optical and magnetical grid depend on the zoom factor, we need to zoom in (to zoom factor 100%) to be able to place the "Test 2" compound object exactly in the lower right corner. After placing the object we can zoom out to 50%.
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
   
  
• The lower left and upper right range are empty, we want to add a polyline here. To do so we press the "create a polyline" button. We click on the starting point and the corner point, right-clicking on the final point finishes the polyline.
   
  
   
  
   
  
   
  
• To change the line width of the polyline we press the "edit object" button and click on one of the markers of the polyline. We change the line width to 6.
   
  
   
  
   
  
• In the lower left range we want to have a polyline of same length. We press the "copy an object" button and click on one of the markers of the polyline. The border of the new copy of the polyline follows the mouse movements. We click into the free space below the background rectangle to place the copy.
   
  
   
  
   
  
• To mirror the polyline horizontally and vertically we press the "mirror object on y-axis" button and click on one of the markers of the polyline. The same procedure is used for the "mirror object on x-axis" button.
   
  
   
  
   
  
   
  Before we can move the polyline to the correct place we need to zoom in (zoom factor 100%).
• To move the polyline, press the "move an object" button and click on one of the markers of the polyline. The polyline border now follows the mouse. Click to place the polyline.
   
  
   
  
   
  
• Finally we want to make the background rectangle "invisible". We press the "edit object" button and click on one of the markers of the background rectangle.
  The line pen color is switched to white and line width to 0.
   
  
   
  
   
  
• Now we can use the "File / Save" menu item to save the file as testlogo.fig and the "File / Quit" menu item to exit the program.

Convert the file to SVG

To convert the testlogo.fig file to testlogo.svg we use
 
fig2vect options testlogo.fig testlogo.svg
 
The following options are needed:

• -lsvg.gs
  to use the SVG versions of the Ghostscript fonts,
• -o gs.svg-font.directory=directory
  to specify the directory where the SVG fonts reside,
• -o font.scale.factor=0.92
  to get correct font sizes,
• -o wh.specification=pixels
  to specify width and height in the SVG header in pixels,
• -o verbose.output=yes
  to write additional information for objects (line number and layer) into the SVG file,
• -o remove.background.rectangle=yes
  to remove the background rectangle from SVG output and
• -o background.rectangle.color=white
  to tell fig2vect that background rectangles are in white color.

If you create a configuration

[svg.logo]
gs svg-font directory		=	/windows/p/urw-svg
font scale factor		=	0.92
wh specification		=	pixels
verbose output			=	yes
remove background rectangle	=	yes
background rectangle color	=	white

in section 2 or 3 of the fig2vect.cfg configuration file it is sufficient to run the fig2vect program using
 
fig2vect -lsvg.logo testlogo.fig testlogo.svg
 

Manual correction of width and height in the SVG file

Open testlogo.svg in your favourite text editor and replace

<svg width="945px" height="279px" viewBox="0 0 945 279"

by

<svg width="210px" height="62px" viewBox="0 0 945 279"

Start Squiggle

Run

java -jar /opt/batik-1.6/batik-squiggle.jar &

to start the Batik SVG viewer.
Use the "File / Open File..." menu item to open testlogo.svg. After applying modifications (see next section) to testlogo.svg we can refresh the view using the "File / Reload Document" menu item or the toolbar button.

Manual modifications to the SVG file

To add some transparency gradients we need to edit the SVG file in a text editor.
We need four transparency masks, a horizontal and a vertical one for both the yellow and the red rectangle. Each of the masks needs one gradient to specify transparency values.
We use the following names for the gradients and masks:

Name	Usage
HG1	horizontal gradient for the yellow rectangle
HM1	horizontal mask for the yellow rectangle
VG1	vertical gradient for the yellow rectangle
VM1	vertical mask for the yellow rectangle
HG2	horizontal gradient for the red rectangle
HM2	horizontal mask for the red rectangle
VG2	vertical gradient for the red rectangle
VM2	vertical mask for the red rectangle

• We add the gradient and mask definitions between the

  <defs>
  <style type="text/css"><![CDATA[
  

  lines, so it looks like this:

  <defs>
  <linearGradient id="HG1" gradientUnits="userSpaceOnUse"
    x1="0" y1="0" x2="432" y2="0"
  >
  <stop offset="0" stop-color="white" stop-opacity="0" />
  <stop offset="0.1" stop-color="white" stop-opacity="1" />
  <stop offset="0.9" stop-color="white" stop-opacity="1" />
  <stop offset="1" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <mask id="HM1" maskUnits="userSpaceOnUse"
    x="0" y="0" width="432" height="144"
  >
  <rect x="0" y="0" width="432" height="144" fill="url(#HG1)" />
  </mask>
  <linearGradient id="VG1" gradientUnits="userSpaceOnUse"
    x1="0" y1="0" x2="0" y2="144"
  >
  <stop offset="0" stop-color="white" stop-opacity="0" />
  <stop offset="0.3" stop-color="white" stop-opacity="1" />
  <stop offset="0.7" stop-color="white" stop-opacity="1" />
  <stop offset="1" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <mask id="VM1" maskUnits="userSpaceOnUse"
    x="0" y="0" width="432" height="144"
  >
  <rect x="0" y="0" width="432" height="144" fill="url(#VG1)" />
  </mask>
  <linearGradient id="HG2" gradientUnits="userSpaceOnUse"
    x1="513" y1="0" x2="945" y2="0"
  >
  <stop offset="0" stop-color="white" stop-opacity="0" />
  <stop offset="0.1" stop-color="white" stop-opacity="1" />
  <stop offset="0.9" stop-color="white" stop-opacity="1" />
  <stop offset="1" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <mask id="HM2" maskUnits="userSpaceOnUse"
    x="513" y="135" width="432" height="144"
  >
  <rect x="513" y="135" width="432" height="144" fill="url(#HG2)" />
  </mask>
  <linearGradient id="VG2" gradientUnits="userSpaceOnUse"
    x1="0" y1="135" x2="0" y2="279"
  >
  <stop offset="0" stop-color="white" stop-opacity="0" />
  <stop offset="0.3" stop-color="white" stop-opacity="1" />
  <stop offset="0.7" stop-color="white" stop-opacity="1" />
  <stop offset="1" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <mask id="VM2" maskUnits="userSpaceOnUse"
    x="513" y="135" width="432" height="144"
  >
  <rect x="513" y="135" width="432" height="144" fill="url(#VG2)" />
  </mask>
  <style type="text/css"><![CDATA[
  

• Now we need to apply the masks to the rectangles, we replace

  <!-- line 17, layer 200 -->
  <rect x="0" y="0" width="432" height="144" class="cD"
  />
  <!-- line 22, layer 200 -->
  <rect x="513" y="135" width="432" height="144" class="cC"
  />
  

  by

  <!-- line 17, layer 200 -->
  <g mask="url(#HM1)"><g mask="url(#VM1)">
  <rect x="0" y="0" width="432" height="144" class="cD"
  /></g></g>
  <!-- line 22, layer 200 -->
  <g mask="url(#HM2)"><g mask="url(#VM2)">
  <rect x="513" y="135" width="432" height="144" class="cC"
  /></g></g>
  

• This workshop is not the right place to teach XML and SVG, information about SVG can be found at http://www.w3.org/TR/SVG11. I used the version http://www.w3.org/TR/2003/REC-SVG11-20030114/, in this version of the document the information about masks can be found in section 14.4 named "Masking".
  Some thoughts about the SVG code used in this example:
  • In horizontal gradients I used y1=0 and y2=0, in vertical gradients I used x1=0, x2=0.
  • In horizontal gradients x1 is the x-value of the rect-object of the rectangle the gradient is intended for. x2 is calculated by adding x and width.
    In vertical gradients y1 is the y-value of the rect object, y2 is the summary of y and width.
  • In the masks we use the same x-, y-, width-, and height attributes as in the rectangle we want to mask.
  • We want to have the same border width for the horizontal and the vertical masks. The border width is calculated as the product of stop-offset-difference and coordinates-difference.
    The top/bottom border width is (0.3-0)*144=43.2, the left/right border width is (0.1-0)*432=43.2.
  • The <g> objects can be used to group objects (similar to the compound objects in jFig/XFig). Transformations - i.e. masks - specified in a <g> object are applied to all group members. If a group hierarchy is built, all transformations specified in the <g> objects surrounding a <rect> object are applied.

Converting the logo to PNG

Run

java -jar /opt/batik-1.6/batik-rasterizer.jar testlogo.svg

to convert the logo to PNG.