入力ソース
ファイルをここにドロップ
プレビュー
SVGの待機中
最適化設定
削除項目
カラー一括変更
空欄で元の色を維持。currentColor を指定するとCSSの色を継承します。
サイズ(W/H)
px, %, remなどが使えます。
座標の精度
Advertisement
SVG プレビュー・最適化ツールとは？
本ツールは、SVGコードを貼り付けるだけで即座に実際の描画イメージを確認（プレビュー）し、同時にコードを軽量化・最適化できるWeb制作者向けの無料ツールです。 IllustratorやFigmaから書き出した直後のSVGには、不要なメタデータが多く含まれています。これらを一括削除しファイルサイズを削減することで、サイトの読み込み速度向上（SEO対策）に貢献します。
こんなシーンで便利です
アイコンのコード化と確認
SVGファイルをブラウザでいちいち開く手間を省き、コードを貼り付けてデザインを即座にチェック。そのままReactやHTMLへ埋め込めます。
PageSpeed Insightsの改善
不要なタグや改行を削除する「Minify（最小化）」により、1バイトでも軽く。LCPなどのコアウェブバイタル指標の改善に役立ちます。
SVGの色やサイズの簡易調整
CSSやデザインソフトを使わずに、プレビューを見ながら「currentColor」への変更や、width/heightの属性追加をその場で行えます。
コードのクリーンアップ
Adobeソフト等が自動付与する不要な属性やコメント行を一掃し、読みやすくメンテナンス性の高いコードに整形します。
使い方は簡単 3ステップ
- SVGコードを直接貼り付けるか、ファイルをドラッグ＆ドロップします。
- 「Cleanup」や「Rounding」オプションを調整し、軽量化の結果を確認します。
- 「Copy SVG」でコードをコピーするか、ファイルをダウンロードして完了です。
※背景を格子状・白・黒に切り替えられるため、透過している白いアイコンの確認も容易です。
ご利用時の注意点
- 座標の丸め処理（Rounding）：精度を下げすぎると形状が歪む場合があります。通常は「2px precision」程度がバランス良く推奨されます。
- Color Override機能：fillやstroke属性を直接書き換えます。複雑なグラデーションを含むSVGでは意図しない色合いになる可能性があるため、プレビューを確認しながら調整してください。
- Minifyの効果：改行やインデントを削除するため、コードの可読性は下がりますが、通信量は最小限に抑えられます。
Advertisement
ツール別・SVG書き出しコードの特徴と最適化効果
デザインツールから書き出した直後のSVGには、Web表示には不要な「ゴミ」が多く含まれています。本ツールでそれらを除去した際の比較です。
| デザインツール | 含まれる不要な記述（例） | 最適化によるメリット |
|---|---|---|
| Figma | xmlns:xlink, xmlns:figma, <metadata> | React/Next.jsでの属性エラー防止・コードの短縮 |
| Illustrator | i:pgf, xml:space, Adobe専用コメント | ファイルサイズの10〜30%削減・可読性向上 |
| Inkscape | sodipodi, inkscape:connector-type | 標準SVG規格への準拠・描画バグの防止 |
| 一般配布アイコン | id属性の重複, 不要なfill-rule | CSSでの色変更（currentColor）の容易化 |
| 未圧縮SVG | インデント, 改行, 冗長な座標数値 | LCP（最大視覚コンテンツの表示時間）の改善 |
なぜSVGの最適化がSEOに効くのか？
Googleのコアウェブバイタル（Core Web Vitals）において、LCP（Largest Contentful Paint）は重要な指標です。 ヒーローエリアやロゴにSVGを使用している場合、コード内の不要なメタデータやコメントを削除して1バイトでも軽量化することは、レンダリングブロックを防ぎ、ページ表示速度の直接的な向上につながります。
React / Next.js 開発者へのTips
Figma等からコピーしたコードには、JSXでエラー（Warning）となるxmlns:xlinkなどの属性が含まれることがあります。 本ツールで最適化を行うことで、これらの属性をクリーンアップし、そのままコンポーネントとして貼り付け可能な状態に整形します。
よくある質問（FAQ）
Q.制作中のロゴや機密性の高いSVGコードが漏洩する心配はありませんか？
A. 全くありません。本ツールは「完全ローカル処理」を採用しており、入力されたコードやファイルがサーバーへ送信されることは一切ありません。
Q.ファイルをドロップしてもサーバーに保存されませんか？
A. はい。JavaScriptのFileReader APIを使用しており、ブラウザがメモリ上で一時的に読み込むだけです。当サイト側でデータを保持・閲覧することは不可能です。
Q.独自のメタデータやコメントを残すことはできますか？
A. 「Cleanup」セクションのチェックボックスを外すことで、特定の要素（Titleやコメントなど）を削除せずに最適化することも可能です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。