web-dev-qa-db-ja.com

FirefoxSVGグラフィックがぼやけている

コンテナで動的なSVGロゴ/画像を使用したレスポンシブウェブデザインがあります。主要なブラウザはすべて、SVGを非常によくサポートしているようです。

私のSVGは動的であるため、ブラウザーウィンドウを拡大すると、SVGも動的になります。 ChromeおよびIE9では、チャームのように機能します。Firefoxでは、SVGが一部のサイズでぼやけています。しかし、初期のSVGサイズを超えると、常にぼやけているとは言えません。ブラウザウィンドウを拡大している間、常に正しく再レンダリングされないようです。

それは時々それがどのように見えるかです（違いを見るために フルサイズ でそれを見てください）： enter image description here

たぶん私はそれを埋め込むために間違った方法を使用しています。これが私のCSSとHTMLの外観です。

<div id="logo"></div>

CSS：

#logo {
   background-image: url('http://dl.dropbox.com/u/569168/jess.svg');
   height: 22em;
   background-repeat: no-repeat;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
}

SVGを確認したい場合は、CSSのリンクを使用してSVGを取得してください。 AdobeIllustratorで作られています。

それを修正する方法はありますか？

htmlfirefoxcsssvg
21
René Stalder

更新2013-10：v24で修正され、リリースチャネルに組み込まれたことが確認されました

更新2013-07： バグは解決されました！修正によりFirefox 24になり、9月から10月の間にリリースされます。

私は現在プロジェクトで使用しているこの問題のやや簡単な解決策について読みました（再び見つけたらソースを追加します）：

svg-containerの幅と高さを、画像が持つ可能性のある最大値に設定するだけで、問題ありません。現在のすべてのブラウザで問題なく動作します。唯一の制限は、firefoxとopera（はい、この混乱を引き起こしたのと同じ2つのブラウザ）は非常に大きな画像ではうまく機能しません->寸法に高すぎる値を使用しないでください

元のファイル：

<svg width="64px" height="128px">

最大幅がその3倍になるとすると、SVGには次のものが含まれているはずです。

<svg width="192px" height="384px">

（はい、svgノードはより多くの属性を持つことができます...）

これが機能する理由は、OperaおよびFFが、ベクトルgfxで行われることが想定されているため、逆方向ではなくサイズ変更前にSVGをレンダリングするためです。

更新：クレジットは Resolution Independence With SVG に関する素晴らしい記事を書いたDavid Bushellに送られます。

15
Jörn Berkefeld

問題は、SVGを背景画像として使用する場合、Firefoxはベクトルをレンダリングするサイズを選択し、必要に応じてそれらの画像ベースのピクセルを拡大することです。関連するバグは次のとおりです： https://bugzilla.mozilla.org/show_bug.cgi?id=600207

ここでの最も簡単な修正は、SVGを背景画像として使用するのではなく、SVGを直接埋め込むか、<img>タグを介して参照することです。

問題とファイルを示す実用的なテストケースを提出した場合は、実際のコードと修正をお手伝いします。

8
Phrogz

SVG画像を作成するには コンテナのサイズに合わせる 、svgタグにviewBoxが設定されていることを確認します。

<svg viewBox="0 0 347 189">

ただし、widthまたはheight属性はありません。

<svg width="347px" height="189px" viewBox="0 0 347 189">

デフォルトでは、これは、最初に境界に当たるいずれかの寸法に適合する、最大の幅または高さに拡大することにより、アスペクト比を保持します。

その特定の動作が目的の動作でない場合は、 preserveAspectRatio 戦略をあらゆる種類の興味深い方法で変更できます。

6
ecmanaut

私自身、まったく同じ問題に遭遇しました。テキストエディターでSVGを編集し、<svg>要素のwidth属性値を100％に変更し、他のすべての属性値はそのままにして、Firefoxで修正できました。あなたの特定の例では、これが行われるべき変更です：

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.Adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px"
    y="0px"
    width="100%"
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

それは私にとってはトリックであり、あなたにとっても同じことをするはずです。ただし、テストケースなしで100％になることはできません。

注意：幅および高さの両方を100％に設定すると、私の特定のケースではSafariのSVGのレンダリングが壊れました。幅は必ず100％に設定してください。

1
David Zulaica

最も簡単な解決策は、Illustratorなどのベクター画像エディターでSVGを拡大することです。ブラウザー（またはそれ以上）でレンダリングされた解像度にスケーリングします。これはベクトルであるため、拡大してもファイルサイズには影響しません。

0
Damir Kotoric

私が見つけたもう1つの同様の「落とし穴」は、イラストレーターからsvgをエクスポートしたとき、幅と高さが丸められた数値ではなかったため、エディターでSVGを開いたとき、幅は「100.6789px」のようなものでした。最初にイラストレーターで画像を注意深く編集して丸い数字にし、Firefoxで同じ幅と高さを使用することで、ぼやけた画像を解決しました。

0
user1010892