SVGオプティマイザー - SVGファイルの最適化・圧縮 オンライン
メタデータの削除、パスの最適化、冗長なコードのクリーンアップでSVGファイルを最適化・圧縮します。SVGO搭載、100%クライアントサイド処理。
よくある質問
SVG最適化とは何ですか？なぜ必要ですか？
SVG最適化は、不要なデータを削除し、ロスレス変換を適用してSVGファイルのサイズを縮小するプロセスです。Adobe Illustrator、Figma、Inkscapeなどのデザインツールは、エクスポート時に冗長なメタデータ、エディター固有の名前空間、コメント、最適化されていないパスデータを埋め込みます。SVGを最適化すると、ページ読み込み時間が短縮され、帯域幅が削減されます。
このSVG最適化ツールの使い方は？
SVG入力を提供する方法は2つあります：(1) SVGファイルをアップロードエリアにドラッグアンドドロップするか、クリックしてファイルを選択します。(2) SVGマークアップをコード入力エリアに直接貼り付けます。SVGがロードされると、ツールはSVGOのデフォルトプラグインプリセットを使用して自動的に最適化します。
SVGデータは安全ですか？ファイルはサーバーにアップロードされますか？
SVGデータは100%安全で、ブラウザから出ることはありません。すべての最適化はブラウザ内で直接実行されるSVGO JavaScriptライブラリを使用してクライアント側で行われます。SVGデータはサーバーに送信されず、データは収集されず、トラッキングも行われません。
生サイズとGzipサイズの違いは何ですか？
生サイズはディスク上の実際のファイルサイズ（バイト）です。Gzipサイズはgzip圧縮後のファイルサイズで、ウェブサーバーがHTTPでファイルを転送する際に通常使用するものです。Gzipサイズは実際の帯域幅への影響をより正確に表します。
精度設定は何をしますか？
精度設定（0-8）は、SVG内の数値、特にパスデータ座標と変換値で保持する小数点以下の桁数を制御します。低い精度（1-2）はより小さいファイルを生成しますが、複雑なSVGで視覚的な歪みを引き起こす可能性があります。デフォルトの精度3はほとんどのSVGに適したバランスです。
マルチパスモードとは何ですか？
マルチパスモードは、それ以上のサイズ削減が達成できなくなるまでSVGO最適化パイプラインを複数回実行します。マルチパスは通常、シングルパスより1-5%の追加削減を達成します。
安全に使用できるSVGOプラグインはどれですか？
preset-defaultの33個のプラグインはほとんどのSVGに安全で、デフォルトで有効になっています。最適化後のSVGが元のものと異なって見える場合は、原因を特定するためにプラグインを1つずつ無効にしてみてください。
コード例
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';
function optimizeSvg(svgString, options = {}) {
const { precision = 3, multipass = true, prettify = false } = options;
const result = optimize(svgString, {
multipass,
floatPrecision: precision,
js2svg: { pretty: prettify, indent: 2 },
plugins: ['preset-default'],
});
const originalSize = Buffer.byteLength(svgString, 'utf8');
const optimizedSize = Buffer.byteLength(result.data, 'utf8');
const reduction = Math.round((1 - optimizedSize / originalSize) * 100);
return { data: result.data, originalSize, optimizedSize, reduction };
}
const svg = readFileSync('icon.svg', 'utf8');
const result = optimizeSvg(svg, { precision: 2 });
console.log(`${result.originalSize} -> ${result.optimizedSize} (${result.reduction}% reduction)`);
writeFileSync('icon.min.svg', result.data);