fig2vect 1.1.23
Get fig2vect at SourceForge.net. Fast, secure and Free Open Source software downloads

fig2vect 1.1.23

 

Workshop

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.

Test-Logo
This table cell has a white background.		 Test-Logo
This table cell has a lightred background.		 Test-Logo
This table cell has a lightgreen background.		 Test-Logo
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:

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 inch2400120072
1/2 inch120060036
1/4 inch60030018
1/8 inch3001509
1/16 inch150754.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

Set units to inches

We use inches as units.

Set magnetic grid

We set up a magnetic grid.

Create a rectangle

We create a rectangle...

First rectangle point

...so we have to click once for the first corner point...

Final point

...and again for the opposite corner point.

Edit object

To modify the rectangle's properties we click the ``Edit object'' button...

Choose object

...and click on the object to edit.

Dialogbox Edit rectangle

In the ``Edit rectangle'' dialog box...

Set layer number

...we set the layer number to 999 (the bottom layer)...

Apply changes

...and click ``OK'' to apply the changes.

Zoom out

We zoom out to see the entire logo.

Create text

To add the text we click the ``Create text'' button.
Before we add the text...

Change default font

...we change the default font...

Choose Palatino-Bold

...to Palatino bold and...

Choose default text size

...change the text size...

Enter text size

...to 96 pt (a really huge text size).

Change text alignment

We also change the text alignment...

Choose centered text

...to centered.

Click text position

Now we can click on the text anchor point...

Enter text

...and type the text.

Enter another text

For the second text we only need to click the ``Create text'' button, click the anchor position and type the text.

Create text background

The text background is a rectangle, so we click ``Create rectangle'',...

Click first point

...click on the first corner point...

Click final point

...and on the opposite corner point.

Copy an object

The background of the other text is a similar rectangle, so we copy the object by clicking teh ``Copy an object'' button...

Choose object to copy

...select the object to copy (the rectangle)...

Choose position

...and choose the final position by cklicking the mouse.

Edit text background

To change the rectangle properties (i.e. color and layer) we click the ``Edit object'' button...

Choose object to edit

...click on the rectangle to choose the object to edit and do the changes in the dialog box.

Select line pen color

To change the rectangle color we click in the color area...

Color selection

...and choose a color from the palette.

Choose line width

To change the line width we click the ``Line width'' button...

Select line width value

...and choose a new line width from the list by pressing one of the buttons.

Choose fill color

To choose another fill color we click the ``Select fill color'' button...

Color selection

...and choose a color from the palette.

Choose fill style

To choose the fill style...

Select fill style

...we click on the ``Select fill pattern'' button and choose ``PURE''.

Change layer number

To ensure the rectangle is shown behind the text we need to assign a higher layer number to the rectangle. We click the ``Set layer'' button and...

Enter layer number

...enter a layer number higher than the layer number of the texts (the texts have the default layer number 100, so we can use 200 here).

Apply changes

We use the ``OK'' button to apply the changes. The same procedure can be used to change the other rectangles properties.

Create compound object

We want to group a text and a rectangle to apply move operations to both objects equally. So we group them using the ``Create a compound object'' button.

Choose text as first part of compound

We click on the left text to select it...

Choose background as second part of compound

and on the rectangle belonging to this text...

Right-click to finish compound

...and finish the compound object selection by clicking the right mouse button.
The same procedure is used to group the other text and the rectangle.

Move compound object

To move a text/rectangle group we click the ``Move object'' button,...

Choose object to move

...click on the compound object to choose the object to move, move the mouse to move the object and...

Choose new position

...click to specify the object position (and end the move operation).

Choose other object to move

We also move the other object to a position near the lower right corner.

Release object near target position

The distance of the magnetic grid points is too large, so we can not place the rectangle directly in the lower right corner, so we choose a place next to the intended position.

Zoom in

Zooming in and out also modifies the magnetic grid, so we zoom in.

Choose object for fine-positioning

We are still in ``move object'' mode, so we can select the rectangle again...

Move object to final position

...and move it to the final position...

Release object at final position

...and release it there.

Zoom out

We zoom out again to see the entire logo.

Create a polyline

To create the strokes we use the ``Create a polyline'' button.

Click on first point

We click once for the first point...

Click on second point

...once for the corner point...

Right-click on final point

...and we click the right mouse key on the final point.

Edit polyline attributes

To change the polyline line width we use the ``Edit an object'' button...

Choose polyline to edit

...and click on the polyline.

Apply changes

After changing the line width to 6 we click ``OK'' to apply the changes.

Copy an object

The other polyline should be a mirrored copy, so the use the ``Copy an object'' button...

Choose polyline as object to copy

...and click on the polyline to copy it...

Place new object outside

...and place the copy outside the logo.

Mirror on x-axis

For mirroring we click the ``Mirror on x-axis'' button...

Mirror polyline

...and click on the new polyline.

Mirror on y-axis

Next we click the ``Mirror on y-axis'' button and...

Mirror polyline

...click the polyline again.

Move object

We zoom in and move the polyline...

Move polyline

...to the correct position.

Place polyline


Edit object

Finally we need to change some properties of the background rectangle. We use the ``Edit object'' button...

Choose background rectangle

...and click on the background rectangle.

Background rectangle attributes

We change line color and background color to white, line width to 0, fill pattern to ``NONE'' and layer number to 999.

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.

SVG file in Squiggle

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:

NameUsage
HG1horizontal gradient for the yellow rectangle
HM1horizontal mask for the yellow rectangle
VG1vertical gradient for the yellow rectangle
VM1vertical mask for the yellow rectangle
HG2horizontal gradient for the red rectangle
HM2horizontal mask for the red rectangle
VG2vertical gradient for the red rectangle
VM2vertical 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.

Dirk Krause
Schmalkalden (Germany), 2009-12-01
http://fig2vect.sourceforge.net