Loading…

概要 オンラインSVGビューティファイアー＆ミニファイアー

乱雑なSVGファイルやサイズの大きいSVGファイルでお困りですか？コードを貼り付けるか、`.svg`ファイルをアップロードし、**Format**を選択して整形するか、**Minify**を選択してサイズを縮小し、瞬時にクリーンで最適化されたSVGマークアップを取得できます。デザイナー、フロントエンド開発者、そして高速で安全なベクター最適化が必要なすべての方に最適です。🚀

当社SVGフォーマッターの主な機能

  • **ビューティファイモード**：スマートなインデント、行折り返し、属性の整列
  • **ミニファイモード**：空白、コメント、冗長なメタデータを除去
  • PrettierスタイルのフォーマットとSVGOスタイルの最適化を内部採用
  • 設定可能なインデントスタイル（スペースまたはタブ）とインデントサイズ
  • オプションの折り返し列で長いパスと属性を整理
  • 一貫した改行スタイル（LF / CRLF）でOS間の差分をクリーンに
  • 最大5MBの.svgファイルをドラッグ＆ドロップ、またはインラインSVGマークアップを貼り付け
  • 100%クライアントサイド処理 — アートワークがブラウザから流出することはありません
  • フォーマット済み（.formatted.svg）または圧縮（.min.svg）出力のワンクリックコピー・ダウンロード
  • ノートパソコン、デスクトップ、タブレットで快適に動作するレスポンシブUI

🔧 SVGのフォーマットまたは圧縮方法：クイックガイド for svg-formatter

1

1. SVGの貼り付けまたはアップロード

📥 .svgファイルをドラッグ＆ドロップするか、生のSVGマークアップをエディターに貼り付けます。ツールは標準のimage/svg+xmlコンテンツを自動検出します。

2

2. フォーマットまたは圧縮を選択

✨ 人間が読みやすいマークアップには**フォーマット**（レビューやバージョン管理に最適）、最小ファイルサイズには**圧縮**を選択します。

3

3. フォーマットオプションの調整

⚙️ **インデントスタイル**（スペースまたはタブ）、**インデントサイズ**、オプションの**折り返し/行の長さ**を調整します。これらは基盤となるフォーマッター設定に直接マッピングされます。

4

4. プレビュー＆エクスポート

👀 最適化されたSVGコードを確認し、プロジェクトで素早くテストしてから、クリップボードにコピーするか、結果を新しい.svgファイルとしてダウンロードします。

技術詳細

整形エンジン（フォーマットモード）

フォーマットモードはSVG XMLマークアップ用に調整されたPrettierスタイルのエンジンを使用します。読みやすさと安定した予測可能な差分に焦点を当てています。

項目動作備考
インデントスタイルスペースまたはタブ**インデントスタイル**で設定可能（indentStyleにマッピング）。
インデントサイズ1〜8スペーススペース使用時のネスト幅を制御（indentSizeにマッピング）。
折り返し/行の長さ0〜120カラム0は折り返しを無効化、それ以外は長い行を指定カラムで折り返し（wrapLineLengthにマッピング）。
改行LF（\n）またはCRLF（\r\n）OS間で改行を一貫させる（endOfLineにマッピング）。
出力言語XML形式のSVG安全な埋め込みのためのSVG互換XML構造を維持します。

最小化パイプライン（最小化モード）

最小化モードは、視覚的な出力を維持しながらサイズ削減に焦点を当てたSVGOにインスパイアされたパイプラインを使用します。

ステップ説明影響
コメントの削除レンダリングに影響しない`<!-- ... -->`コメントノードを取り除きます。ファイルサイズの縮小、差分のクリーン化。
冗長な空白の削除不要なスペース、タブ、改行を圧縮します。冗長なエディター出力SVGで大きな効果。
メタデータのトリミング安全な場合に非レンダリングメタデータノードをオプションで削除します。公開向け本番アセットに適しています。
属性の正規化属性を安定した方法で簡素化し並べ替えます。よりコンパクトな出力、キャッシュ性の向上。

エンコーディング & 互換性

出力はUTF-8 SVGで、最新のブラウザやツールと互換性があり、SVG 2仕様に準拠しています。

パフォーマンス & 制限（一般的なデスクトップブラウザ）

ファイルタイプ入力サイズ整形時間最小化時間典型的なサイズ削減率
アイコン5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
イラスト100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
ヒーローグラフィック500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
実際のパフォーマンスはCPU、ブラウザ、SVGの複雑さによって異なります。

パワーユーザー向けCLI代替手段

ターミナルワークフローやCI統合をお好みですか？PrettierとSVGOを組み合わせて、このツールと同様の動作を実現できます：

Linux / 🍎 macOS

PrettierでSVGを整形

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

SVGマークアップに一貫したインデントと行折り返しを適用します。

SVGOでSVGを最小化

npx svgo input.svg -o input.min.svg

コメント、メタデータ、余分な空白を削除してファイルサイズを縮小します。

Windows (PowerShellまたはCMD)

xmlstarletを使用してSVGを整形（WSL経由またはネイティブ）

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

2スペースのインデントでSVG/XMLをフォーマットします。

SVGOでSVGを最小化（グローバルインストール不要）

npx svgo input.svg -o min.svg

`npx`経由でSVGOを直接実行し、1回限りの最適化を行います。

Prettier + SVGOをビルドまたはpre-commitフックに追加して、デザイナーが生のSVGをエクスポートし、パイプラインが最適化された状態を維持できるようにしましょう。

実用的なアプリケーション

Webパフォーマンスとフロントエンドバンドル

  • デザインシステム、アイコンセット、スプライトシートのSVGペイロードを削減。
  • HTML/CSSに最小化されたSVGをインライン化して追加のHTTPリクエストを節約。
  • ランディングページのヒーローイラストを縮小してCore Web Vitalsを改善。
<img src="/assets/hero.min.svg" alt="最適化されたヒーローグラフィック" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

デザインハンドオフとバージョン管理

  • コードレビュー前にエクスポートしたSVGを整形して差分を読みやすく。
  • コラボレーション用に整形された`.formatted.svg`と本番用に`.min.svg`を維持。
  • デザインシステム全体で一貫したインデントと属性順序を強制。

モバイル、メール、ハイブリッドアプリ

  • HTMLメールのインラインSVGを最小化してキャンペーンを軽量化。
  • React Native / Capacitor / Ionicで多数のアイコンを配信する際のアプリバンドルサイズを削減。
  • 低速または従量制接続のユーザーの帯域幅を節約します。

❓ Frequently Asked Questions

❓SVGフォーマットとは何ですか？

フォーマット（または整形）は、SVGマークアップを一貫したインデント、改行、属性順序で再構築します。画像の表示方法は変更せず、コードの見た目と差分動作のみを変更します。

📏最小化はSVGの見た目を変更しますか？

通常の場合、変更しません。最小化はコメント、冗長な空白、非表示のメタデータを削除します。サイズを削減しながら視覚的な結果を維持するように設計されています。編集ツール用の特別なメタデータに依存している場合は、元のファイルのバックアップを保持してください。

🔒私のSVGはサーバーにアップロードされますか？

決してありません。すべてのフォーマットと最小化はJavaScript/WebAssemblyを使用して完全にブラウザ内で実行されます。SVGファイルはサーバーに送信されたり、リモートで保存されたりすることはありません。

🚀最小化でどれくらいサイズを節約できますか？

実際の節約率は通常**30%から70%**の間で、SVGのエクスポート方法と含まれるメタデータや空白の量によって異なります。

⚠️`<metadata>`やコメントを削除するとワークフローが壊れますか？

公開用Webグラフィックスの場合、メタデータとコメントの削除は通常安全です。ただし、デザインツールが編集データやライセンス情報をそれらのセクションに保存している場合は、将来の編集のためにバージョン管理で元の最小化されていないコピーを保持してください。

Pro Tips

Best Practice

リポジトリには最小化されていない`icon.formatted.svg`を保持してクリーンな差分を確保し、ビルドステップの一部として`icon.min.svg`を生成します。

Best Practice

最小化前に意味のある`<title>`と`<desc>`要素を必ず含めて、スクリーンリーダーに対してSVGをアクセシブルに保ちます。

Best Practice

SVG最小化とHTTP圧縮（Gzip/Brotli）を組み合わせて、重いイラストやチャートからさらにバイト数を削減します。

Best Practice

アイコンセットの場合、スプライト戦略を検討してください：一度最小化し、SVGコードをどこでも複製する代わりに`<use>`経由でアイコンを参照します。

Additional Resources

W3C SVG 2仕様
Technical specification
MDN Web Docs: SVG
Documentation
SVGO (GitHub)
Documentation
Prettier XML / SVGフォーマット
Documentation

Other Tools