サイトのロゴを svg にすることにしましたが、クロムでうまくレンダリングされていないようです。100% ズーム レベルではぼやけて見えますが、数回ズームアウトすると問題ないように見えます。私が使っているサイトは以下です。
これを引き起こしている可能性のあるものと、それを修正する方法を誰かが知っていますか? ありがとう
問題があれば、Illustrator CS5 で svg を作成しました。
サイトのロゴを svg にすることにしましたが、クロムでうまくレンダリングされていないようです。100% ズーム レベルではぼやけて見えますが、数回ズームアウトすると問題ないように見えます。私が使っているサイトは以下です。
これを引き起こしている可能性のあるものと、それを修正する方法を誰かが知っていますか? ありがとう
問題があれば、Illustrator CS5 で svg を作成しました。
その理由は、パーセンテージを使用して、ロゴが含まれる要素 (親要素) の幅を設定するためです。
これは、最初にロゴがベクターから、画像に設定したサイズの 100% の内部ビットマップにラスタライズされることを意味します。次に、 #header css ルールで、画像が含まれるヘッダー要素に 80% を使用しています。
ラスター化されたベクター画像を保持するためにブラウザーが使用する内部ビットマップは、ベクターを再ラスター化する代わりに 100% から 80% にスケーリングされます。これには補間が含まれるため、エッジがぼやけてしまいます。これは、ブラウザが親のコンテンツに対して行ったパフォーマンスの選択です。
解決策は、ヘッダー (親) 要素の 80% スケーリングを削除することです。新しいルールを追加して、このように画像の幅を設定できます(もちろん、代わりにパーセンテージを使用できます-親要素がスケーリングされていない限り、これは問題になりません)-f.ex:
#header {
margin: 0 auto;
padding: 0;
text-align: center;
/*width: 80%;*/
}
.header-img {
width:200px;
height:auto;
}
次に、htmlコードで:
<img class="header-img" src="logo.svg" alt="" />
(設定することもできますが#header img {...}
、これにはパフォーマンス上のペナルティがあります)。
概念実証は次のとおりです (100 ~ 80% の小さな違いですが、目に見える - 最後の部分を比較してください)。
ブラウザによって 80% にスケーリングされたロゴ サイズに 100% ラスタライズされたビットマップを使用:
ヘッダー (親) 要素から 80% を削除し、例として画像の幅を 200px に設定します。
Panzoom を使用しているページに次のコードを挿入します。
<style>
.panzoom {
-webkit-backface-visibility: initial !important;
-webkit-transform-origin: 50% 50%;
}
</style>
SVG は 100% ベクトル (埋め込まれた PNG ファイルはありません) であるため、SVG に問題があるとは思いません。
最も可能性の高い原因は、画像のサイズが比較的小さいことと、72 dpi (通常の画面ピクセル密度) でのレンダリング方法です。フォントの不規則なエッジがピクセル化されているため、画像がわずかにぼやけて見えます。
高解像度の MacBook Pro と iPhone Retina では、ロゴがきれいにくっきりと見えます。
ズームアップもOK。