SVG の読み込み
Illustrator、Affinity Designer、Inkscape、Figma のベクターの絵を、編集できるシェイプレイヤーとして持ち込みます。そして、残らない SVG の機能もまとめます。
SVG は、ここでは本物の形になります。パスはアンカーとハンドルを持つシェイプレイヤーになり、ノードツールで編集できます。絵の写しではありません。ファイルの中のグループは、レイヤーパネルのグループになります。
入ってくる道は四つあり、どれも同じ読み取りが走ります。
- ファイル ▸ インポート ▸ SVG… は、開いているプロジェクトへ読み込みます
- SVG を選んだ ファイル ▸ 開く… は、それを中心に無題の新しいプロジェクトを組み立てます
- ファイルをキャンバスへ落とすと読み込まれ、それ以外の場所へ落とすと新しいプロジェクトとして開きます
- Ctrl+V で、ほかのアプリからコピーした SVG の記述を貼り付けます
ファイルから読み込んだときは、包むグループにファイルの名前が付きます。クリップボードから貼り付けたときは「SVG」という名前になります。
何が何になるか
| SVG では | Celas Studio では |
|---|---|
| g、a、入れ子の svg | グループレイヤー |
| path、rect、circle、ellipse、polygon、polyline、line | それぞれ一つのシェイプレイヤー |
| image | 画像レイヤー |
| linearGradient、radialGradient | それを使うシェイプのグラデーションの塗りか線 |
| text | 最初の数文字を名前にした、空のプレースホルダーのレイヤー |
パスのコマンドはすべて理解されます。楕円の弧も含めて、すべて三次ベジェへ変換されます。複合パス（O の字、ドーナツ、穴のあるもの）は内側の輪郭を保ったまま一つのシェイプレイヤーとして残るので、穴もちゃんと働きますし、全体が一つのものとして編集できます。
塗り、塗りの規則、線、線幅、線端と結合、不透明度、グラデーションは、どれもそのまま来ます。線幅も絵と一緒に拡大縮小されるので、線の重みが正しく見えます。ファイルで非表示になっているものは、非表示のまま来ます。
色は、描画モデルが使うすべての CSS の書き方で読まれます。色名、#RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb()、rgba() で、数値の形ではパーセントも受け付けます。四桁と八桁の 16 進はアルファも運びます。
rx と ry の違う角丸の rect は、本当に楕円の角として読み込まれます。rx と ry が一致するときは、代わりに角の丸めを持つただの長方形のまま残るので、ノードツールの角の丸めのハンドルがそのまま使えます。
リンクされた <image> は SVG 自身のフォルダーを基準に解かれるので、隣のファイルを参照している絵も読み込まれます。埋め込まれた data: の URI は、そのまま復号されます。
グループは変形を持たない
ファイルの中の変形は絵そのものに焼き込まれるので、できあがるグループは純粋な構造で、自分の回転も拡大縮小も持ちません。絵はファイルが言うとおりの場所にきっちり落ち、あとからグループを回しても拡大縮小しても、下で何かがずれることはありません。
対応していないもの
この読み取りが覆うのは描画のモデルであって、SVG の仕様全体ではありません。以下はすべて、何も言わずに飛ばされます。
- CSS の style ブロックと class 属性。下の警告を見てください
- use と symbol。スプライトシートや繰り返しのインスタンスは、空のまま読み込まれます
- clipPath と mask。切り取りは適用されないので、切り取られていたはずの絵が出てくることがあります
- パターンの塗り。ベタの灰色に落ちます
- フィルターの効果。ぼかし、ドロップシャドウ、その他すべて
- marker。矢印の先や線の端
- stroke-dasharray と stroke-dashoffset。破線は実線として読み込まれます
- switch、foreignObject、SMIL のアニメーション
- テキスト。フォント、大きさ、位置は失われ、名前だけのプレースホルダーのレイヤーが残ります
- パーセントと相対単位、それに style 属性の中に書かれた変形
きれいに読み込めるファイルの作り方
- エクスポートする前にテキストをアウトライン化してください。テキストはプレースホルダーとしてしか来ません。
- 線、破線、パターン、残したいフィルターの効果はアウトライン化してください。
- クリッピングマスクを解除するか、絵を見えるべき範囲に切り抜いてください。
- シンボルと繰り返しのインスタンスを展開して、use に頼るものをなくしてください。
- CSS ではなくプレゼンテーション属性でエクスポート、ドキュメントに viewBox を付けてください。
大きさと配置
ドキュメントの幅と高さは、ピクセル、ポイント、パイカ、インチ、ミリメートル、センチメートルで読まれ、viewBox と組み合わせて絵がほどよく拡大縮小されます。パーセントで大きさを決めたファイル（よくある width=100% のウェブのロゴ）は、引き伸ばされる代わりに viewBox の大きさで読み込まれます。そのあと、絵はキャンバスの中央に置かれます。