web-dev-qa-db-ja.com

ロゴのピクセル化された円をPNGではなくSVGで修正する必要がありますか?

丸のロゴを作成しましたが、透明部分があるのでpngを使用しました。事は私のウェブサイトでそれが滑らかに見えないということです。エイリアスがたくさんあります...ロゴにsvgを使用する必要がありますか?ブラウザで十分サポートされていますか?

image of a logo made up of a circle with the letter 'N' in it

4
Nic727

.pngファイルで発生している問題は、.png形式の問題ではなく、元の画像自体と.pngへの変換の品質に関連していると思います。

ただし、質問への回答として、Safari、Firefox、Internet Explorer、Edge、Chrome、およびOperaはすべてSVGレンダリングサポートを提供します。

でも私なら、まずPNGが一般的に広くサポートされているという理由だけで、PNG形式で思いどおりに見えるかどうかを最初に試してみます。

1
Monomeeth

あなたの具体的な例の滑らかさの欠如は、pngレンダリングが悪いためではありません。これは、pngファイルを正しい方法でエクスポートしなかったからです。

ベクターにオリジナルのロゴがある場合は、アンチエイリアスをオンにします。まれに、2倍にエクスポートして、PhotoshopまたはGimpでリサンプリングすることができます。ベクターにオリジナルがない場合... とにかくもう一度描く必要がありますとにかく。 (Ilustrator内にビットマップを挿入しても、魔法のようにベクターに変換されません)

ロゴのような場合は、どちらの形式も使用できますが、本当に画像を拡大縮小する必要がある場合にのみ、SVGを使用します。一部の地図、一部の青写真、一部の図。

1
Rafael