Firefox 21においてSVGの公式ロゴSVGをCSSで背景に仕込み、49px (左)と48px (右)に縮小したところ、49pxの方はなめらかに縮小されていない。

結構前から21の現在に至るまでFirefoxではCSSで背景画像に指定されたSVGをうまく拡大出来ずにぼやける(ラスタライズしてから拡大してる)のはSVG使おうとすると普通にぶち当たるのでかなり有名。で、その対策として大きくSVGを作って縮小するというのがベスト・プラクティスっぽい感じだったんだけど、縮小でもアレなことに最近になって気づいた。環境依存な気がするので、とりあえずメモ。

Demo: SVG Background Resizing on Firefox

SVGの公式ロゴは638px四方のもの。それを背景に仕込んで領域を基準にリサイズすると、49%ではギザギザになり、48pxではキレイに(Chrome 27やInternet Explorer 10と同じに)なる。僕のPCではHTMLやCSSをほぼ限界まで削っても再現するが、再現しないマシンがあったりして根拠がよくわからない。

アイコン・フォントが誘惑してくるけど、content: "\e000"とか打っててバカらしくなったので、SVGでまだまだ頑張る。そこはリガチャで! みたいな世の中だけど、Twitterという文字列をアイコンにした所でWebフォント無効の環境にちゃんとTwitterという文字列が見えるのかというと疑問が残るよね。みたいな話もちょっと書きたいけど、対抗馬のSVGがこのザマではじゃぁどうすんだよみたいな感じになるな。