SVGフィルターの参照はCSSからurl()関数で行うことができるわけだが、やはりそのフィルターが定義されたSVGファイルが外部ファイルというのは使い勝手が悪い。今のところCSSとして書けるようになる予定はなさそうなので、どうやってSVGファイルを他のファイルへ埋め込んでやるかということになりそうだ。具体的には、HTMLドキュメントへインラインSVGとして埋め込んでも、CSSファイルへData URLとして埋め込んでも可能なようだ。
SVGはそのままインラインでHTMLドキュメントへ埋め込むことができるので、特に問題はない。Chrome 42とFirefox 37では共に正常に反映されているようだ。
Demo: Inline SVG
.test {
filter: url('#foo');
}フィルターへの参照はファイル名なしのURL識別子のみで行う。こちらも特に難しいところはない。
注意するところはインラインに埋め込んだSVGが空白でレンダリングされてしまうので、svg要素のheightとwidth属性の値を0にしておくことくらいだろう。CSSでdisplay: noneするとフィルターごと消える結果になるようで、フィルターをかけた要素が真っ白になる。
さほど長いファイルでもないのでData URL化しても問題ない。普通にData URL化して最後にURL識別子を追加するだけだ。SVGOなどを使ってData URL化する場合、デフォルトでID属性が削除されてしまうことには気をつけておいた方が良い。
Demo: Data URL
.test {
filter: url('image/svg+xml,%3Csvg%20...%3C%2Fsvg%3E#foo');
}しかし残念ながらChrome 42ではプロトコル・ミスマッチでエラーになり、フィルターが適用されない。現状では使えないという結論にはなるが、将来的には改善されそうな気配はあるため、覚えておいても損はない。この書き方と参照の仕方だとCSSファイル内で完結するという大きなメリットがあるからだ。
結局のところ、今は外部SVGファイルを参照するというのが一番安定、確実だと言える。しかしながらこの辺りの仕様はセキュリティーと実装の兼ね合いで流動的なところなので、ふと気づくともっとすっきりとしたやり方でできるようになるかもしれない。そういう点も踏まえて、これでいいやではなく様々なアプローチは考えておくべきだとは言えそうだ。