Safariで20ピクセル未満のサイズでぼやけて表示されるSVG画像

私はSafariでデモしているIpadのモバイルデモを行っています。アイコンを使用して、画像を3倍に拡大縮小する必要をなくしています。問題は、私が使用している20px未満のアイコンは、ズームインするまで画面がぼやけるということです。他の誰かがこの問題を経験し、修正方法を知っていますか？参考までに、これらの画像をIllustratorで保存しました

svg css

— ジョン・デンジャラス
ソース

小さな画像はおそらく大きな画像と同じくらいアンチエイリアス処理されますが、「ぼやけた」ピクセルと塗りつぶされたピクセルの比率は論理的に大きくなります。4x4ピクセルの画像を想像してください。次に、完全に塗りつぶされたピクセルは残りません。アンチエイリアシングをオフにしないと（可能な場合はわかりません。とにかくお勧めしません）、修正することはあまりありません。

— usr2564301 2014年

私は一日中物事をテストしてきました。20pxの問題は、一部の.svg画像でのみ機能しました。illustratorで作成してsvgとして保存したものは、Illustratorで保存した.svgグラフィックの一部ほど見栄えがよくありませんでした。だから私が選んだいくつかの設定は最適ではなかったのかもしれません。私はChromeとFfoxをチェックインしましたが、すべてが非常に鋭く見えたため、このアンチエイリアスの問題はSafariでのみ発生しました。PC上のSafariが同じように、そして最も重要なのはタブレット上でレンダリングされるかどうかを確認する必要があります。

— John Dangerous、

何を試したかわからない。ただし、シェイプレンダリングを試したことがあります：https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering。

同様の質問：https : //stackoverflow.com/questions/11895813/svg-shape-rendering-on-ios

/programming/16889078/turn-off-anti-aliasing-on-svg-when-applying-css3zoom-on-the-element

— クッカ
ソース

共有いただきありがとうございます。読み上げます。IpadのSafariではすべてが問題なく見えたので問題ありませんが、デスクトップのSafariは私の見た目ではそれほど良くありませんでしたが、このデモには関係ありませんでした

— John Dangerous

さまざまなブラウザーがSVGを表示する方法について、この記事を見つけました。opticalcortex.com/svg-rendering-in-browsers

— ジョン危険