summaryrefslogtreecommitdiff
path: root/systems/win32/bakoma/programs/svgwrite.html
blob: 665664e38935ad2cc44ae7570aa9c1adea739c48 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<HTML><HEAD><TITLE>BaKoMa TeX - About - Graphics - SVG Export</TITLE>
<META http-equiv=content-type content=text/html;charset=iso-8859-1><LINK 
href="../images/stylesheet.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY background=../images/background.gif>
<TABLE class=header width="100%">
  <TBODY>
  <TR>
    <TD width=250 height=140><IMG 
      style="LEFT: 0px; POSITION: absolute; TOP: 0px" 
      src="../images/bakoma-tex.gif" align=center border=0> 
    <TD>True&nbsp;WYSIWYG LaTeX&nbsp;System </TR></TBODY></TABLE>
<P>
<TABLE cellPadding=8 width="100%">
  <TBODY>
  <TR>
    <TD vAlign=top width=225>
      <UL class=menulevel1>
        <LI class=docs><A 
        href="http://bakoma-tex.com/menu/about.php">&nbsp;About&nbsp;</A>
        <UL class=menulevel2>
          <LI class=doc><A 
          href="http://bakoma-tex.com/menu/texword.php">&nbsp;BaKoMa&nbsp;TeX&nbsp;Word&nbsp;</A>
          <LI class=doc><A 
          href="http://bakoma-tex.com/menu/centaur.php">&nbsp;Centaur&nbsp;+&nbsp;Dview&nbsp;</A>
          <LI class=docs><A 
          href="http://bakoma-tex.com/menu/graphics.php">&nbsp;Graphics&nbsp;</A>
          <UL class=menulevel3>
            <LI class=sdoc>&nbsp;SVG&nbsp;Export</LI></UL>
          <LI class=doc><A 
          href="http://bakoma-tex.com/menu/screenshots.php">&nbsp;Screenshots&nbsp;</A>
          <LI class=doc><A 
          href="http://bakoma-tex.com/menu/samples.php">&nbsp;Samples&nbsp;</A></LI></UL>
        <LI class=docs><A 
        href="http://bakoma-tex.com/menu/download.php">&nbsp;Downloads&nbsp;</A>
        <LI class=docs><A 
        href="http://bakoma-tex.com/menu/purchase.php">&nbsp;Purchase&nbsp;</A>
        <LI class=docs><A 
        href="http://bakoma-tex.com/menu/support.php">&nbsp;Support&nbsp;</A></LI></UL></TD>
    <TD vAlign=top width=*>
      <H2>SVG Generation and Presentation Animation <BR>in BaKoMa TeX for 
      Microsoft Windows</H2>BaKoMa TeX 5.50 introduces generation of <FONT 
      color=#ff0000><B>SVG (Scalable Vector Graphics)</B></FONT> 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 <B>high quality presentations</B>. See samples of animated 
      presentations in <A class=reference 
      href="http://bakoma-tex.com/menu/samples.php">Samples</A> directory. 
      <P><FONT color=#ff0000>To see SVG files you need SVG enabled browser. 
      </FONT><BR>We recommend Microsoft Internet Explorer with Adobe SVG plugin 
      (<A href="http://www.adobe.com/svg/viewer/install/main.html" 
      target=_parent>www.adobe.com/svg/viewer/install/main.html</A>). 
      <H3>BaKoMa TeX supports SVG transparently.</H3>
      <P>You needn't even recompile your documents.<BR>Any DVI file may be saved 
      as SVG by using `<B>File|Generate SVG...</B>' DVI Viewer menu 
      command.<BR>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.<BR>In details: 
      <UL>
        <LI>All TeX Formats (LaTeX 2e, LaTeX 2.09, AmSTeX, Plain TeX, etc.) are 
        supported. 
        <LI>TeX extensions (<B>e-TeX</B> and <B>Omega</B>) are supported. 
        <LI><B>ALL</B> LaTeX packages (including <B>PSTricks</B>, <B>PSFrag</B>, 
        graphics (psfig), draftcopy, etc.) are supported. 
        <LI>Graphical formats: EPS, PDF, JPEG, PNG, GIF, TIFF, PCX, MSP, BMP, 
        WMF, EMF, FIG, HPGL, and DXY are supported.<BR>In advance, animated GIF 
        is imported with animation. 
        <LI>More generally, Any imported or embedded Postscript is supported. 
        <LI>Hyperref is supported, including outline and links. For \Acrobatmenu 
        most general commands (such as NextPage or PrevPage) are supported. 
        <LI>Popular presentation packages: Prosper, PDFScreen, PDFSlide, 
        Seminar, etc. are supported. The existing presentations can be enhanced 
        by adding animation. 
        <LI>All Font Types: OpenType (OTF/TTF), TrueType, Postscript Type1 
        (including MM), Postscript Type 3, and TeX PK are supported. </LI></UL>
      <H3>Adding animations to generated SVG</H3>There are following ways for 
      adding animations into generated SVG files. 
      <OL>
        <LI>Importing Animated GIF files. <FONT color=#800080>[V 6.10]</FONT> 
        <LI>Using SVG.STY package for LaTeX 2e. 
        <LI>Importing multi-page Postscript files. <FONT color=#800080>[V 
        6.10]</FONT> 
        <LI>Using svg-specials in (La)TeX source files. 
        <LI>Using svgmark Postscript operator in imported EPS files. </LI></OL>
      <H4>Importing Animated GIF Files</H4>Importing animated GIF files into 
      your document is simplest way to add animation effects into generated SVG 
      files. LaTeX 2e users may just use `<TT>\includegraphics{foo.gif}</TT>' 
      command of graphics package. 
      <P>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 <I>multi-page 
      Postscript</I>. The way is: GIF2EPS import filter generates <I>multi-page 
      Postscript</I>, such that every page includes subimages extracted from GIF 
      file. So, if you familiar with Postscript using <I>multi-page 
      Postscript</I> is simple and powerful way for creating animated scalable 
      graphics. 
      <H4>Using SVG.STY Package</H4>SVG.STY is LaTeX 2e package which lets you 
      add <B>PowerPoint</B> like animation effects into your documents. 
      BaKoMa&nbsp;TeX distribution includes <A 
      href="http://bakoma-tex.com/samples/svgtour.svgz" target=SVGSamle>SVG.STY Quick 
      Tutorial</A> in SVG format. TeX source of this document is available in 
      `<TT>Samples/Slides/svgtour.tex</TT>' in installed BaKoMa TeX. So, that it 
      demonstrates using the package. 
      <P>Internally, this package uses svg-specials to describe animation. 
      Package source may be found in `<TT>BaKoMa\TEX\LATEX</TT>' 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. 
      <H4>Importing Multi-Page Postscript Files</H4>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 <B>svgframe</B> operator described in 
      this section. 
      <P>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 <B>svgstatus</B> 
      operator lets you to customize this approach. 
      <P>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. 
      <H5>Operators</H5>Handling multi-page Postscript as set of animation 
      frames is supported by two additional Postscript operators: 
      <UL>
        <LI><B>svgstatus</B><BR>It returns <I>true</I> when SVG (or another 
        output with support of frame animation) is under generating.<BR>It 
        returns <I>false</I> when static format (Print, PS, PDF, etc.) is under 
        generation.<BR>This operator is intended to generate different images 
        for static and animated output. 
        <LI><B>svgframe</B><BR>Basic Frame Control<BR>
        <TABLE>
          <TBODY>
          <TR>
            <TD>[ /Start svgframe 
            <TD>starts frames 
          <TR>
            <TD>[ /Next svgframe 
            <TD>starts new frame 
          <TR>
            <TD>[ /End svgframe 
            <TD>ends frames. 
          <TR>
            <TD>[ /Dur &lt;seconds&gt; /Params svgframe
            <TD>defines duration of displaying for current and following 
              frames 
          <TR>
            <TD>[ /repeatCount &lt;num&gt; /Params svgframe
            <TD>defines looping count (default is indefinite) </TR></TBODY></TABLE>
        <P>In importing Postscript figure (and other XXX2EPS) DVIEW does: <PRE>        [ /Start svgframe
        [ /Dur 1 20 div /Params svgframe % Default Speed ...
        /showpage { /Next svgframe initgraphics } bind def
        (figure.eps) run
        [ /End svgframe
</PRE>In fact, this code supports importing multi-page Postscript as 
        animated frames. </LI></UL>
      <H5>Compatibility</H5><B>svgstatus</B> and <B>svgframe</B> 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: <PRE>        /svgstatus where {pop} {/svgstatus false def} ifelse
        /svgframe  where {pop} {/svgframe /cleartomark load def} ifelse
</PRE>
      <H5>Static Presentation of Animation Frames</H5>As mentioned earlier, 
      static output will show superposition of all frames. However, checking 
      values returned by <B>svgstatus</B> you can generate different images for 
      Animated and Static output. 
      <P>Simple example: <PRE>        % 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 { % &lt;frame-number&gt; 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
</PRE>
      <P>In many cases it is reasonable to skip all frames except of one basic 
      figure. <BR>Please note, that your Postscript file may be embedded into 
      another Postscript file (as DVIPS does it). In this reason, using 
      `<TT>currentfile closefile</TT>' is impossible. <BR>Most reasonable way is 
      skipping rest of file up to some tag, like following: <PRE>        % 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.
        %ENDFRAMES
</PRE>
      <H4>Using svg-specials</H4>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. 
      <P>This way is used in SVG.STY file (see in `<TT>BaKoMa\TEX\LATEX</TT>' 
      directory of installed BaKoMa TeX), which may be examined to learn this 
      approach. 
      <P>SVG-special has syntax: <TT>\special{svg:...}</TT>. Body (<TT>...</TT>) 
      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: <PRE>   \special{svg:&lt;g opacity="0"&gt;
      &lt;animate attributeType="CSS" attributeName="opacity" 
         from="0" to="1" fill="freeze" 
         begin="0s" dur="2s"/&gt;}%
      This text should be appeared in 2 seconds
   \special{svg:&lt;/g&gt;}
</PRE>
      <H4>Using svgmark Postscript Operator</H4>Functionality of <B>svgmark</B> 
      operator is similar to svg-special. In fact, it is just Postscript 
      friendly syntax form of SVG constructions. 
      <P>This operator may be used inside <TT>\special{ps: ...}</TT> or inside 
      imported Postscript graphics. 
      <P>Previous example may be recoded with <B>svgmark</B>: <PRE>   [ /opacity 0 /g true svgmark % it is `&lt;opacity="0"&gt;'
   [ /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 `&lt;/g&gt;'
</PRE>Comments:<BR><B>true</B> before <B>svgmark</B> denotes opening 
      tag.<BR><B>false</B> before <B>svgmark</B> denotes closing tag<BR>Absense 
      of boolean before <B>svgmark</B> denotes self closing tag (such as: 
      &lt;animate ..../&gt;).<BR>After removing optional boolean value top name 
      on stack denotes element name.<BR>Other values on stack up to marker ([) 
      should be key-value pairs. 
      <P><TT>Samples/Slides</TT> directory of installied BaKoMa TeX includes 
      EPS-files (atom.eps, diagram.eps, End.eps, etc.) whose use <B>svgmark</B> 
      operator for animation effects. 
      <P>For compatibility with another Postscript interpreters <B>svgmark</B> 
      operator should be defined like following: <PRE>        /svgmark where {pop} {/svgmark /cleartomark load def} ifelse
</PRE></TD></TR></TBODY></TABLE>
<P><BR>
<TABLE width="100%">
  <TBODY>
  <TR>
    <TD width=130>
    <TD>
      <TABLE class=reference width="100%">
        <TBODY>
        <TR>
          <TD align=left>BaKoMa TeX &gt; About &gt; Graphics &gt; SVG Export 
            [OFFLINE]
          <TD align=right>Copyright © 1998-2009, Basil K. Malyshev.
  </TR></TBODY></TABLE></TR></TBODY></TABLE>
</P></BODY></HTML>