Firefoxはアンチエイリアスのスケーリングされた背景ではありません。

Question

私はレスポンシブなデザインに取り組んでいます。ヘッダーグラフィックをビューポートの幅に合わせる必要があります。私はこれがうまくスケールすると思っているsvgに行ってきました。 （私はフルサイトでsvgサポートをテストし、gifをsvgに置き換えます）。 Firefox（Windows 7では13.0）では小さなサイズでアンチエイリアス処理を行っていません。時々、いくつかのサイズでよく見えますが、サイズを修正するとしますが、それを避けたいのです。 ChromeとSafariで画像のアンチエイリアスが行われているようです。

私はbackground-size: 100% 100%をコンテナに合わせて設定していますが、私はcoverのようなものも試しましたが、違いはありません。

私はimage-rendering: optimizeQuality;も追加しようとしましたが、これは役に立たなかったようです。

私はhttp://axminster.digital.linneydesign.com/svg/にテストページを設定しました。トップはバックグラウンドイメージで、その下のものはまったく同じファイルですが、htmlで直接imgとして追加されました。ブラウザを小さなサイズにスケーリングすると、一番上のピクセルが表示されますが、下のものはスムーズになります。

ディメンションを固定せずにこの背景イメージをどのように滑らかにすることができますか？

ありがとうございました。

Answer 1

svgファイル（sophie-conran.svg）の外側の<svg>要素の幅と高さを100％に指定します。

何が起こるかは、svgイメージが与えられた幅と高さ、つまり1000px x 350pxでラスタライズされ、そのビットマップが必要なサイズに変換されます。幅と高さのパーセンテージを作成すると、ビットマップは最終サイズで作成され、ビットマップスケーリングはありません。

更新：

これは、Firefox 24を持つすべての議論の余地があるといえ超えて、あなたが好きなものを行うことができ、それは常にピクセル化することなく、適切に、すなわち動作します。