アジェンダ
SVG（Scalable Vector Graphics）は、解像度に依存せずに拡大・縮小できたり、モダンブラウザにも対応できているのであまり互換性を気にする必要性もなく("SVG" | Can I use... Support tables for HTML5, CSS3, etc)、Webデザインにおいて非常に便利ですが、いくつかの難点があると思いましたので簡潔に備忘録としてまとめます。
1. デザインカンプからのダウンロード時のサイズ選択
FaviconなどでSVGを使用する際、デザインカンプからSVGファイルをダウンロードする際に、希望のサイズを選べないことがよくあります。このため、特定の解像度に合わせて手動で調整する必要があります。
2. 複雑なSVGのパフォーマンス
複雑なデザインをSVGとして使用すると、描画に時間がかかり、ページの読み込み速度に影響を与える可能性があります。特にアニメーションや詳細な図形が含まれる場合、パフォーマンスに注意が必要です。
3. ファイルサイズの最適化
高解像度のビットマップ画像に比べると、SVGは小さなファイルサイズで済む場合が多いですが、不要なメタデータや複雑なパスが含まれると、逆にファイルサイズが大きくなることがあります。そのため、最適化ツールを使って軽量化することが推奨されます。
参考
上記、2と3に関しては、以下の記事にも記載があります。