SVG Minifier
SVGからコメント・メタデータ・エディタ固有の情報を削除し、座標を丸めて軽量化します。
How to Use the SVG Minifier
SVG files exported from Illustrator, Figma, Inkscape or Sketch carry a surprising amount of payload that browsers never render: an XML declaration, a DOCTYPE, editor comments, an entire <metadata> block of RDF, private namespaces such as sodipodi: and inkscape:, and coordinates carried to a dozen decimal places. Removing that overhead commonly cuts an icon file by 40–70% with no visible change at all.
Paste your SVG or load a file, adjust which optimizations to apply, and compare the two previews side by side. The byte counter shows the exact saving. Copy the result or download it as a .min.svg file.
What Each Option Does
Comments and metadata are pure overhead and are safe to remove in almost every case. Editor-specific attributesstrips private namespaces; the drawing renders identically, but you lose the ability to re-open the file with the original editor's guides and layers intact, so keep your source file. Whitespace collapses indentation between tags while leaving the contents of <text>, <tspan>, <style> and <script> untouched, because spacing is meaningful there.
Rounding coordinates is where most of the saving comes from on complex paths. Two decimal places is enough for icons rendered at typical sizes; drop to one or zero for very small icons, and raise it if you see distortion in the preview. Removing width/height lets CSS control the rendered size while viewBox preserves the aspect ratio — useful for responsive icons, but it changes the default size when the SVG is used without CSS. Removing title/desc is off by default because screen readers announce those elements.
SVG圧縮ツールの使い方
SVGコードを貼り付けるか、SVGファイルを読み込んでください。オプションを選ぶと即座に最適化され、 変換前後のファイルサイズと削減率が表示されます。左右のプレビューで見た目が変わっていないことを 確認してから、コピーまたはダウンロードしてください。
最も効くのは「座標の小数を丸める」です。アイコン用途なら小数2桁で十分なことがほとんどですが、 プレビューで形が崩れたら桁数を増やしてください。処理はすべてブラウザ内で完結し、 SVGの内容が外部に送信されることはありません。
よくある落とし穴と対処 / Common Pitfalls
| 落とし穴 / Pitfall | 問題 / Problem | 対処 / Fix |
|---|---|---|
| 小数を丸めすぎる Rounding too aggressively | 桁数0〜1にすると曲線がカクついたり、細い線がズレる Curves flatten and thin strokes shift | プレビューを見ながら桁数を調整する(既定の2桁が無難) Tune precision against the preview |
| width / height を無条件に削除 Blindly removing width and height | CSSでサイズ指定していない箇所で表示サイズが変わる Intrinsic size disappears without CSS | viewBoxがあり、かつCSSでサイズを当てている場合だけ有効にする Only when CSS controls the size |
| title / desc を消す Stripping title and desc | スクリーンリーダーが読み上げる情報が失われアクセシビリティが下がる Screen readers lose the accessible name | 装飾目的のアイコン以外では残す(既定はオフ) Keep them for meaningful graphics |
| id を参照している 外部CSS/JSからidを参照 / External references by id | gradientやmaskはid参照で成り立つため、id前提の最適化は表示崩れの原因になる Gradients and masks depend on ids | 本ツールはidを変更しない。他ツール利用時は要注意 This tool never renames ids |
| 圧縮後のSVGを再編集する Re-editing the minified output | エディタ固有情報が消えているためレイヤー・ガイドが復元されない Editor state is gone for good | 元ファイルを必ず別に保管し、最適化は配信用のコピーに対して行う Keep the source file separately |
削除される代表的な要素 / What Gets Removed
<?xml version="1.0" encoding="UTF-8"?> ← XML宣言
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ...> ← DOCTYPE
<!-- Generator: Adobe Illustrator 27.0 --> ← コメント
<metadata> ... RDF ... </metadata> ← メタデータ
xmlns:inkscape="http://www.inkscape.org/..." ← エディタ名前空間
sodipodi:nodetypes="cccc" ← エディタ属性
d="M 12.000000 3.4999999 L ..." ← 小数を丸める圧縮例 / Before & After
変換前(整形済み・エディタ出力):
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24">
<circle cx="12.000000" cy="12.000000" r="9.5000000" />
</svg>
変換後:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.5"/></svg>Why browser-only?
Icon sets and logos are often unreleased brand assets under NDA. This minifier parses and rewrites the markup locally with string operations: nothing is uploaded, nothing is logged, and it works offline. Open the DevTools Network tab while optimizing and you will see zero requests.
アイコンやロゴは未公開のブランド資産であることも多いものです。本ツールは最適化がブラウザ内で 完結し、外部送信は一切ありません。