SVGコードを貼り付けるだけで、即座にプレビュー表示＆不要な要素を削除して軽量化できます。 Web制作・フロントエンド開発に最適です。
入力ソース
ファイルをここにドロップ
プレビュー
SVGの待機中
最適化設定
削除項目
カラー一括変更
空欄で元の色を維持。currentColor を指定するとCSSの色を継承します。
サイズ(W/H)
px, %, remなどが使えます。
座標の精度
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の効果：改行やインデントを削除するため、コードの可読性は下がりますが、通信量は最小限に抑えられます。
ツール別・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などの属性が含まれることがあります。 本ツールで最適化を行うことで、これらの属性をクリーンアップし、そのままコンポーネントとして貼り付け可能な状態に整形します。
SVGのインライン配置によるDOMノード数肥大化の回避と表示パフォーマンスの最大化
コードをただクリーンアップするだけでなく、Webサイト全体の描画速度や検索エンジンのクローリング効率を高めるための、実践的なフロントエンド実装戦略を解説します。
Googleの技術要件を満たすDOMノード数の最適化とSVGスプライトの活用手法
インラインSVGの多用は、HTMLドキュメントのDOMノード数を急激に肥大化させ、Google Lighthouseの警告対象となります。
これを回避するには、当ツールで最適化した複数のSVGコードを一つのファイルに集約するSVGスプライト（<use>タグによる参照）へと移行してください。
これにより、ページ全体のDOMツリーを軽量化し、ブラウザのメインスレッドによるパース処理の遅延を根本から防ぐことができます。
Content Security Policyとの競合を回避する安全なインラインコードの記述
セキュリティを強化した商用Webサイトでは、厳格なContent Security Policy（CSP）によって外部アセットやインラインスクリプトの実行が制限されるケースがあります。
SVG内部に埋め込まれたスクリプト（onload属性など）や意図しないスタイルタグは、CSP違反を引き起こし描画エラーやセキュリティ警告のトリガーとなります。
当ツールでコードの純度を高めておくことは、セキュリティポリシーとの競合を防ぎ、安全かつ堅牢なコーディングを維持するために必須のプロセスです。
レスポンシブデザインにおけるviewBox属性の適切な維持とレイアウトシフトの防止
SVGの軽量化を優先するあまり、コード内のviewBox属性まで誤って削除してしまうと、ブラウザは正しいアスペクト比を計算できなくなります。
これは画面読み込み時の致命的な表示崩れや、コアウェブバイタル指標の一つであるCLS（Cumulative Layout Shift：累積レイアウトシフト）のスコア悪化に直結します。
widthやheightをCSSで可変にする場合でも、viewBox属性は必ず維持したまま最適化することが、レスポンシブ環境での描画バグを防ぐ大原則です。
よくある失敗と対策
FigmaやIllustratorから書き出したSVGをそのまま埋め込み、LCPの低下やインデックス遅延を招く失敗
Adobe IllustratorやFigmaなどのデザインソフトからエクスポートしたSVGコードには、xml:spaceやxmlns:figma、Adobe専用コメントといったWebブラウザの描画には一切不要なメタデータが大量に含まれています。これらを未圧縮のままHTMLやJSXに直貼りすると、DOMツールの肥大化によるページ容量の増加を引き起こし、Googleのコアウェブバイタル指標（特にLCP：最大視覚コンテンツの表示時間）のスコアを悪化させ、SEO評価に悪影響を与える原因になります。
💡 対策・解決策を見る▼
同一ページ内でSVGアイコンのid属性が重複し、表示バグやCSSデザイン崩れ、HTML5バリデーションエラーを発生させる失敗
Webサイト内の異なる場所で同じSVGファイルを複数インライン配置したり、複数のパーツを同時に読み込んだりした際、SVG内部の<path>や<linearGradient>に指定されている「id属性」の名前が重複してしまうケースが多発します。idの重複は、特定のアイコンの色が別のSVGに引っ張られて異常な描画になったり、グラデーションが消えたりする表示バグの原因となるだけでなく、W3CのHTML5バリデーションエラーとなり、検索エンジンのクローラーに対して低品質なWebサイトと判定されるリスクを高めます。
💡 対策・解決策を見る▼
Next.jsやReactのJSX内で「xmlns:xlink」などの属性エラー（Warning）を放置し、レンダリング速度を低下させる失敗
Figma等からコピー＆ペーストしたSVGコードをそのままNext.jsやReactなどのコンポーネントとしてJSX内に配置すると、ブラウザのコンソール上に「Invalid DOM property」や「xmlns:xlink」に関する大量のWarning（警告）が出力されます。これらのエラーは即座に画面が真っ白になるわけではないため見落とされがちですが、クライアントサイドでの不要なエラーログの処理負荷を増大させ、JavaScriptの初期実行（ハイドレーション）時の描画遅延やレンダリング効率の低下を招き、SEO評価において重要なユーザーエクスペリエンス（UX）を損ないます。
💡 対策・解決策を見る▼
SVGアイコンに「fill=固定値」を残したままコーディングし、CSS（currentColor）でのカラー変更ができず作業効率を著しく下げる失敗
外部の素材サイトやデザインツールから書き出したSVGには、内部のpathタグに「fill="#333333"」や「stroke」のカラーコードがハードコーディングされていることがほとんどです。この状態では、Webサイトの実装時にCSS（Tailwind CSSのtext-blue-500など）や「:hover」アニメーションでアイコンの色を動的に制御することができず、色違いのSVGファイルを何枚も用意して読み込ませるという非効率な設計になり、リクエスト数の増加やソースコードの肥大化を招きます。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.貼り付けたSVGのコードやファイルデータが外部に漏洩する心配はありませんか
A. 一切ありません。当ツールはすべての最適化処理とプレビューの描画をお客様のデバイス上で行う完全ローカル処理型です。入力されたSVGコードやドラッグアンドドロップされたファイルデータが外部のサーバーに送信または保存される仕組みはないため、公開前のデザインや機密性の高い案件のソースコードでも安全にクリーンアップが行えます。
Q.デザインツールから書き出したコードを最適化すると何が具体的に削除されますか
A. ウェブブラウザでの描画に影響を与えない不要な記述が削除されます。具体的にはアドビ専用のコメント行、メタデータタグ、非標準の属性、インデントや改行などの余分な空白スペースが一括で除去され、純粋な描画データのみを残してファイルサイズを軽量化します。
Q.丸め処理の数値を変更するとプレビュー上の見た目にどのような影響がありますか
A. 丸め処理の精度を下げすぎるとパスの座標数値が過度に四捨五入され、アイコンの曲線がカクついたり形状が歪んだりする場合があります。当ツールでは形状の美しさとコードの軽量化のバランスが最も優れた二ピクセル精度での設定を推奨しています。
Q.カラーオーバーライド機能で色を変更した後に元に戻すことはできますか
A. いいえ。当ツール上でカラーコードをカレントカラー等に書き換えた場合、元のカラーコードは保持されません。元の色情報を残しておきたい場合は、変換を実行する前にお手元のテキストエディタ等へバックアップを保存してから作業を行ってください。
Q.数万行を超えるような巨大なSVGコードを読み込ませても動作しますか
A. 一般的なウェブサイトで使用されるアイコンやイラストの規模であれば遅延なく瞬時に処理が可能です。ただし、高密度な地図データや極端に複雑なグラデーションパスを含む巨大なファイルの場合は、お使いのブラウザのメモリ性能によって処理に時間がかかることがあります。
Q.パソコン以外のスマートフォンやタブレットのブラウザでも最適化機能は使えますか
A. はい。レスポンシブ設計を採用しているため、スマートフォンやタブレットのブラウザからでもコードの貼り付け、プレビューの確認、オプションの調整、最適化後のコードコピーやファイルダウンロードまでのすべての機能を同様に利用できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。