ビューポートの幅に合わせてヘッダーグラフィックを拡大縮小する必要があるレスポンシブデザインに取り組んでいます。私はこれがうまくスケーリングするだろうと考えて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。ブラウザを小さいサイズに縮小すると、上の1つがピクセル化されているのがわかりますが、下の1つはスムーズなままです。
寸法を固定せずにこの背景画像を滑らかにする方法について何か考えはありますか？
ありがとう。