HTML -> CSS -> SVG -> CSS

HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。 Demo: HTML -> CSS -> SVG -> CSS SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="test.css"?> <svg id="foo"

[kits]

Firefoxで確認したところ、style要素 + importも不可。背景画像としたSVGの外部CSSにはGETリクエスト自体発生しないようだった。

[kool_kreate]

xmlでの宣言でcssから読み込めるはず

[teramako]

object要素で参照させて、画面外に飛ばし、-moz-elementで参照させればFirefoxはうまく行った