SVGをラクに記述する方法

svg-write.png

graphvizを使う

ノードと線のあるグラフを書くことに限って言えば、これが一番ラクだと思う。
ただし、レイアウトが思い通りになるとは限らない。
graphviz

InkscapeでTikzを使う(失敗中)

InkscapeでTextを使う方法をやればtikzできるかな。
textextはエラーになった。
eqtexsvg
あらかじめpstoeditがPATHに通ってる必要がある。
コマンドプロンプトを開いて、pstoeditと打って、そんなコマンドありません、と言われたら、
pstoeditをインストール必要があるってこと。

C:\Program Files\Inkscape\share\extensions

  • eqtexsvg.inx
  • eqtexsvg.py

を入れる
そしてInkscapeを再起動
tikzやろうとしたら、こんなエラーになってしまった。

Problem to generate DVI file

なんか、Inkscapeのインストール先のディレクトリにスペースが入ってるとダメみたい。
たとえばこういうのはダメ。

C:\Program Files\Inkscape

SVG本来の機能でラクをする(そんなにラクじゃなかった)

  • transform….図形をまとめて平行移動★
  • g….グルーピング機能でスタイルをまとめる
  • defs….定義

他の方法

tikzからSVGを作る(イマイチ)

tikzは超便利。
変数が使えるし、繰り返し構文もあるし、
ツリー構造も勝手に作ってくれる。
線も勝手にどいてくれる。
しかし、、、日本語の問題がある。
あと、pdfからsvgに変換してくれるものが、すごーく無駄が多く変換してくれる。
ただの丸もpathで描いちゃうんだからね。なんか残念だよね。

pdfからsvgに変換

  • tikz→pdfでコンパイル→pdf2svgでsvgに変換

ただし、これだと影やfadingが正しく変換されない。
加えて、このpdf->svgへの変換がひどいものしかない。
tikzでわざわざ

\draw circle

っって書いてるのに、pdfを介してsvgに変換すると、長ったらしいpathになるの。
svgにもcircleタグがあるのにね。
文字なんか入れるとすごくひどい。griphとかいう超長ったらしいデータを作ってくれる。
これじゃデータが倍増。SVGにする意味なくなっちゃう。
ということでSVGLatexというpythonでtikzからSVGを作ってくれるというやつに期待。でもどうつかっていいかわからなかった

dviからsvgに変換

dvisvgmというものを使って変換するらしい。
ダウンロードして.zipを解凍すると、シンプルにも.exeファイルと説明用のpdfが入っていた。
とりあえずexeをMikTexの主なバイナリファイルの入ってるっぽい場所

C:\Program Files\MiKTeX 2.9\miktex\bin

の下に入れてみることにした。
私の環境だとdviをうまくつくってくれないので品質がわからなかった
更に、-nオプションを使うといい。
-n, —no-fonts[=variant]
If this option is given, dvisvgm doesn’t create SVG font elements but uses paths instead. The resulting SVG files tends to be larger but concurrently more compatible with most applications that don’t support SVG fonts yet. The optional argument variant selects the method how to substitute fonts by paths. Variant 0 creates path and use elements. Variant 1 creates path elements only. Option —no-fonts implies —no-styles.

zen codingをして直接SVGコードを書く(そんなにラクじゃなかった)

  • emmet(zen codingの進化系)

新しくてよさそうなのはemmetかな?
やってみたけど、結局、タグを覚えなきゃいけないし、
変数がないし、めんどい。
zen codingでラクと感じる人は、既にhtmlの達人なんだね。

結論

  • ノードを使ったグラフやツリー構造の絵だけはgraphviztikzを使って書く
  • 日本語部分はsvgのtextタグを使って描く。
  • シャドウやglow効果はsvgのfilter機能を使って描く

がベストかな。

PythonのSVGライブラリ

svgplotlib
simpleSVG

need ipython
pySVG

http://codeboje.de/downloads/pySVG_Tutorial.pdf
svgwrite

pygal

サポートサイト Wikidot.com