高速で安全なSVG最適化ツール
SVG（Scalable Vector Graphics）は、Web上で解像度に依存せず、鮮明なアイコンやイラストを表示するための標準フォーマットです。しかし、デザインツールから書き出したSVGファイルは、そのままでは本番環境向けに最適化されていないことがほとんどです。このSVG最適化ツールを使えば、画質を損なうことなく不要なコードを瞬時にクリーンアップし、ファイルサイズを軽量化（圧縮）できます。
処理はすべてブラウザ上で行われるため、画像データが外部サーバーにアップロードされることは一切ありません。独自のロゴ、未公開のプロダクトデザイン、機密情報を含む図などのSVGファイルも安全に圧縮できます。処理は瞬時に完了し、削減されたファイルサイズがリアルタイムで表示されます。また、最適化の前後を視覚的に比較できるため、画質が完全に保たれているかをその場で確認できます。
SVGファイルを圧縮する理由
ピクセルデータを保存するラスター画像（JPEGやPNGなど）とは異なり、SVGは図形を描画するための数式データを含むXMLテキストファイルです。ベクター画像編集ソフトでSVGを書き出すと、ブラウザでの表示には不要なデータが大量に含まれることがよくあります。
SVGファイルが肥大化する主な原因は以下の通りです：
- エディタのメタデータ: 作成に使用したソフト特有のタグや属性など、編集時にしか使われないデータ。
- コメントや空の要素: 開発者のメモ、空のグループ（
<g>）、非表示レイヤーなど、実際の表示には影響しないデータ。 - 過剰な精度: 小数点以下が6桁以上あるパス座標（例：
14.123456）など、無駄に容量を消費するデータ。 - デフォルトの属性: ブラウザの標準動作と同じで、あえて記述する必要のないスタイルや属性。
SVG圧縮ツールを使用すると、こうした不要なテキストデータを削除できます。SVGのファイルサイズを軽量化することで、Webページの読み込み速度が向上し、通信量を節約できるだけでなく、サイト全体のパフォーマンスやSEOの評価アップにもつながります。
オンラインでSVGを軽量化する方法
このツールでは、複数のオプションをカスタマイズして最適化処理を細かく制御できます。画像の用途に合わせて設定を調整し、ファイルサイズとコードの可読性の最適なバランスを見つけてください。
小数点以下の精度
ベクターパスは座標を使用して描画されます。デザインソフトは多くの場合、これらの座標を極めて高い精度で書き出すため、長い数字の列が生成されます。小数点以下の精度（桁数）を下げることで、ファイルの文字数を大幅に削減できます。Webアイコンの場合、精度は 1 または 2 が最適です。プレビューで曲線がギザギザになったり、図形がずれたりした場合は、画像が正しく表示されるまで精度のスライダーを上げてください。
マルチパス最適化
最適化は多くの場合、段階的なプロセスです。1つの不要な要素を削除すると、親要素が空になり、それも削除できるようになることがあります。「マルチパス」設定を有効にすると、ファイルサイズがこれ以上小さくならなくなるまで、クリーンアップ処理が繰り返し実行されます。これにより、可能な限り最小のファイルサイズが保証されます。
寸法の削除
デフォルトでは、多くのSVGは width および height 属性（例: width="500px"）が固定された状態で書き出されます。これにより画像は特定のサイズに固定されますが、レスポンシブデザインには不向きです。「寸法の削除」にチェックを入れると、viewBox を保持したままこれらの属性を削除します。これにより、親コンテナのCSSに合わせてSVGが柔軟に拡大縮小されるようになり、モダンなWebレイアウトで非常に扱いやすくなります。
Pretty print（コード整形）
ファイルサイズを最小限に抑えることが目的の場合は、このチェックを外したままにしてください。コードが改行なしの1行で出力されます。ただし、手動で編集したり、アニメーションを追加したり、HTMLに直接埋め込む予定のSVGをクリーンアップする場合は、「Pretty print」にチェックを入れると、適切なインデントと改行でコードが読みやすく整形されます。
ベクター画像のベストプラクティス
SVGの最適化は、高速でアクセシビリティに優れたウェブサイトを構築するための第一歩です。ベクター画像を扱う際は、その実装方法も考慮しましょう。SVGをHTMLに直接インラインで埋め込む場合、ドキュメントのサイズを抑えるためにSVGの軽量化が不可欠です。パフォーマンスを最大化するには、ページ全体をHTML圧縮やCSS圧縮ツールで処理することをおすすめします。
最適化の後は、必ずプレビューで見た目を確認してください。ほとんどのSVGは問題なく軽量化できますが、複雑なグラデーションや精密なクリッピングパスを含むイラストの場合、元の見た目を保つために高い小数点精度が必要になることがあります。内蔵の比較ビューアーを使えば、軽量化されたファイルをダウンロードする前に、意図しない崩れがないか簡単に確認できます。
最後に、SVGはロゴやアイコン、フラットなイラストには最適ですが、複雑な写真には適していません。埋め込まれたラスター画像（base64エンコードされたJPEGなど）を主体とするSVGの場合、最適化の効果はほとんどありません。そのような場合は、SVG PNG 変換ツールを使用して、画像形式を完全に変換することをおすすめします。