Example |
PDF manual "fig2vect.pdf" available german version "f2vde.pdf" available too |
| Simple example | ||||||
| Workshop: Create a partial transparent PNG for use as web logo | ||||||
Example source
In our example we use the drawing
doc1.fig
known from
Overview page
as listed below:
#FIG 3.2 Portrait Center Metric A6 100.00 Single -2 1200 2 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 990 900 450 180 990 900 1440 720 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 2250 900 450 180 2250 900 2700 720 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 3600 900 450 180 3600 900 4050 720 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 2250 2565 450 180 2250 2565 2700 2385 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 1350 4230 450 180 1350 4230 1800 4050 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 2610 1935 1890 1935 1890 1530 2610 1530 2610 1935 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 2250 1125 2250 1485 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 2250 1980 2250 2340 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 2610 3600 1890 3600 1890 3195 2610 3195 2610 3600 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 3510 3600 2790 3600 2790 3195 3510 3195 3510 3600 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 1710 3600 990 3600 990 3195 1710 3195 1710 3600 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 2250 2790 2250 3150 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 1350 3645 1350 4005 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 1350 4455 1350 4815 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 1710 5265 990 5265 990 4860 1710 4860 1710 5265 2 2 0 0 7 7 999 0 -1 0.000 0 0 -1 0 0 5 180 540 4410 540 4410 5445 180 5445 180 540 2 2 0 0 7 7 999 0 -1 0.000 0 0 -1 0 0 5 360 540 4230 540 4230 5490 360 5490 360 540 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 945 1125 945 1395 1530 1575 1800 1575 0.000 1.000 1.000 0.000 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 3555 1125 3555 1395 2970 1575 2700 1575 0.000 1.000 1.000 0.000 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 1980 2745 1935 2835 1530 2835 1350 3150 0.000 1.000 1.000 0.000 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 2520 2745 2565 2835 2970 2835 3150 3150 0.000 1.000 1.000 0.000 4 1 0 50 0 28 12 0.0000 4 195 345 2250 1800 *.fig\001 4 1 0 50 0 28 12 0.0000 4 180 615 3600 945 WinFig\001 4 1 0 50 0 28 12 0.0000 4 180 315 2250 945 jFig\001 4 1 0 50 0 28 12 0.0000 4 180 390 990 945 XFig\001 4 1 0 50 0 28 12 0.0000 4 180 390 2250 3465 *.eps\001 4 1 0 50 0 28 12 0.0000 4 180 405 3150 3465 *.svg\001 4 1 0 50 0 28 12 0.0000 4 180 390 1350 3465 *.mp\001 4 1 0 50 0 28 12 0.0000 4 165 510 1350 4275 mpost\001 4 1 0 50 0 28 12 0.0000 4 180 465 1350 5130 *.mps\001 4 1 18 50 0 30 12 0.0000 4 180 660 2250 2610 fig2vect\001
Use with LaTeX
Next we create a LaTeX file ex1.tex, just some text and an included image:
\documentclass[12pt]{scrartcl}
\usepackage{ifpdf}
\usepackage[latin1]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{textcomp}
\usepackage{mathptmx}
\usepackage[scaled=.92]{helvet}
\usepackage{courier}
\usepackage{enumerate}
\usepackage{varioref}
\usepackage{color}
\ifpdf
\usepackage[activate=normal]{pdfcprot}
\usepackage[pdftex]{graphicx}
\usepackage{epstopdf}
\pdfcompresslevel=9
\usepackage[
pdftex,
a4paper=true,
pdftitle={The fig2vect manual},
pdfsubject={fig2vect},
pdfauthor={Dipl.-Ing. D. Krause},
colorlinks=true,
bookmarks,
bookmarksnumbered,
linkcolor=linkgreen,
pdfpagemode=None,
pdfstartview=FitH
]{hyperref}
\else
\usepackage[dvips]{graphicx}
\DeclareGraphicsRule{.png}{eps}{.bb}{`bmeps #1}
\usepackage[dvips]{hyperref}
\fi
\definecolor{linkgreen}{rgb}{0,0.5,0}
\definecolor{red}{rgb}{1,0,0}
\def\theyear{2004}
\author{Dirk~Krause}
\title{The fig2vect short overview}
\renewcommand*{\sectfont}{\bfseries}
\begin{document}
\begin{sloppy}
\section{The fig2vect program}
\begin{figure}
{\centering
\includegraphics[width=0.5\linewidth]{doc1}
\caption{Data flow}
\label{fig:data-flow}
}
\end{figure}
The fig2vect program processes Fig files (``*.fig'') produced
by graphics applications, i.e. XFfig, jFig or WinFig.
Possible output formats are MetaPost, \textsc{eps} and
\textsc{svg}. The MetaPost files (``*.mp'') can be used
as input for the MetaPost program (``mp'' or ``mpost'')
to produce ``*.mps'' files.
The ``*.mps'' files can be referenced by \LaTeX{} sources,
these sources can be processed using either
\LaTeX{} or pdf\LaTeX{}.
The ``*.eps'' files can be referenced by \LaTeX{} sources
too. You need the ``epstopdf'' package to run
pdf\LaTeX{} on these sources.
The ``*.svg'' files can be used in \textsc{html} files
on Web sites.
\end{sloppy}
\end{document}
As we want to use the same fonts in the image as in the
text we create a stripped-down preamble
pre1.tex:
\documentclass[12pt]{scrartcl}
\usepackage[latin1]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{textcomp}
\usepackage{mathptmx}
\usepackage[scaled=.92]{helvet}
\usepackage{courier}
Now we can convert the doc1.fig file to doc1.mp using the command
fig2vect -lmp -o preamble.file=pre1.tex doc1.fig doc1.mp -o normal.text=handling:tex,font:similar,size:fig,mboxentered in one line. (The line is long, so it is possibly wrapped by your webbrowser or on the printout.) The command tells fig2vect to pass normal text to TeX/LaTeX, the preamble from file pre1.tex must be used to process the texts. We want to choose fonts based on setup made in the preamble having features (serif/sans-serif/monospace, upright/italic, normal/bold) similar to the fonts specified in the Fig file. The font sizes are obtained from the Fig file.
Now we can run
mpost -tex=latex doc1 mv doc1.0 doc1.mpsto create the *.mps file. On non-Unix/Linux-systems you may need to use "move" instead of "mv".
Finally we run
pdflatex ex1 && pdflatex ex1 && pdflatex ex1to produce the PDF file ex1.pdf.
Now we create files ex2.tex, ex3.tex, ex4.tex and replace the section
\usepackage{mathptmx}
\usepackage[scaled=.92]{helvet}
\usepackage{courier}
by
\usepackage{newcent}
or
\usepackage{bookman}
or
\usepackage{mathpazo}
The same changes are applied to the files
pre2.tex,
pre3.tex and
pre4.tex
which are copies of pre1.tex.Now we produce doc2.mp, doc3.mp and doc4.mp by running
fig2vect -lmp -opreamble.file=pre2.tex doc1.fig doc2.mp -onormal.text=handling:tex,font:similar,size:fig,mbox fig2vect -lmp -opreamble.file=pre3.tex doc1.fig doc3.mp -onormal.text=handling:tex,font:similar,size:fig,mbox fig2vect -lmp -opreamble.file=pre4.tex doc1.fig doc4.mp -onormal.text=handling:tex,font:similar,size:fig,mboxThe files doc2.mps, doc3.mps and doc4.mps are created by
mpost -tex=latex doc2 mv doc2.0 doc2.mps mpost -tex=latex doc3 mv doc3.0 doc3.mps mpost -tex=latex doc3 mv doc3.0 doc3.mpsIn ex2.tex, ex3.tex and ex4.tex we change the name of the included image to doc2.mps, doc3.mps and doc4.mps
Now we run
pdflatex ex2 && pdflatex ex2 && pdflatex ex2 pdflatex ex3 && pdflatex ex3 && pdflatex ex3 pdflatex ex4 && pdflatex ex4 && pdflatex ex4This results in additional PDF files ex2.pdf, ex3.pdf and ex4.pdf. Each of the files uses another font family, but in each file the font family used in the image is the same as the font family used in the normal text..
Preparing an SVG image for a web site
Simple SVG file
An SVG image can be created using
fig2vect -lsvg.windows doc1.fig doc1.svgThis image can be embedded in HTML code using
<embed src="doc1.svg" type="image/svg+xml" width="233" height="298">
Adding interactivity
Now we want to add some actions on mouse movements and some hyperlinks:
- If the mouse is moved inside an ellipse we want to change the fill color to yellow.
- The program names inside the ellipses should have hyperlinks assigned pointing to the programs homepage.
The JavaScript code in file doc1.js looks like this
var docroot;
var e1, e2, e3, e4, e5;
function handler_onload(evt)
{
docroot = evt.target;
e1 = docroot.getElementById("e1");
e2 = docroot.getElementById("e2");
e3 = docroot.getElementById("e3");
e4 = docroot.getElementById("e4");
e5 = docroot.getElementById("e5");
}
function fill_yellow(evt)
{
evt.getTarget().setAttribute("fill", "yellow");
}
function set_e1_yellow(evt)
{
e1.setAttribute("fill", "yellow");
}
function set_e2_yellow(evt)
{
e2.setAttribute("fill", "yellow");
}
function set_e3_yellow(evt)
{
e3.setAttribute("fill", "yellow");
}
function set_e4_yellow(evt)
{
e4.setAttribute("fill", "yellow");
}
function set_e5_yellow(evt)
{
e5.setAttribute("fill", "yellow");
}
function set_e1_white(evt)
{
e1.setAttribute("fill", "white");
}
function set_e2_white(evt)
{
e2.setAttribute("fill", "white");
}
function set_e3_white(evt)
{
e3.setAttribute("fill", "white");
}
function set_e4_white(evt)
{
e4.setAttribute("fill", "white");
}
function set_e5_white(evt)
{
e5.setAttribute("fill", "white");
}
function fill_white(evt)
{
evt.getTarget().setAttribute("fill", "white");
}
In the next step we have to connect this file to our Fig drawing.
We edit the drawing in a text editor and insert a special comment
between line 8 (transparent color) and 9 (resolution, coord-system)
as shown here:
#FIG 3.2 Portrait Center Metric A6 100.00 Single -2 ## svg: js library = doc1.js 1200 2As we want to use the function "handler_onload()" as an event handler for the global onload event we add another special comment:
#FIG 3.2 Portrait Center Metric A6 100.00 Single -2 ## svg: js library = doc1.js ## svg: onload = handler_onload(evt) 1200 2Next we add id attributes to the ellipses and attach the handlers for mouseover and mouseout events (shown for one ellipse only):
#FIG 3.2 Portrait Center Metric A6 100.00 Single -2 ## svg: js library = doc1.js ## svg: onload = handler_onload(evt) 1200 2 ## svg: onmouseover = fill_yellow(evt) ## svg: onmouseout = fill_white(evt) ## svg: id = e1 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 990 900 450 180 990 900 1440 720 ...Now we have to add event handlers to the texts, only shown for one of the texts:
## svg: onmouseover = set_e1_yellow(evt) ## svg: onmouseout = set_e1_white(evt) ## svg: xlink:href=http://www.xfig.org/ ## svg: xlink:title = The XFig program 4 1 0 50 0 28 12 0.0000 4 180 390 990 945 XFig\001The complete file doc2.fig now looks like this:
#FIG 3.2 Portrait Center Metric A6 100.00 Single -2 ## svg: js library = doc1.js ## svg: onload = handler_onload(evt) 1200 2 ## svg: onmouseover = fill_yellow(evt) ## svg: onmouseout = fill_white(evt) ## svg: id = e1 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 990 900 450 180 990 900 1440 720 ## svg: onmouseover = fill_yellow(evt) ## svg: onmouseout = fill_white(evt) ## svg: id = e2 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 2250 900 450 180 2250 900 2700 720 ## svg: onmouseover = fill_yellow(evt) ## svg: onmouseout = fill_white(evt) ## svg: id = e3 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 3600 900 450 180 3600 900 4050 720 ## svg: onmouseover = fill_yellow(evt) ## svg: onmouseout = fill_white(evt) ## svg: id = e4 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 2250 2565 450 180 2250 2565 2700 2385 ## svg: onmouseover = fill_yellow(evt) ## svg: onmouseout = fill_white(evt) ## svg: id = e5 1 1 0 1 0 7 50 0 -1 0.000 1 0.0000 1350 4230 450 180 1350 4230 1800 4050 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 2610 1935 1890 1935 1890 1530 2610 1530 2610 1935 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 2250 1125 2250 1485 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 2250 1980 2250 2340 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 2610 3600 1890 3600 1890 3195 2610 3195 2610 3600 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 3510 3600 2790 3600 2790 3195 3510 3195 3510 3600 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 1710 3600 990 3600 990 3195 1710 3195 1710 3600 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 2250 2790 2250 3150 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 1350 3645 1350 4005 2 1 0 1 0 7 50 0 -1 0.000 0 0 -1 1 0 2 1 1 1.00 60.00 120.00 1350 4455 1350 4815 2 2 0 1 0 7 50 0 -1 0.000 0 0 -1 0 0 5 1710 5265 990 5265 990 4860 1710 4860 1710 5265 2 2 0 0 7 7 999 0 -1 0.000 0 0 -1 0 0 5 180 540 4410 540 4410 5445 180 5445 180 540 2 2 0 0 7 7 999 0 -1 0.000 0 0 -1 0 0 5 360 540 4230 540 4230 5490 360 5490 360 540 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 945 1125 945 1395 1530 1575 1800 1575 0.000 1.000 1.000 0.000 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 3555 1125 3555 1395 2970 1575 2700 1575 0.000 1.000 1.000 0.000 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 1980 2745 1935 2835 1530 2835 1350 3150 0.000 1.000 1.000 0.000 3 0 0 1 0 7 50 0 -1 0.000 0 1 0 4 1 1 1.00 60.00 120.00 2520 2745 2565 2835 2970 2835 3150 3150 0.000 1.000 1.000 0.000 4 1 0 50 0 28 12 0.0000 4 195 345 2250 1800 *.fig\001 ## svg: onmouseover = set_e3_yellow(evt) ## svg: onmouseout = set_e3_white(evt) ## svg: xlink:href = http://www.winfig.org ## svg: xlink:title = The WinFig program 4 1 0 50 0 28 12 0.0000 4 180 615 3600 945 WinFig\001 ## svg: onmouseover = set_e2_yellow(evt) ## svg: onmouseout = set_e2_white(evt) ## svg: xlink:href=http://tech-www.informatik.uni-hamburg.de/applets/jfig ## xvg: xlink:title = The jFig program 4 1 0 50 0 28 12 0.0000 4 180 315 2250 945 jFig\001 ## svg: onmouseover = set_e1_yellow(evt) ## svg: onmouseout = set_e1_white(evt) ## svg: xlink:href=http://www.xfig.org/ ## svg: xlink:title = The XFig program 4 1 0 50 0 28 12 0.0000 4 180 390 990 945 XFig\001 4 1 0 50 0 28 12 0.0000 4 180 390 2250 3465 *.eps\001 4 1 0 50 0 28 12 0.0000 4 180 405 3150 3465 *.svg\001 4 1 0 50 0 28 12 0.0000 4 180 390 1350 3465 *.mp\001 ## svg: onmouseover = set_e5_yellow(evt) ## svg: onmouseout = set_e5_white(evt) ## svg: xlink:title = The MetaPost program 4 1 0 50 0 28 12 0.0000 4 165 510 1350 4275 mpost\001 4 1 0 50 0 28 12 0.0000 4 180 465 1350 5130 *.mps\001 ## svg: onmouseover = set_e4_yellow(evt) ## svg: onmouseout = set_e4_white(evt) ## svg: xlink:href=http://fig2vect.sourceforge.net/index.html ## svg: xlink:title = The fig2vect program 4 1 18 50 0 30 12 0.0000 4 180 660 2250 2610 fig2vect\001Finding which e1...e5 belongs to which ellipse is a little bit tricky. Use either "trial and error" or color e1 red, e2 green, e3 blue...
To convert doc2.fig to doc2.svg we use
fig2vect -lsvg.windows doc2.fig doc2.svgNow we can embed the drawing using
<embed src="doc2.svg" type="image/svg+xml" width="233" height="298">
Workshop: Create a partially transparent PNG for use as web logo
I have prepared a workshop how to use jFig and fig2vect together
with Batik and your favorite text editor to create a
partially transparent PNG file for use as web logo.
This is a little beside from the average use of fig2vect to convert
images for use with LaTeX.
Please note: The text and the embedded images use
approx. 1,77 MB.
Click the link to visit the workshop at
http://fig2vect.sourceforge.net/workshop/workshop.html.