PSTricks to SVG

Question

I would like to make block diagrams using the pst-sigsys package (as demonstrated here: http://squobble.blogspot.com/2009/12/drawing-beautiful-block-diagrams-in_04.html). I can do that and export to PDF or PS and the like.

What's the best way to get the blocks rendered on a web page? I am thinking SVG. How can I accomplish that?

Answer 1

You can create a PostScript (PS) version of the PSTricks picture (also: PS or PDF version of a PGF/TikZ picture) using LaTeX. I would recommend the use of the standalone class to produce a file which only holds the picture without any other material. Then import the PS or PDF in a vector graphic editor with supports the format as well as SVG output. I would recommend Inkscape which is free, open-source and available for Linux, Mac and MS Windows. Simply load the PS or PDF file and choice "Save As" and select "Plain SVG" output. These files can the be viewed with modern browsers and included into websites.

Inkscape also supports command line parameter (at least the Linux version I have) and therefore you can use the following commands to convert PSTricks to SVG:

latex file.tex
dvips file.dvi
inkscape file.ps --export-plain-svg=file.svg

^{Note: I used the first example from the website you linked as a test. I removed the figure environment and used the standalone class instead. There seems to be an issue with the bounding box. The s[n] and e[n] at the left and right, respectively, are not fully included. I fixed this with the border=5mm option of the standalone class. I'm not sure if it is an issue of PSTricks or maybe dvips.}

Answer 2

M. Gieseking's dvisvgm is the state-of-the-art utility for generating SVG from LaTeX input.

Unlike Inkscape it does not require intermediate PostScript. Moreover, it is part of TeXLive and MiKTeX.

SVG output:

Compile to SVG from LaTeX input with:

latex block-diagram
latex block-diagram
dvisvgm --exact --font-format=woff --zoom=-1 diagram

Embed (static) SVG into HTML using the <img> tag:

<img src="https://url/of/block-diagram.svg">

File block-diagram.tex, taken from the page linked in the question:

\documentclass{article}
\usepackage{pst-sigsys}

\pagestyle{empty}

\begin{document}

\begin{figure}[ht]
\centering %
\begin{pspicture}[showgrid=false](0.5,-1.2)(9,1.55)
%--- Define blocks ---
\rput(0.5,0){\rnode{s}{$s[n]$}}
\dotnode[dotstyle=square*,dotscale=0.001](1.7,0){dot}
\psblock(3,.75){H1}{$H_1(z)$}
\psblock(3,-.75){H2}{$H_2(z)$}
\psblock(5.8,.75){B2}{$\hat H_2(z)$}
\psblock(5.8,-.75){B1}{$\hat H_1(z)$}
\pscircleop(7.7,0){ominus}
\rput(9,0){\rnode{e}{$e[n]$}}

%--- Connect blocks ---
\psset{style=Arrow}
\ncline[nodesepA=.15]{-}{s}{dot}
\ncangle[angleA=90,angleB=180]{dot}{H1}
\ncangle[angleA=-90,angleB=180]{dot}{H2}
\ncline{H1}{B2} \naput[npos=.5]{$x_1[n]$}
\ncline{H2}{B1} \naput[npos=.5]{$x_2[n]$}
\ncangle[angleB=90]{B2}{ominus} \naput[npos=.5]{$z_1[n]$}
\ncangle[angleB=-90]{B1}{ominus} \naput[npos=.5]{$z_2[n]$}
\ncline[nodesepB=.15]{ominus}{e}
\end{pspicture}
\end{figure}

\end{document}