SVG を分割

SVG 分割

1 つの SVG を最上位のパーツに分けます。グループ・シンボル・図形をすべてプレビューし、必要なものにチェックを入れて、個別ファイルとして持ち出せます。

SVG を分割

☞ すべてブラウザ内で処理 — アップロードは一切ありません

ここに SVG をドロップ

またはクリックして選択 — SVG のみ

パーツごとに 1 ファイル

何が「パーツ」と見なされるか

分割されるのはファイルの最上位だけで、しかも実際に何かを描いている要素だけです。グループ、シンボル、パス、図形、テキスト、画像が対象です。グラデーション・フィルター・マスク・スタイルシートは描画ではなく定義なので、単体で一覧に出ることはありません。グラデーションだけのファイルは真っ白になってしまうからです。

書き出される各パーツは、元ファイルの定義とスタイルを丸ごと引き継ぎます。そのぶん各ファイルは必要以上に大きくなりますが、これは意図的な取引です。グラデーションが欠けた小さいファイルより、元の中とまったく同じに描画されるパーツのほうが価値があります。使われていない部分は SVG 最適化ツールに通して落としてください。

3 ステップ

SVG を分割する手順

01

SVG をドロップ

.svg ファイルを選びます。ファイルは端末内に留まります。

02

パーツにチェック

各パーツは書き出されるとおりの姿でプレビューされます。

03

ダウンロード

1 つならそのまま、複数なら ZIP でまとめて届きます。

かんたん回答

SVG 分割のよくある質問

なぜ各パーツが元ファイルと同じくらい大きいのですか?

defs ブロックとスタイルシートをまるごと持っていくからです。ある図形が実際にどのグラデーションやフィルターを使っているかを推測すると、静かに間違えます。そこで全パーツに一式を持たせています。使われていない部分は SVG 最適化ツールが一度で取り除きます。

何も一覧に出ませんでした。なぜ?

おそらく絵全体が 1 つのグループに入っていて、それが 1 パーツと数えられています。分割は意図的に最上位までに限定しています。さらに深く潜ると、ふつうのイラストから何百もの断片ができてしまうからです。

アイコンスプライトでも使えますか?

使えます。むしろ最も得意なケースです。スプライト内の各シンボルは、そのシンボル自身の viewBox を使った単独ファイルになるので、真っ白なキャンバスではなく、きちんと切り取られたアイコンが 1 ファイルずつ得られます。

パーツは中身に合わせて切り詰められますか?

いいえ。各パーツは元の viewBox をそのまま保つので、絵全体の中にあったときと同じ位置・同じ縮尺のままです。詰めたい場合は、あとから SVG クロップツールを使ってください。

いくつまで処理できますか?

最上位のパーツは先頭 100 個までが一覧に出ます。それを超えると、プレビューの生成にかかる時間が分割の価値を上回ります。先にファイルを統合するかグループ化してください。

ファイルはアップロードされますか?

いいえ。解析も分割もブラウザ内で行われ、ZIP もそこで作られます。