SVGを高速化させるためのルール

SVGを高速に表示させるためには

SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。

use要素とsymbol要素は必ず避けること

use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。
動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。
重たくなりますので、必ず、この二つの要素は避けましょう。

アニメーションの期間は短く設定すること

dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。
目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります。
冒頭のdur="5s"はdur="820ms"程度に変換しておきましょう。また、setInterval(f, 10)ぐらいにしておきましょう。このように短く設定しておけば、高速なアニメーションが可能になるでしょう。だいたい、仮に24fpsとするならば、1フレームは約41msとなりますから、これを一つの区切りにすると、いいかもしれません。そうなると、820msはおよそ20フレームとなります。

ラスタ画像を処理するフィルター、マスキングなどは避けること

SVGフィルターは人気が高いのですが、実は、ベクタ画像とは一切、関係がありません。
マスキングやフィルターの処理をするためには、ベクタ画像を、一度、ラスタ画像というものに変換して、それを記憶しておかなければなりません。その上、丁寧にビットマップで処理していきます。そのために、かなり、描画の処理が遅くなります。
したがって、SVGの中でも無茶な処理をしているので、もっさりが嫌であれば、フィルターとマスキングは避けてください。あるいは、ベクタ画像ではなくて、JPEGやPNGなどラスタ画像でお使いください。

PDFのように精密な文を作るtext要素はなるべく使わないようにすること

SVGのtext要素は、HTMLのp、div要素とは違って、PDFのように精密な文章を作ることを目的に設計されています。PDFにCSS機能を付けたものがtext要素といっても過言ではないくらいです。
つまり、一文字一文字、フォントの位置と、その書体の描画を指定することができるのです。また、動的な変更をするたびに、各文字に対して、複雑な処理が必要となります。
アニメーションをする際には、このtext要素の使用を控えてください。もし、Inkscapeをお使いならば、「フォントをパス化」機能で、text要素をpath要素に変換できます。

インラインSVGは使わず、object要素でSVG画像を呼び出すこと

インラインSVGは、よほどのことがない限り、高速化が困難です。IEはともかくとして、他のブラウザは、インラインSVGが苦手のようです。もし、遅くなるようでしたら、インラインSVGの代わりにobject要素からの呼び出しを使ってみてください。

DTDを指定するのは避けること

DTDの指定は、ファイルの表示が遅くなるだけではなく、いろいろな問題を引き起こすので避けた方が賢明です。
これは昔の話なのですが、あるソフトがSVG文書にDTDが指定されていると、W3Cのサイトにアクセスして、DTDファイルを取得するようになっていました。
MSのXMLパーサも同様のことをしたために、W3Cのサイトにアクセスが殺到する羽目になりました。
もちろん、今のブラウザがそんなことをするとは思えませんが、もし、それをすれば、SVGの表示に負荷がかかるだけです。DOCTYPE宣言をやめて、DTDの指定は避けましょう。

まとめ

次の要素を使う際には、注意が必要です。アニメーションの際には、削除しておいてください。

• use要素
• symbol要素
• text要素
• filter要素
• mask要素

これらの要素は、処理が重くなるにもかかわらず、利便性が高くて、人気があるために、SVGで導入されたものです。また、人間の時間感覚ほど、当てにならないものはないのですから、animate要素などの間隔の設定にs(秒)の単位を使うのは必ず避けることが重要です。代わりに、ms（ミリ秒）を短めにお使いください。