Taken SPC

SVG のフィルタとアニメーション (と JavaScript) で、波紋っぽい効果を出してみました。クリックした場所から波が伝わるような効果がでます (色々と手抜きですが)。

• SVG で波紋 (フィルタ版)
• SVG で波紋 (グラデーションのみ)

Opera 位でしか動きません (Opera 9.5 で動作確認)。あと、もの凄く重たいので注意。手元では時おり Opera がクラッシュしました。

Firefox の trunk では feImage 要素 と feDisplaceMap 要素 が実装されました。これで SVG 1.1 のすべての原始フィルタがサポートされました。これに伴って幾つかの SVG 1.1 特色機能文字列 (http://www.w3.org/TR/SVG11/feature#Filter 等) もサポートされるようになりました (まだフィルタ関連で未実装な部分もいくつかありますが)。

• Bug 389746 ? Implement feDisplacementMap
• Bug 390379 ? Implement feImage
• Bug 410761 ? Set filters as supported feature

また、SVG エディタの Inkscape も開発中のバージョンではフィルタのサポートが進んでいます (現在の安定版 0.45 ではぼかしのみサポートされています)。

フィルタ効果の開発者のブログでは feDisplaceMap 要素も使ったフィルタを使った例も紹介されています。

とはいえ、Mozilla の SVG フィルタは遅いので、Firefox 3 では SVG 製作者が意図した時だけ有効にしようという話もでています。

cho45 さんの見出しとかを必ず一行におさめたい を読んで、それ SVG で出来るよと。もともと SVG 1.0/1.1 のテキストは自動的に折り返すことはありませんが、指定された幅に合わせて空白やグリフを制御する属性があります。

例として以下のような SVG の断片を考えてみます。

<text x="(X 座標)" y="(Y 座標)">(文字列)</text>

SVG の text 要素の y 属性は (デフォルトでは) 文字列のベースラインの Y 座標を指定します。

指定された幅に合わせるには textLength 属性に幅を指定します。

<text x="(X 座標)" y="(Y 座標)" textLength="(文字列の長さ)">(文字列)</text>

textLength 属性が指定されると文字列が指定された長さになるよう、各文字の間隔が調整されます。

また、lengthAdjust 属性に spacingAndGlyphs を指定すると、間隔とグリフが調整されるようになります。

以上を踏まえて簡単な例を以下に示します。

<?xml version="1.0"?>
<svg width="100%" height="100%" viewBox="0 0 320 240"
 xmlns="http://www.w3.org/2000/svg">
<g font-size="16px">
<path d="M10,85v5h300v-5" stroke="black" fill="none"/>
<text x="10px" y="50px" textLength="300px">これは幅 300px のテキストです。</text>
<text x="10px" y="75px" textLength="300px">これもまた幅が300ピクセルあるテキストなのです。</text>
<path d="M10,105v-5h200v5" stroke="black" fill="none"/>
<text x="10px" y="125px" textLength="200px" lengthAdjust="spacing">これは幅 200px のテキストです。</text>
<text x="10px" y="150px" textLength="200px" lengthAdjust="spacingAndGlyphs">これは幅 200px のテキストです。</text>
<text x="10px" y="175px" textLength="200px" lengthAdjust="spacing">テキスト</text>
<text x="10px" y="200px" textLength="200px" lengthAdjust="spacingAndGlyphs">テキスト</text>
</g>
</svg>

Firefox は textLength 属性には未対応です。Opera 9 や Apache Batik は textLength 属性に対応しています。Apache Batik 1.7beta1 のレンダリング結果は以下の通り。

Bug-org 311029 が Jesse Ruderman さん によって整理され、Mozilla SVG のフィルタ実装のメタバグになりました。

Bugzilla では SVG 関係のバグが整理されているとは限らないのでこういうのは非常に助かります。

ちなみに来る Firefox 3 では SVG 1.1 フィルタの多くが利用できるようになる予定です。

Bug-org 305859 - Em and ex units not implemented for SVGLength (tspan often rendered incorrectly) のパッチをチェックインして頂き修正完了。

Mozilla SVG はこれまで em や ex 単位には対応しておらず、無視されていました (値としては 0 になる)。今回の修正で em や ex 単位で指定しても値がきちんと計算されます。

W3C の SVG 1.1 テストスイート で ex がリファレンス画像 (PNG) と違う場合があるかもしれません。これはリファレンス画像 (PNG) は 1ex を .5em と仮定しているのに対して、Mozilla はフォントから計算しているという差から生じます。

レビューをしてくださった Robert Longson さんと T Rowley さんには深く感謝します 。

Firefox Trunk では SVG フィルタが実装されているのでドロップシャドウは簡単に実現できます。

ドロップシャドウの例 (SVG)

現在の Trunk (Windows だけ?)ではクラッシュしたりハングするようですが (Bug 378575 – Browser hangs mixing filters and text)。

ちなみに Mozilla の SVG フィルタはソフトウェアベースです (ボカシについては nsSVGFEGaussianBlurElement::GaussianBlur あたり)。

WebKit の SVG フィルタ (CoreGraphics バックエンド) は CoreImage を叩いているようです (ガウスぼかし)。

6/15 みなさまのコメントなどを基に全面的に書き直し。

Mozilla SVG Update より Gran Paradiso Alpha 4 and SVG の翻訳です。

Mozilla SVG Update より SMIL animation and SVG fonts の翻訳です。

Mozilla SVG Update より Gran Paradiso Alpha 3 and SVG の翻訳です。

Google Maps のマイマップ (Google Japan Blog の記事) ですが、Firefox 2 では地図の編集に SVG を使っています。ただし Trunk ではラスタ画像でした。Google Maps では既に多角線を描く API が見付かっていました。