12

サイトのロゴを s​​vg にすることにしましたが、クロムでうまくレンダリングされていないようです。100% ズーム レベルではぼやけて見えますが、数回ズームアウトすると問題ないように見えます。私が使っているサイトは以下です。

www.confide.re/confide

これを引き起こしている可能性のあるものと、それを修正する方法を誰かが知っていますか? ありがとう

問題があれば、Illustrator CS5 で svg を作成しました。

4

3 に答える 3

11

その理由は、パーセンテージを使用して、ロゴが含まれる要素 (親要素) の幅を設定するためです。

これは、最初にロゴがベクターから、画像に設定したサイズの 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 に設定します。

ここに画像の説明を入力

于 2013-01-05T12:07:13.397 に答える
1

Panzoom を使用しているページに次のコードを挿入します。

<style>
        .panzoom {
            -webkit-backface-visibility: initial !important;
            -webkit-transform-origin: 50% 50%;
        }
</style>
于 2016-01-20T14:22:26.417 に答える
1

SVG は 100% ベクトル (埋め込まれた PNG ファイルはありません) であるため、SVG に問題があるとは思いません。

最も可能性の高い原因は、画像のサイズが比較的小さいことと、72 dpi (通常の画面ピクセル密度) でのレンダリング方法です。フォントの不規則なエッジがピクセル化されているため、画像がわずかにぼやけて見えます。

高解像度の MacBook Pro と iPhone Retina では、ロゴがきれいにくっきりと見えます。

ズームアップもOK。

ここに画像の説明を入力

于 2013-01-05T12:00:44.610 に答える