True WYSIWYG LaTeX System
Windows     Mac     Linux  

SVG Generation and Presentation Animation
in BaKoMa TeX for Microsoft Windows

BaKoMa TeX 5.50 introduces generation of SVG (Scalable Vector Graphics) from your DVI files. SVG is suitable for Web pages and Presentations. SVG is similar to the PDF in supporting precise positioning and ability to embed fonts. However, ability to add animation to the output, makes SVG the best for producing high quality presentations. See samples of animated presentations on Samples page.

To see SVG files you need SVG enabled browser.

Recent versions of most popular browsers: Chrome, Safari, Firefox are ready.

Also, Internet Explorer (even version 9.0) may show SVG only after installing Adobe SVG Viewer (

BaKoMa TeX supports SVG transparently.

You needn't even recompile your documents.
Any DVI file may be saved as SVG by using `File|Generate SVG...' DVI Viewer menu command.
SVG output is compatible with another output formats (PDF, PS, HTML, View, and Print) so, that the same graphical formats, font formats, and other features are supported.
In details:

  • All TeX Formats (LaTeX 2e, LaTeX 2.09, AmSTeX, Plain TeX, etc.) are supported.
  • TeX extensions (e-TeX and Omega) are supported.
  • ALL LaTeX packages (including PSTricks, PSFrag, graphics (psfig), draftcopy, etc.) are supported.
  • Graphical formats: EPS, PDF, JPEG, PNG, GIF, TIFF, PCX, MSP, BMP, WMF, EMF, FIG, HPGL, and DXY are supported.
    In advance, animated GIF is imported with animation.
  • More generally, Any imported or embedded Postscript is supported.
  • Hyperref is supported, including outline and links. For \Acrobatmenu most general commands (such as NextPage or PrevPage) are supported.
  • Popular presentation packages: Prosper, PDFScreen, PDFSlide, Seminar, etc. are supported. The existing presentations can be enhanced by adding animation.
  • All Font Types: OpenType (OTF/TTF), TrueType, Postscript Type1 (including MM), Postscript Type 3, and TeX PK are supported.

Adding animations to generated SVG

There are following ways for adding animations into generated SVG files.
  1. Importing Animated GIF files. [V 6.10]
  2. Using SVG.STY package for LaTeX 2e.
  3. Importing multi-page Postscript files. [V 6.10]
  4. Using svg-specials in (La)TeX source files.
  5. Using svgmark Postscript operator in imported EPS files.

Importing Animated GIF Files

Importing animated GIF files into your document is simplest way to add animation effects into generated SVG files. LaTeX 2e users may just use `\includegraphics{foo.gif}' command of graphics package.

However, importing GIF files may produce undesired rasterisation artefacts depending on resolution of target display. In fact, importing animated GIF files is implemented via importing multi-page Postscript. The way is: GIF2EPS import filter generates multi-page Postscript, such that every page includes subimages extracted from GIF file. So, if you familiar with Postscript using multi-page Postscript is simple and powerful way for creating animated scalable graphics.

Using SVG.STY Package

SVG.STY is LaTeX 2e package which lets you add PowerPoint like animation effects into your documents. BaKoMa TeX distribution includes SVG.STY Quick Tutorial in SVG format. TeX source of this document is available in `Samples/Slides/svgtour.tex' in installed BaKoMa TeX. So, that it demonstrates using the package.

Internally, this package uses svg-specials to describe animation. Package source may be found in `BaKoMa\TEX\LATEX' directory of installed BaKoMa TeX. In fact, this package is far from final. I am planning to add more animation effects to it in future.

Importing Multi-Page Postscript Files

Main idea of this approach is simple: imported multi-page postscript is translated into generated SVG such that pages are displayed sequentially like to subimages of animated GIF. Default speed of changing pages is 20 pages per second. Of course, this parameter may be changed by svgframe operator described in this section.

In static output (Preview, Print, PDF) imported multi-page Postscript is visible as superposition of all pages. This approach is compatible with DVIPS and previous versions of DVIEW. However, new svgstatus operator lets you to customize this approach.

In fact, animated GIF files are imported via translating they into multi-page Postscript by GIF2EPS filter, which places every subimage into separate page with proper settings. Advantage of using multi-page Postscript directly (instead of using GIF) is that scalable graphics may be used. In other side, using this approach is easier then svg-specials or svgmark operator because knowledge of SVG features isn't required.

Handling multi-page Postscript as set of animation frames is supported by two additional Postscript operators:
  • svgstatus
    It returns true when SVG (or another output with support of frame animation) is under generating.
    It returns false when static format (Print, PS, PDF, etc.) is under generation.
    This operator is intended to generate different images for static and animated output.
  • svgframe
    Basic Frame Control
    [ /Start svgframe starts frames
    [ /Next svgframe starts new frame
    [ /End svgframe ends frames.
    [ /Dur <seconds> /Params svgframe defines duration of displaying for current and following frames
    [ /repeatCount <num> /Params svgframe defines looping count (default is indefinite)

    In importing Postscript figure (and other XXX2EPS) DVIEW does:

            [ /Start svgframe
            [ /Dur 1 20 div /Params svgframe % Default Speed ...
            /showpage { /Next svgframe initgraphics } bind def
            (figure.eps) run
            [ /End svgframe
    In fact, this code supports importing multi-page Postscript as animated frames.
svgstatus and svgframe operators are available only in BaKoMa Postscript interpreter. In this reason, to make such animated Postscript suitable for another Postscript interpreters (at least in static version) you must define these operators as following:
        /svgstatus where {pop} {/svgstatus false def} ifelse
        /svgframe  where {pop} {/svgframe /cleartomark load def} ifelse
Static Presentation of Animation Frames
As mentioned earlier, static output will show superposition of all frames. However, checking values returned by svgstatus you can generate different images for Animated and Static output.

Simple example:

        % Compatibility definitions.
        /svgstatus where {pop} {/svgstatus false def} ifelse
        /svgframe  where {pop} {/svgframe /cleartomark load def} ifelse

        % We define procedure to draw n's frame
        % It gets frame number from operand stack.
        /DrawFrame { % <frame-number> DrawFrame
           % Simple code draws circles of different sizes
           newpath dup dup 0 360 arc stroke
        } bind def

        % We draw many or just one frame depend on svgstatus
        svgstatus {
           0 1 100 { DrawFrame showpage } for
        } {
           50 DrawFrame % Choose most reasonable frame for static ...
        } ifelse

In many cases it is reasonable to skip all frames except of one basic figure.
Please note, that your Postscript file may be embedded into another Postscript file (as DVIPS does it). In this reason, using `currentfile closefile' is impossible.
Most reasonable way is skipping rest of file up to some tag, like following:

        % 1. There is code of first frame, 
        %    which is also used for static presentation.
        0 0 100 0 360 arc stroke

        % 2. Code for skipping following frames.
        svgstatus not {
           /buf 128 string def
           {  currentfile buf readline pop
              (%ENDFRAMES) anchorsearch { pop pop exit } if pop } loop
        } if 

        % 3. Code for following frames
        100 -1 30 { showpage 0 exch 0 exch 0 360 arc stroke } for 

        % 4. Tag for skipping frames unused for static output.

Using svg-specials

One another way of adding animation effects is in using svg specials in TeX source or STY files. This way is suitable to add animation effects to material typesetted by (La)TeX. Generated SVG files are compact. However, to use this way you must be familiar with SVG specification.

This way is used in SVG.STY file (see in `BaKoMa\TEX\LATEX' directory of installed BaKoMa TeX), which may be examined to learn this approach.

SVG-special has syntax: \special{svg:...}. Body (...) of SVG-special is directly send to SVG output, with proper wrapping groups managed by BaKoMa TeX. In generating another output (Print, PS, PDF, etc.) these specials are just ignored. There is simple example:

   \special{svg:<g opacity="0">
      <animate attributeType="CSS" attributeName="opacity" 
         from="0" to="1" fill="freeze" 
         begin="0s" dur="2s"/>}%
      This text should be appeared in 2 seconds

Using svgmark Postscript Operator

Functionality of svgmark operator is similar to svg-special. In fact, it is just Postscript friendly syntax form of SVG constructions.

This operator may be used inside \special{ps: ...} or inside imported Postscript graphics.

Previous example may be recoded with svgmark:

   [ /opacity 0 /g true svgmark % it is `<opacity="0">'
   [ /attributeType /CSS /attributeName /opacity
     /from 0 /to 1 /fill /freeze
     /begin 0 /dur 2 /animate svgmark
      (This text should be appeared in 2 seconds) show
   [ /g false svgmark % it is `</g>'
true before svgmark denotes opening tag.
false before svgmark denotes closing tag
Absense of boolean before svgmark denotes self closing tag (such as: <animate ..../>).
After removing optional boolean value top name on stack denotes element name.
Other values on stack up to marker ([) should be key-value pairs.

Samples/Slides directory of installied BaKoMa TeX includes EPS-files (atom.eps, diagram.eps, End.eps, etc.) whose use svgmark operator for animation effects.

For compatibility with another Postscript interpreters svgmark operator should be defined like following:

        /svgmark where {pop} {/svgmark /cleartomark load def} ifelse