結構前から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がこのザマではじゃぁどうすんだよみたいな感じになるな。