Scalable vector graphics (.svg files)

Why SVG?

Although it has been possible to output graphics to JPG and PNG files from FTN95 programs for a long time, the Scalable Vector Graphics (SVG) format offers some exciting new possibilities. Like other image formats, SVG images can be displayed on websites, but the data they contain corresponds to the raw vectors that compose most images, and the coordinates of these vectors are stored to REAL*8 precision, rather than relating to actual pixels. Thus these images can be shrunk or blown up many times without losing their quality. However, when JPG or PNG images are expanded many times, they become pixelated. More subtly, if a JPG image is created at a certain size, it can't be reduced without considerable loss of quality.

SVG is an example of XML, and is thus a text file (or a ZIP file if it has a file suffix of SVGZ). This means that the data it contains can also be accessed for use in other ways, and also that it is fairly easy to make SVG files in other ways. With care, it is possible to edit an SVG file to perform minor changes to a graph, such as change the title, change the colours, etc. This is particularly useful when preparing theses, books, or scientific papers. It is instructive to open an SVG file using a text editor, to get a better idea of how they are structured.

Because SVG images can be shrunk or expanded at will, they are ideal for creating a variety of types of collages, such as a graph containing a mathematical equation positioned in an unused portion of the graphical space.

Some SVG files can also be read into ClearWin+ applications and displayed. However because the SVG standard is very large and complex, ClearWin+ is restricted to inputting a few types of SVG image. Namely:

1) SVG files previously output from ClearWin+.
2) SVG files prepared from TEX files in a specified way (see below).
3) SVG files prepared in other ways using the same restricted syntax as those created by ClearWin+.

If you examine an SVG file created by ClearWin+, you will see that it is identified by 'ClearWin_output="1"' within the SVG construct. If you add this to an SVG file created in some other way, this will signify that it is suitable for reading back into ClearWin+.

Creating SVG files from graphics programs

Starting with a program that displays graphics on the screen, replace the winio@ call (with its associated %gr (Graphics Region)) with a call of the following form:

    ANS=OPEN_SVG@("MySVGOutput.svg",800,600) 

This will open the given file, which will be emptied and readied to receive exactly the same graphics calls that you would use to display your graph to the screen. It returns 1 if the process succeeds.

It is vital to close the SVG file when it is complete:

    CALL CLOSE_SVG@(0) 

Without this call, the SVG file will be left incomplete when your program finishes, and it will not be usable.

The second and third arguments of OPEN_SVG@ are the width and height of the notional window into which graphics calls will put their data. Thus with the above call to OPEN_SVG@, if your program contains the following graphics call:

    DRAW_LINE_BETWEEND@(0.0D0,0.0D0,799.0D0,599.0D0,255) 

then displaying the resultant SVG file will contain a diagonal red line from the top left corner (0,0) to the bottom right corner (799,599). However, the file can be displayed on a much larger (or smaller) surface without loss of resolution.

ClearWin+ now contains a full set of primitive functions - such as DRAW_LINE_BETWEEND@ - that take REAL*8 arguments. You don't need to use these, but remember that you don't want your calculations to be rounded to integer values as a result of calling the older functions that take integer arguments, otherwise the rounding error will be visible if the SVG file is ultimately displayed in a large format, such as a poster. Functions using the D suffix can still be called to prepare non-SVG graphics, so the preparation of your graphics can be identical whatever the destination.

Reading SVG files previously output by ClearWin+

At any point where you could call a graphics primitive, you may make a call of the following form:

    CALL IMPORT_SILVERFROST_SVG@("Something.svg",X_OFFSET,Y_OFFSET, SCALE) 

X_OFFSET, Y_OFFSET and SCALE are REAL*8 quantities that specify the the position of the top left corner of the SVG image. The scale argument would typically be 1.0d0, but as explained above, an SVG file can be displayed at any resolution by adjusting this argument.

The image will be drawn into the currently open drawing surface.

Reading TEX files into ClearWin+

Files ending with a .TEX suffix are assumed to contain mathematical formulae or other objects that are designed to be processed by LATEX. In order to use this feature it is necessary to install MIKTEX implementation of LATEX, which should be included in the PATH environment variable. Other implementations may well work, but the feature has only been tested with MIKTEX.

To read a TEX file into ClearWin+ graphics, make a call of the following form:

    CALL IMPORT_TEX_OBJECT@("MyStuff.tex",X_OFFSET,Y_OFFSET, SCALE,WIDTH,HEIGHT) 

The system calls MIKTEX commands to convert the tex file into a corresponding SVG file. This feature is experimental, and may not always be successful. The SVG file is then read into a graphics area in the same way as above, with an important difference:

The conversion to TEX results in a large white space border, which is removed before the image is displayed. Therefore the REAL*8 arguments, WIDTH and HEIGHT return the size of the image that is actually drawn into the graphics area.

Normally the SVG file is deleted before this call returns, but it can be retained using a prior call to

    CALL SAVE_TEX_SVG_CONVERSION@() 

Since conversions from TEX can take a few seconds, one use of this function is to save the SVG file and use it rather than the TEX file when executing your program.

Sample Program

Here is a sample program illustrating a call to IMPORT_TEX_OBJECT@. The file called formula.tex is not included.

WINAPP 
INCLUDE <windows.ins>
DOUBLE PRECISION graphics_width,graphics_depth,scale,x_disp,y_disp
INTEGER x1,y1,x2,y2,k,control,border
  control=-1
  k=winio@("%gr[smooth4]%lw",640,480,control) 
  x_disp=100.0d0; y_disp=100.0d0; scale=1.5d0
  CALL set_svg_option@("Silent_Tex") 
  CALL import_tex_object@("formula.tex",x_disp,x_disp,scale,graphics_width,graphics_depth) 
  border=5
  x1=x_disp-border; x2=x_disp+graphics_width+border
  y1=y_disp-border; y2=y_disp+graphics_depth+border
  CALL draw_line_between@(x1,y1,x2,y1,255)
  CALL draw_line_between@(x1,y2,x2,y2,255) call draw_line_between@(x1,y1,x1,y2,255) 
  CALL draw_line_between@(x2,y1,x2,y2,255)
END 

Sample Program

Clearwin+ can be used to generate SVG files by calling OPEN_SVG@ before drawing the graphics (this is analogous to generating printer output).

INTEGER FUNCTION OPEN_SVG@(FILE, NX, NY)
CHARACTER(*) FILE
INTEGER NX,NY

INTEGER FUNCTION OPEN_SVG1@(FILE, NX, NY, ID)
CHARACTER(*) FILE
INTEGER NX,NY,ID

INTEGER FUNCTION CLOSE_SVG@(ID)
INTEGER ID

NX and NY specify the bounding box into which the graphics are to be drawn. FILE is the path of the file. If ID is zero then the current "drawing surface" is selected when the file is closed otherwise ID is the user's identifier of the graphics object to be selected (see SELECT_GRAPHICS_OBJECT@). Both functions return 1 on success or zero on failure. Note that ID is an input value in OPEN_SVG1@.

Here is a sample program...

INCLUDE <windows.ins>
INTEGER i,icolor,ans 
DOUBLE PRECISION x1, x2, y1, y2, x(3), y(3) 
  ans = open_svg@("sample.svg",800,600) 
!!! i = winio@("%gr%lw",800,600,ictrl) 
  x1 = 200.0d+00; y1 = 200.0d+00; x2 = 200.0d+00; y2 = 500.0d+00 
  CALL set_line_width@(10) 
  icolor = RGB@(128,128,128) 
  CALL draw_line_betweenD@(x1, y1, x2, y2, icolor) 
  x1 = 200.0d+00; x2 = 600.0d+00; y1 = 200.0d+00; y2 = 200.0d+00 
  icolor = RGB@(255,0,0) 
  CALL set_line_style@(PS_GEOMETRIC+PS_ENDCAP_SQUARE+PS_JOIN_ROUND) 
  CALL draw_line_betweenD@(x1, y1, x2, y2, icolor) 
  x(1) = 300.0d+00; x(2) = 500.0d+00; x(3) = 300.0d+00 
  y(1) = 300.0d+00; y(2) = 400.0d+00; y(3) = 500.0d+00 
  icolor = RGB@(0,0,255) 
  CALL set_line_style@(PS_GEOMETRIC+PS_ENDCAP_SQUARE+PS_JOIN_MITER) 
  CALL draw_polylineD@(x, y, 3, icolor) 
  x(1) = x(1)+100.0d+00; x(2)=x(2)+100.0d+00; x(3)=x(3)+100.0d+00 
  CALL set_line_style@(PS_GEOMETRIC+PS_ENDCAP_SQUARE+PS_JOIN_ROUND) 
  CALL draw_polylineD@(x, y, 3, icolor) 
  x1 = 200.0d+00; x2 = 600.0d+00; y1 = 50.0d+00; y2 = y1 
  icolor = RGB@(0,255,0) 
  CALL set_line_style@(PS_GEOMETRIC+PS_ENDCAP_SQUARE) 
  CALL set_line_width@(20) 
  CALL draw_line_betweenD@(x1, y1, x2, y2, icolor) 
  y1 = 100.0d+00; y2 = y1 
  CALL set_line_style@(PS_GEOMETRIC+PS_ENDCAP_ROUND) 
  CALL draw_line_betweenD@(x1, y1, x2, y2, icolor) 
  y1 = 150.0d+00; y2 = y1 
  CALL set_line_style@(PS_GEOMETRIC+PS_ENDCAP_FLAT) 
  CALL draw_line_betweenD@(x1, y1, x2, y2, icolor) 
  ans = close_svg@(0) 
END 

The EditSVG utility

EditSVG is a Silverfrost application that can be used to compose images from a number of SVG sources. You can use the menu to open SVG files previously written by ClearWin+, or TeX files. The latter are converted to SVG files before being read in. TVG and TeX files may also be dragged and dropped on to the main window.

The next step is to position each image by clicking on it and dragging it into position. It is possible to use the menu to display a grid to help with this process. The grid can either be passive, or act to snap each image into alignment as it is moved. By right clicking on an image, it is possible to shrink or expand it as required.

Remember that, because these images are derived from SVG's, they scale very well, producing results as illustrated in the examples below.

There is no particular order to the operations - you can adjust everything until the result is as desired. As you drag the images, the one being dragged will overlay any others, with the exception that, if an image totally obscures another image, this will pop to the top. You can then use the menu to save the result to another SVG file.

After this step you can either close the program, or you can continue to work on the images on the screen, and save more results.

Examples

One powerful feature of the Clearwin+ SVG implementation is the ability to drag and drop LaTeX source code directly onto a graph in order to label the title or legends using mathematical equations. Equations and chemical formulas can also be added to a graph in this way to illustrate the graph contents.

PDF documents containing numerous worked examples along with LaTeX code are available from https://simfit.org.uk/tutorials.html and some selected graphs from this document follow.

First note that, although all the SVG functionality available within Silverfrost FTN95 can be accessed using the subroutine calls described previously, the utility EditSVG provides the ability to easily manipulate SVG and TEX files. This is distributed with FTN95 as a free standing executable, but can also be opened directly using the Fortran code

 CALL EDITSVG_DRIVER 

which then displays an interface to EditSVG that also provides links to several test files that illustrate SVG functionality. These can be used from this interface by pressing the [Demo] button on the file-open control, giving easy access to a selection of demonstration files from the folder

 C:\Program Files (x86)\Silverfrost\Simdem\dem 

Case 1: Planting a graph as an inset into the body of a main plot

Consider an experiment where fitting one then two exponential functions has been undertaken to estimate goodness of fit and where model discrimination has also been assisted by alternatively plotting in semi-log space.

To create the finished plot the file "exfit_normalplot.svg" is first read into EditSVG followed by the file "exfit_logplot.svg", using the option to trim extraneous white space, then finally scaling the logplot and re-positioning it to create the finished plot "exfit.svg".

Case 2: Importing LaTeX source into a graph

The first figure below illustrates using LaTeX source to add a mathematical equation to a graph, the second the result after adding a chemical formula, and the third using LaTeX for a plot legend.

The LaTeX source for the normal cumulative distribution is

      \documentclass[12pt]{article}
      \usepackage{amsmath,bm}
      \pagestyle{empty}
      \begin{document}
      \Large
      \[
         \frac{1}{\sigma \sqrt{2\pi}}
         \int\limits_{-\infty}^x
         \exp -\left\{
         \frac{1}{2} \left( \frac{t-\mu}{\sigma} \right)^2 \right\}\,dt
      \]
      \end{document}

and, when a file containing this code is input into EditSVG to add to the cumulative distribution plot, the LaTeX is used to create a SVG file with extraneous white space trimmed off, which is always necessary for TEX files. All that remains is to re-position and scale the formula.

The LaTeX source for the y-axis label on the beta distribution plot is shown next.

      \documentclass[12pt]{article}
      \usepackage{amsmath}
      \usepackage{graphicx}
      \pagestyle{empty}
      \begin{document}
      \Large
      \rotatebox{90}{$ f_X(x:\alpha,\beta) = \frac{\Gamma(\alpha +
      \beta)}{\Gamma(\alpha)\Gamma(\beta)}x^{\alpha - 1}(1 - x)^{\beta - 1}$}
      \end{document}

Case 3: Creating collages

By using EditSVG it is possible to import several files and then proceeed to scale the individual files and arrange them into an appropriate array of sub-graphs.

When the sculptured end product has been created it is then possible to create an export-image file (*.ISVG) which simply contains the filenames, scaling factors, and coordinates. Importing such files into EditSVG then re-creates the collage.

The first collage contains a number of LaTeX scripts for mathematical expressions and chemical structures. These were input sequentially then scaled and rearranged.

    

The second collage just contains two files, first the LaTeX source for the maths defining the binomial and Poisson distributions.
Then a SVG file containing the bar chart for testing the Goodness of Fit of a Poisson distribution to observed frequencies was added.

    

Finally, note that if you use the Fortran code

CALL EDITSVG_DRIVER

then choose to input a number of SVG files using a library file, an open-file dialogue will appear from which you can press the [Demo] button and open the library file "SVG_collage.tfl", which will cause an ISVG file generated from this library file to be input into EditSVG. Then you can create a collage and practise moving the SVG files displayed to create a collage that can be exported as SVG or PNG. Note that a grid can be displayed with snap-to nearest-corner functionality to assist lining up the rows and columns of the collage.