SVGView

SVGミニファイアー

外観を変えずに SVG サイズを縮小します。 Web パフォーマンスと軽量アイコン配信に最適です。 SVG ファイルを開いてすぐに処理できます。

SVG ファイルをドラッグ＆ドロップ

またはクリックして選択、もしくは SVG コードを貼り付け

.svg ファイルのみ対応
Ctrl+V / Cmd+V で SVG コードを貼り付け

SVG ミニファイアを使用する理由

空白の削除

SVG ミニファイアーはスペース、タブ、改行を削除してバイト数を減らします。これは、SVG が HTML または CSS にインライン化されており、すべての文字が重要である場合に理想的です。また、JSON または CMS フィールドに埋め込まれた SVG のサイズも削減されます。

ビジュアルセーフ

書式設定のみが変更されるため、出力ではレンダリングが維持されます。パス、塗りつぶし、グループは変更されないため、視覚的な結果はブラウザ間で同じままになります。これにより、デザイン レビューは実際の視覚的な変更に重点を置くことができます。 SVG ミニファイアは、ジオメトリや色を変更しないため、ビジュアル QA の前に安全に実行できます。

小さいファイル

SVG ミニファイアは、多くのインライン アセットを含むアイコン セット、マーケティング ページ、UI キットのペイロード サイズを削減するのに役立ちます。ファイルが小さいほど読み込みが速くなり、パフォーマンス メトリクスが向上します。これは、モバイルでのパフォーマンスの予算を満たすのに役立ちます。

SVGO 搭載

SVG ミニファイアは、信頼性の高い空白の削除のために SVGO を使用します。これにより、ファイル間で結果の一貫性が保たれ、危険な属性変更が回避されます。 CI ワークフローでは予測可能です。

インスタントエクスポート

処理後、SVG ミニファイアを使用すると、ファイルを即座にダウンロードまたはコピーできます。これにより、結果をリポジトリまたはパイプラインに簡単にドロップできます。結果をチケットに直接貼り付けることができます。

ローカル処理

すべてがブラウザ内で実行されるため、ファイルがアップロードされることはありません。これにより、個人資産が安全に保たれ、オフライン作業がサポートされます。また、大規模なアセットのアップロードに時間がかかることも避けられます。ローカル実行は、ロックダウンされたネットワークでもうまく機能します。

SVG を縮小する方法

1

SVG をアップロードする

ファイルをドラッグ アンド ドロップするか、マークアップを貼り付けて開始します。 SVG ミニファイアはローカルにロードされ、プレビューが表示されるため、エクスポートする前にソースを確認できます。デザイン ツールから生のエクスポートまたはスプライトを貼り付けることができます。 SVG ファイルを開いてすぐに処理できます。

2

コードを縮小する

縮小ステップを実行して、すべての属性を維持しながら空白を削除します。これにより、デザイン システムとスクリプトの出力が安定した状態に保たれます。 SVG minifier は、リリース前に出力を標準化するのに役立ちます。読み取り可能な差分が必要な場合は、まずフォーマットしてから縮小してください。

3

SVGをダウンロードする

縮小されたファイルを即座にエクスポートします。 SVG ミニファイアーはファイル名の一貫性を保つため、プロジェクト全体でアセットを簡単に置き換えることができます。出力をコミットまたはインライン化する準備ができました。

SVG ミニファイアに関するよくある質問

オンライン SVG minify によって SVG の見た目は変わりますか?
いいえ。SVG ミニファイアーは空白のみを削除するため、視覚的な出力は変わりません。ジオメトリ、色、変換は結果にそのまま残ります。これは、ピクセルを完璧に保つ必要があるアイコンに最適です。
SVG の縮小と最適化: 違いは何ですか?
SVG ミニファイアは書式設定に重点を置き、最適化により冗長な属性とメタデータが削除されます。構造を変更せずに迅速にサイズを向上させるために使用し、より深い圧縮が必要な場合に最適化します。最適化により、未使用のメタデータが削除され、ペイロードがさらに削減されることもあります。
IDやviewBoxは変更されるのでしょうか？
いいえ。SVG ミニファイアーは ID、viewBox、幅、高さを保持します。セレクターまたはスクリプトに依存している場合、出力ではそれらの参照が壊れることはありません。これにより、CSS および JS でセレクターが安定した状態に保たれます。
縮小されたSVGをダウンロードできますか?
はい。 SVG ミニファイアはインスタント ダウンロードおよびコピー オプションを提供するため、出力を CI、ビルド ステップ、またはクイック アセット ハンドオフで使用できます。 QA を簡単に比較するのに便利です。これは、デバイス間でアセットを検証する場合に役立ちます。
SVG はサーバーにアップロードされていますか?
いいえ。SVG ミニファイアはブラウザ内でローカルに実行されるため、ファイルがデバイスの外に流出することはありません。このローカル ワークフローは、厳格なプライバシー要件を満たしています。アカウントやアップロードは必要ありません。
縮小する前にフォーマットまたはクリーンアップする必要がありますか?
読み取り可能な差分が必要な場合は、最初にフォーマットまたはクリーンにしてから、最後に SVG minifier を実行します。これにより、レビュー出力が読みやすくなり、本番ファイルがコンパクトに保たれます。このワークフローはデザイン システム リポジトリでは一般的です。
縮小するとアクセシビリティに影響しますか?
SVG ミニファイアはアクセシビリティ属性を削除しません。タイトルと ARIA ラベルはそのまま残るため、追加の手順を行わなくてもコンプライアンスを維持できます。エクスポート後は、必ずアクセシビリティ チェックリストで確認してください。
インラインSVGに使用できますか?
はい。 SVG ミニファイア出力は、HTML、CSS、または JS のインライン SVG に最適です。インライン アセットが小さいとペイロードが軽減され、モバイルでのレンダリングが高速化されます。 CSS の背景画像にも役立ちます。
大きいファイルや複雑なファイルについてはどうすればよいでしょうか?
SVG minifier は大きなファイルを処理できますが、処理時間はデバイスによって異なります。ファイルが大きい場合は、ツールを実行する前にファイルを分割するか、未使用のレイヤーを削除してください。速度が低下する場合は、重いタブを閉じてください。
読み取り可能なバージョンを保持する必要がありますか?
はい。 SVG ミニファイアは実稼働ビルドに最適です。編集用にフォーマットされたソース ファイルを保存し、展開またはインライン化には縮小バージョンを使用します。縮小されたファイルをビルド アーティファクトに保存します。将来の編集を簡素化するために、読み取り可能なバージョンをデザイン ソースに保存してください。
SVG Minifier はダウンロードせずに無料で使用できますか?
はい。 SVG Minifier はブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。
SVG Minifier を使用するにはアカウントが必要ですか?
いいえ、SVG Minifier はサインアップしなくてもブラウザで即座に動作し、ファイルはローカルに残ります。

関連する SVG ツール

SVG ミニファイアをこれらのツールと組み合わせて、アセットをクリーンアップ、最適化、または変換します。予測可能な結果を​​得るために、これらを順番に使用してください。

SVG オプティマイザー

より詳細な最適化を行った後、SVG ミニファイアーを実行して、最終アセットに残った空白を削除します。

ツールを開く

SVGフォーマッタ

クリーンな差分とコンパクトな運用ファイルが必要な場合は、フォーマット後に SVG ミニファイアーを使用します。

ツールを開く

SVG クリーンアップ

最初にメタデータを削除し、次に SVG minifier で終了して、出力を小さく整然とした状態に保ちます。

ツールを開く

SVG から Data URI

SVG ミニファイア出力を、CSS 背景またはインラインで使用するためのコンパクトな Data URI に変換します。

ツールを開く

関連 SVG ブログ

SVG ワークフロー、トラブルシューティング、本番運用の実践記事を続けて読めます。