SVG ファイルを圧縮する方法.

SVG コンプレッサーを開き、SVG ファイルを選択するか、サンプルを試してください。サンプルは svg-compressor.svg で、985 バイトの軌道マーク、512 × 512 の viewBox、グラデーション塗りつぶし、タイトル、説明が含まれています。マークアップがすでにエディタやクリップボードにある場合は「貼り付け SVG」を使用してください。

このツールは、各 2 MB までのファイルを最大 20 個まで受け付けます。完全な SVG ドキュメントを解析し、外部ファイルを読み込まずに標準の SVG ドキュメント宣言を削除します。不正な XML、カスタムエンティティ宣言、内部ドキュメントサブセットは拒否されます。非常に複雑なファイルは、要素数や処理時間の制限に達する可能性があります。

このワークフローは静的なベクターアートワークを作成します。スクリプト、イベントハンドラ、外部リソース、アニメーション、埋め込みラスター画像は削除されます。オリジナルのプレビューはすでにサニタイズされているため、ソースファイルのすべての機能を無制限にレンダリングしたものとして解釈しないでください。

2つのプレビューパネルには、サニタイズされたオリジナルと最適化された結果が表示されます。「オリジナル」と「最適化済み」の横にあるサイズとバイトの概要で、ソースファイルと完成した出力を比較します。最適化によってファイルが大きくなった場合は、常に削減を約束するのではなく、増加したことを報告します。

設定を開き、例として小数点以下の精度を 2 に設定します。精度の範囲は 1 から 5 で、初期値は 3 です。値を小さくすると数値ジオメトリを簡略化できますが、細かい曲線、小さな隙間、整列されたエッジがずれる可能性があります。プレビューで重要な詳細が失われる場合は、値を上げてください。

このサンプルは単純なジオメトリを使用しているため、精度 2 で認識可能な形状が維持されます。複雑な小数点座標を持つ他の SVG は、より大きく変化する可能性があります。最適化された SVG マークアップを表示すると、実際にダウンロードされるテキストが確認できます。これはオリジナルの別の表現ではありません。

例として「アクセシブルなタイトルと説明を保持」を有効のままにします。これにより、冗長なエディタメタデータを削除し、適切なマークアップを簡略化しながら、SVG のタイトルと説明が保持されます。これらは異なる種類の情報であり、交換可能として扱うべきではありません。

「内部 ID を短縮」はデフォルトでオンになっています。オプティマイザーは SVG 内の参照を更新しますが、外部の CSS や JavaScript は元の ID に依存している場合があります。ファイルが要素に名前を付ける大規模なアプリケーションの一部である場合は、このオプションをオフにして、そのコンテキストで完成した SVG をテストしてください。

例として「レスポンシブな寸法」と「読みやすい出力マークアップ」はオフのままにします。レスポンシブな寸法は、座標 viewBox がスケーラブルなサイズを提供できる場合に、固定の幅と高さを削除します。「読みやすい出力」はインデントを追加するためメンテナンスには便利ですが、テキストサイズが大きくなる可能性があります。

「開始」を選択し、「ダウンロード」を選択します。完成した出力は 635 バイトで、ソースの 985 バイトと比較して 35.5% の削減です。タイトルと説明は保持され、表示されている比較は実際のソースとダウンロードされた SVG からレンダリングされます。

この記事では、結果を鮮明に表示するために両方のベクターを 1,024 ピクセルでレンダリングしていますが、論理的な座標サイズは 512 × 512 のままです。大きなプレビューを表示しても、保存される SVG にラスターコンテンツが追加されることはありません。既存の運用アセットを置き換える前に、宛先ページで実際のベクターを確認してください。

1つのファイルは元のベース名で SVG としてダウンロードされます。一括ダウンロードは 1 つの ZIP ファイルとして行われ、ファイル名が重複する場合は番号付きのサフィックスが付きます。処理はブラウザ内で行われます。後で別の最適化設定を試したい場合は、元のソースを保持してください。