てもとツール

SVGプレビュー・最適化｜コードを貼るだけで即軽量化・日本語UI

SVGコードをブラウザ内で即プレビュー・最適化。コメント削除・空白圧縮・色コード短縮をワンクリックで。完全無料・サーバー送信なし。

ブラウザ内処理 完全無料 登録不要
詳細設定
最適化オプション
小数点桁数

このツールについて

使い方・特徴・補足情報

SVGプレビュー・最適化とは

SVG は、アイコンやイラストに広く使われるベクター画像形式です。Illustrator や Figma の書き出しには、不要なコードが多く混ざりがちです。

本ツールは SVG コードを貼るだけで、プレビューと最適化結果を表示します。コメント削除・空白圧縮・色コード短縮などを選べます。

最適化前後のファイルサイズと削減率も並びます。

処理はすべてブラウザ内で完結し、ロゴや設計図の SVG を外部へ送りません。

👤 こんな人におすすめ✨

SVGを扱うデザイナー・開発者

✅ 楽になること

SVGのプレビューと軽量化

✍️ 避けたい手間

不要コードによる容量の膨らみ

解決できる困りごと

  • 不要なコメントや空白を残したまま納品して容量が膨らむ失敗を防げる
  • 色コードを短縮し忘れたまま使い続けてしまう手間を減らせる
  • プレビューを見ながら最適化結果を確認できるので、表示崩れに気付きやすい

使い方

  1. SVGコードをテキストエリアに貼り付けるか、SVGファイルを選択する
  2. 最適化オプション（詳細設定）で必要な処理を選ぶ（デフォルトで全て有効）
  3. プレビューで見た目を確認し、最適化前後のサイズと削減率を確認する
  4. 「コピー」または「ダウンロード」ボタンで最適化済みSVGを取得する

使用例

Illustrator 書き出し SVG の圧縮

Illustrator が吐き出す冗長な属性・コメントを除去し、サイズを約 40% 削減する例です。見た目は変わりません。

入力

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 27.0 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50.000" cy="50.000" r="40.000" fill="#FF0000" />
</svg>

出力

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="red"/></svg>
（420 byte → 145 byte / 65% 削減）

色コードの短縮

6 桁 HEX が短縮可能なときは 3 桁に、名前で表せるものは CSS カラー名にまとめる例です。

入力

<rect fill="#FF0000" />
<rect fill="#FFFFFF" />
<rect fill="#112233" />

出力

<rect fill="red"/>
<rect fill="#fff"/>
<rect fill="#123"/>

活用シーン

Illustratorの書き出しSVGを軽量化

Illustrator の SVG には、固有のコメントやメタデータ、不要なネームスペース属性が含まれます。一括削除して読み込みを軽くできます。

Figmaアイコンの最適化

Figma からコピーした SVG には冗長な属性が混ざります。貼るだけで最適化でき、デザインとコーディングの流れに組み込めます。

アイコンのファイルサイズ削減

アイコン SVG の容量は読み込み速度に直結します。小数点の桁制限や空白削除で圧縮し、インライン SVG を軽くできます。

SVGコードのプレビュー確認

手書きや修正した SVG を、ブラウザで開かずに見た目を確かめられます。どの属性変更が外観に効くかを素早く把握できます。

コードレビュー前の前処理

PR に SVG を含める前に、メタデータやコメントを除いて diff を読みやすくできます。レビュアーが変更の意図に集中できます。

色コードの統一と短縮

#FFFFFF を #FFF に自動短縮し、CSS と合わせた表記統一ができます。ファイル全体の色指定をまとめて整理するのにも向きます。

技術的な解説

補足: 仕組み

DOMParser で SVG の XML 構造をパースし、検証します。最適化は外部ライブラリを使わず、正規表現と DOM 操作で動きます。

コメント削除は <!--...--> を正規表現で除き、空白圧縮はタグ間の空白を詰めます。色コードは条件を満たすときだけ3桁へ短縮します。

小数は toFixed(n) で丸めます。プレビューは Data URI を <img> に渡し、XSS なく描画します。

もっと詳しく

viewBox を消すと拡大縮小が崩れる理由

viewBox は内部座標系と、表示領域へのスケーリング基準を定める属性です。不要と勘違いして消すと、固定サイズでしか描画できず、CSS で幅を変えても比率が崩れます。

width / height を外して viewBox を残すのが定石です。最適化で属性を削るとき、この2つを混同しないことが重要です。

色コードが3桁に縮められる条件

6桁 HEX が3桁になるのは、#112233 のように各成分のペアが同じ文字のときだけです。#123456 のような色は3桁で表せず、6桁のまま残ります。

これはブラウザが各桁を二度書きに展開する仕様に基づく可逆変換で、見た目は同じです。CSS 色名で表せる色は名前にし、短いほうを採ります。

よくある質問

フォントを埋め込んだSVGも処理できますか？

テキストノードや埋め込みフォントを含む SVG も処理できます。空白削除はテキスト内容に影響しない設計ですが、表示が変わらないかプレビューで確認してください。

最適化でSVGの見た目は変わりますか？

コメント削除・空白削除・色コード短縮は描画に影響しません。小数の桁制限はごく精密な数値を丸めるため、拡大時にわずかな差が出る場合があり、プレビューで確認すると安心です。

データはサーバーに送信されますか？

送信されません。処理はすべてブラウザ内で完結するため、機密性の高いロゴや設計図の SVG ファイルも手元だけで最適化できます。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。