SVGは常にスケーラブルなのかというとそうではないこともある。ブラウザーがラスタライズするタイミング次第。例えばimg要素でSVG画像を参照してCSS Transformでいじった場合、Google Chrome 20やOpera 12ではラスタライズされた状態でいじられるようで、結果ぼやけることが多かった。
Demo: SVG and CSS Transform
デモのページの最後に載せてあるようにFirefox 13やInternet Explorer 10、そしてSafari 5ではスムーズに拡大される。多くの人が望む挙動はこっちのはず。Chrome 20とOpera 12は速度重視の結果なのかなーとかいろいろ想像できるけど、実際どうなのかはわからない。Chrome 20については縮小方向に限ってはスムーズに行われるような感じがするけど検証しづらいので忘れることにした。
Chrome 20では他に、CSSのbackground-imageプロパティーで小さなSVGをbackground-sizeプロパティーで拡大した時にもぼやけたりする。SVGのラスタライズ処理のタイミングに癖があるような感じで注意が必要。このbackgroudn-sizeプロパティーでのリサイズでのぼやけについてはSVGを大きく作って縮小するようにすると良い。
SVGはインタラクティブな部分はともかく、せめてスケーリングの部分では挙動が統一されてくれないと「運が良いとキレイにスケーリングされます」みたいな微妙な評価にとどまり、気軽に使えるようにはなれなそう。