SVGの色を位置のそろった個別ファイルに分ける方法
多色SVGを正確な色ごとに分割し、viewBoxとサイズを保ちます。レイヤーの位置ずれや、グラデーション、文字、カットファイルの問題を避ける手順を解説します。
目次
SVGの色を個別ファイルに分けるには、正確な塗りの色ごとに図形をまとめ、各グループを元と同じフルサイズのアートボードで書き出します。色ごとに内容の境界まで切り詰めないでください。余白があるからこそ、読み込み、切断、スクリーンプリント、再組み立ての際に各部分の位置がそろいます。
対応する単色塗りのSVGなら、PerfectVectorの無料のSVG Color Separatorがブラウザー内で処理します。複雑な作品は、ベクターエディターで塗りごとにオブジェクトを選び、各色を手動で書き出せます。
安全に色分離するための原則
- 元SVGの未加工コピーを作ります。
- 似た重複色をまとめるかは、分離の前に決めます。
- 正確な塗りの色ごとにまとめ、グラデーション、パターン、画像を単純な色として扱いません。
- すべての出力で元の幅、高さ、viewBoxを保ちます。
- 各図形の元の位置と、同色内の描画順序を保ちます。
- すべてのファイルを一緒に読み込み、材料を切る前にサイズと位置合わせを確認します。
各色ファイルでアートボード全体を保つ理由
左上に青い花びら、右下に赤い花びらがある花を想像してください。両ファイルを内容にぴったり切り詰めると、それぞれの花びらが新しい文書の左上に移ります。2つのSVGは共通の座標系を失い、再組み立ては手探りになります。
各ファイルが元のアートボードを保持すれば、色は本来の座標に残ります。青だけのファイルには大量の空白があるかもしれません。それは無駄ではなく、意図した位置合わせの情報です。
SVGのviewBoxは内部の座標空間を定義します。カッター、印刷先、製作パートナーが実寸を重視するなら、信頼できる物理的な幅・高さと一緒に保ってください。
正確な色と見た目の色は同じではない
SVGには#ff0000と#fe0000が含まれることがあります。ほとんど同じに見えても、正確な値は2つなので、値ごとに分ける手順では2ファイルになります。デザイナーが製作上1色を意図したと勝手に推測するより安全です。
分離前に配色を確認します。
| 状況 | 対処 |
|---|---|
| ノイズの多いトレースから、偶然よく似た値が2つできた | 意図して結合し、その後に分離する |
| 似た色がハイライトと影を表す | 分けたままにする |
| 色が切断、スコア、印刷など別の加工を表す | 分けたままにし、ファイル名で区別する |
| グラデーションを使っている | 意図的にフラット化する、選んだ単色に置き換える、元の工程を保つ |
| SVGにラスター画像がある | ベクター化前に元画像を分離するか、パスとして作り直す |
配色を減らす手順では、見た目と製作上の役割に沿って近い色をまとめる方法を説明しています。先にその判断を行います。分離ツールが代わりに決めるべきではありません。
方法1：無料のブラウザー分離ツールを使う
SVG Color Separatorは、もっともらしく見えても誤ったレイヤーを返すのではなく、ファイルを保持できるよう、対応するSVGの範囲を意図して絞っています。
1. SVGを選ぶ
5 MiBまでのSVGを選択します。安全なプレビューやダウンロードを作る前に、使い捨てのブラウザーワーカー内で文書を検査します。SVGの内容、ファイル名、パス、色、プレビュー、生成ファイルはPerfectVectorに送信されません。
現行版は、不透明な単色塗りのベクター作品向けです。一般的な座標変換を持つパス、長方形、円、楕円、多角形、対応するポリラインを扱います。対応するインラインおよび継承された単色の塗りを処理できます。
2. 互換性とサイズを確認する
受け付けられた合成画像、物理寸法、viewBox、パス数、正確な色の配色、警告を確認します。viewBoxはあっても信頼できる物理的な幅と高さがない場合は、片方の寸法を確認します。もう片方は比率を保ちます。
未対応の内容を取り除くのではなく、処理を停止します。現行の停止条件には、見えるストローク、グラデーション、パターン、フィルター、クリッピングパス、マスク、編集可能な文字、埋め込み画像、再利用参照、入れ子のSVG、外部リソース、スタイルシートやクラス、スクリプト、イベントハンドラー、透明な切断色が含まれます。
この境界はSVGモデル自体に基づきます。SVG 2の描画仕様は、単色をグラデーション、パターン、塗りの不透明度、ストロークの挙動と区別しています。見える「色」が、安全に別ファイルへ移せる1つの平坦な値とは限りません。
3. 正確な色ごとのプレビューを調べる
ツールは、不透明な正確な色ごとにプレビューを1つ作ります。次を確認します。
- 想定した図形が正しい色のファイルに現れる
- 必要なストローク、文字、画像が失われていない
- 合成画像の寸法が元データと一致する
- 各レイヤーが元の位置に残る
- 製作で意図した色数になっている
単色のSVGも有効で、すでに分離済みです。正確な色が2～24色のファイルには通常のレイヤービューが表示されます。それより多くても対応範囲と安全上の上限内なら処理できますが、数十色ある場合は通常、先に配色を整理すべき兆候です。256色を超える正確な色は受け付けません。
4. ファイルをダウンロードする
必要な色ファイルを個別にダウンロードするか、ローカルのアーカイブを使います。各出力は同じ幅、高さ、viewBox、座標系を保ちます。ファイル名とレイヤー順序は一定の規則で決まるので、同じ受け渡しを再現できます。
分離ツールとレイヤーのダウンロードに登録やクレジットは不要です。PerfectVectorの有料のラスターからベクターへのダウンロードとは別の機能です。
方法2：ベクターエディターで色を分ける
分離前にSVGを修正する必要がある場合は、Illustrator、Inkscape、Affinityなどのベクターエディターを使います。
- コピーを開き、文書の幅、高さ、viewBoxまたはアートボードを記録します。
- 受け取り先が図形を求めるなら、編集可能な文字をアウトラインに変換します。
- 未対応のストローク、グラデーション、パターン、マスク、クリッピング構造を展開するか、意図して置き換えます。
- 代表的な図形を1つ選び、エディターのSelect Same Fill Color（同じ塗りの色を選択）コマンドを使います。
- 同じ寸法と原点を持つ複製アートボードへ、選択した図形をコピーします。
- 選択図形を動かさず、ほかの色を削除または非表示にします。
- 色ファイルをSVGで書き出し、繰り返します。
- すべてのファイルを一緒に再読み込みし、正確に重なるか確認します。
選択範囲ごとに、ぴったり収まる新しい文書を作らないでください。元のアートボードを複製するか、その境界を保つ書き出し設定を使います。
手動編集では、製作に役立つ場合に同色の図形を結合することもできます。ただし、穴、重なり、元の描画順序、後の編集が別々のオブジェクトに依存する場合は、自動的に合体させないでください。
Cricut用にファイルを準備する
Cricutの現在の画像アップロードガイドでは、レイヤー付きSVGはデザインどおりにアップロードされ、グループ画像として現れ、グループ解除後に各レイヤーを移動・サイズ変更できると説明しています。SVGの5,000パス制限も記載されています。
切断前に、次を行います。
- 分離したファイルをすべてアップロードします。
- 寸法を変えず、同じCanvasへ追加します。
- 各ファイルが同じ幅と高さを示すか確認します。
- 正確な重ね合わせが必要な場合は、位置指定や共通の位置合わせ方法を使います。
- 各レイヤーに正しい加工と材料色を割り当てます。
- 安価な材料で小さなテストを行います。
Cricutの未対応項目のガイドは、パターン塗り、グラデーション、クリッピングパス、編集可能な文字、リンク画像、埋め込まれた未対応画像を、レイヤー付きベクターのアップロードの問題として明示しています。書き出し前に文字を図形へ変換し、こうした機能を意図して単純化します。
より広い確認には、切断前にSVGを調べる方法を使います。予想外のサイズで読み込まれる場合は、個別のレイヤーをサイズ変更する前に、SVGのサイズずれの診断を行ってください。
色分離でよくある間違い
レイヤーの位置が合わなくなった
色ごとに内容の境界まで切り詰めたか、原点の違う文書へ貼り付けた可能性があります。元のアートボード、幅、高さ、viewBoxで書き出し直します。
1つの「色」が複数ファイルになった
SVGに似た値が複数あります。同じ役割を持つ値を決め、意図してまとめてから分離し直します。
グラデーションが消える、または拒否された
グラデーションはペイントサーバーで、正確な単色の塗り1つではありません。意図した単色領域に置き換える、元のグラデーション工程を保つ、階調の忠実度が重要ならラスターの製作方法を使う、といった対処をします。
文字やストロークがない
編集可能な文字と見えるストロークは、塗り付き輪郭パスとは構造が違います。受け取り先の要件に合う場合にのみ、ベクターエディターで図形に変換します。
Cricutがファイルを拒否する
まず未対応機能とパス数を確認します。有効なSVGでも、Design Spaceの対応する範囲外である場合があります。
よくある質問
SVGに複数の色を含められますか？ はい。SVG図形は異なる塗りやストロークを使え、グラデーション、パターン、不透明度、参照される塗りにも対応します。正確な色での分離が最も簡単なのは、不透明な単色の塗りです。
分離したファイルに空白が多いのはなぜですか？ 空白は元のアートボードと座標を保つためのものです。読み込みや再組み立ての際に、各色の位置がそろったままになります。
似たSVGの色は自動的にまとめられますか？ いいえ。PerfectVectorの分離ツールは正確な色ごとにまとめます。1つの製作用の色にしたい近い値は、分離前に意図して結合してください。
グラデーションを色ファイルに分けられますか？ 作品を変えずに正確な単色レイヤーとして分けることはできません。選んだ単色領域に置き換える、元のグラデーション工程を残す、滑らかな階調が重要ならラスター出力を使う、といった方法を選びます。
SVG Color Separatorは無料ですか？ はい。対応するSVGは、アカウントやクレジットなしでローカルで確認、プレビュー、分離、ダウンロードできます。静的なページ素材は通常どおり読み込まれますが、文書データはブラウザー内にとどまります。
参考資料
- PerfectVector — SVG Color Separator — 現在のローカル処理、正確な色、位置合わせ、互換性、ダウンロードの仕様です。
- W3C — SVG 2の描画 — 塗り、ストローク、単色、グラデーション、パターン、不透明度、参照される塗りを定義しています。
- Cricut — Design Spaceへの画像アップロード方法 — 現在のレイヤー付きSVGの読み込み動作とパス数の上限です。
- Cricut — 画像アップロードの未対応項目 — レイヤー付きベクターでの、現在のグラデーション、パターン、クリップ、文字、画像の制限です。
すべての色の位置をそろえておきたいですか？ 無料のSVG Color Separatorを開き、正確な色ごとのプレビューと寸法を確認し、共通のアートボードに問題がないことを確かめてからダウンロードしてください。
