てもとツール

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

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

ブラウザ内処理 公開 更新
詳細設定
最適化オプション
小数点桁数

SVGコードを貼り付けるかファイルを選択してください

最適化後のサイズ・プレビュー・コードが表示されます

このツールについて

使い方・特徴・補足情報

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

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

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

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

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

こんな人におすすめ

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

楽になること

SVGのプレビューと軽量化

避けたい手間

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

解決できる困りごと

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

使い方

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

使用例

Illustrator 書き出し SVG の圧縮

生成元のコメント・改行・字下げを除き、50.000 を 50 に、#FF0000 を #f00 に縮める例です。XML 宣言と width / height は残ります。

入力

<?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>

出力

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#f00" /></svg>
（240 bytes → 177 bytes / −26.3%）

色コードの短縮

6 桁 HEX は、各成分の 2 文字が同じときだけ 3 桁になる例です。red のような色名には置き換えません。

入力

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

出力

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

活用シーン

Illustratorの書き出しSVGを軽量化

Illustrator の書き出しには、生成元を示すコメントや字下げの空白が残ります。まとめて削れば、見た目を変えずにファイルが軽くなります。

Figmaアイコンの最適化

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

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

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

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

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

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

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

色コードの統一と短縮

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

技術的な解説

補足: 仕組み

外部ライブラリを使わず、RegExp で文字列を書き換えます。コメントは <!--...--> ごと除き、空白はタグ間の改行と字下げを詰めます。

小数は d や viewBox など数を書く属性の中だけ toFixed(n) で丸め、XML 宣言や id は触りません。d は命令ごとに引数を数え、円弧の 0 / 1 のフラグを数と取り違えません。

もっと詳しく

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

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

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

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

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

これはブラウザが各桁を二度書きに展開する仕様に基づく可逆変換で、見た目は同じです。red のような色名への置き換えはしません。

よくある質問

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

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

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

コメント削除・空白削除・色コード短縮は描画に影響しません。小数の桁制限は座標を丸めるので、大きく表示するとずれが見えることがあります。

不透明度は 0 桁を選んでも小数 2 桁で残し、線の太さのように 0 になると消える値も 0 にはしません。

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

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

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

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