PenpotにSVGを読み込む：デザインで編集できる図形へ
SVGをPenpotのキャンバスに読み込み、個々の塗りとパスを確認します。デザインキットへアイコンを追加する前に、欠けた図案や編集できない文字の原因を調べましょう。
目次
PenpotにSVGを読み込むには、デザインファイルを開いて.svgをキャンバスへドラッグするか、ツールバーの画像ツールでファイルを選びます。ダッシュボードのImport filesはPenpotのプロジェクトファイル用です。アイコンを配置するなら、デザイン内から始めてください。Penpotのレイヤー挿入の説明とプロジェクト読み込みの説明が、この別々の方法を扱っています。
図案が表示されたら、色の領域を1つ変更し、輪郭を1つ編集できるか確認します。正しく見えるアイコンでも、変更しにくい場合があります。元データがすでにベクターなら、必要に応じて修正・再書き出しします。PNGやJPGをトレースするのは、ピクセルから図形を復元する必要がある場合だけです。
再利用する前に読み込み結果を確認する
元のSVGを残し、代表的なアイコンを1つ読み込んで複製上で作業します。見た目、塗り1つ、曲線1つ、編集可能な文字を試します。キット全体で手順を繰り返す前に、別のSVGを書き出して原版と比較してください。
キャンバスから始めてレイヤーを調べる
図案を置くPenpotファイルを開きます。保存したSVGを空いた領域へ挿入し、他のデザインから離して調べます。ドラッグに失敗したら、画像ツールのファイル選択を使い、ドラッグ＆ドロップの動作を診断から除きます。
読み込んだ図案を選び、Layersパネルで項目を展開します。グループは便利な整理方法であり、SVGがビットマップになった証拠ではありません。パネルから子を選ぶか、ダブルクリックしてグループに入れます。CtrlクリックやCommandクリックによる深い階層の選択も可能です。レイヤー選択ガイドが操作を説明しています。
SVGの内容によって、異なる種類のオブジェクトになります。リリース版のPenpotの読み込み機能では、パス、長方形、楕円など一般的な図形にネイティブの処理があり、それ以外の要素はraw SVGとして保持される場合があります。画像要素も別に処理します。そのため、ファイル名だけで各部分の編集方法は分かりません。SVG図形の読み込み実装をご覧ください。
最初にすべてのグループを解除・統合するのは避けます。まず変更したい部分を特定します。子の選択で必要な操作ができるなら、グループを保ちます。
塗り1つと曲線1つを試す
部分が明確に分かれた小さなアイコンを使います。鉢植えはよい例です。鉢の色を変えても葉が変わらず、葉1枚を編集しても植物全体がゆがまないことを確認できます。
読み込んだアイコンの複製で次を試します。
- 鉢のレイヤーを選び、対照的な色へ塗りを変えます。目的の領域だけが変わることを確認します。
- 葉のパスを1つ選びます。Enterでノード編集に入り、点を少し移動してから元に戻します。Penpotのノード編集の説明に記載されています。
- 複製を変更していない読み込み結果と比較します。試験を元に戻した後も、元のシルエット、小さな隙間、ストロークの太さが保たれることを確認します。
鉢と葉が一緒に変わるなら、選択と元の構造を調べます。外側のグループを選んでいるか、元データが複数領域を1本のパスへまとめている可能性があります。色変更に成功しても、すべての輪郭が独立したネイティブパスとは限りません。
raw SVGの内容という可能性もあります。Penpotには、そのための別のオプションパネルがあり、対応する要素の外観設定を含みます。塗りやストロークの設定があるだけでは、通常のノード編集を保証できません。必要な編集ができなければ、元のエディターでその部分を簡略化・描き直し、新しいコピーを読み込みます。違いはPenpotのraw SVGオプションの実装に見られます。
ファイルを変更する前に症状を診断する
変更していないSVGを基準に使います。ブラウザーで開き、その描画をPenpotの読み込みと比較します。ブラウザーですでに見た目が違うなら、Penpotのコピーを直す前に元の書き出しへ戻ります。
| 見える症状 | 最初の確認 | 次の操作 |
|---|---|---|
| Penpotプロジェクトを要求される | ダッシュボードにいるか | デザインを開き、キャンバスへSVGを挿入する |
| アイコンが1つのまとまりで選ばれる | 展開したLayersの項目 | グループ構成を変える前に子を選ぶ |
| Layersにはあるが図案が見えない | 表示、不透明度、塗り、ボードのクリッピング | 対照的な背景で、対象レイヤーと原版を照合する |
| 線や小さな点が消える | 選んだパスのストローク、幅、端の形 | 複製で目的の外観を戻して比較する |
| 色変更の影響が広すぎる | グループの選択か、結合された元の形状か | 目的の子を選ぶか、元の図案を分離する |
| 画像に編集可能な輪郭がない | 画像の塗りか埋め込みラスターか | 元のベクターを探す、描き直す、適したラスターをトレースする |
| ラベルは正しく見えるが文字入力できない | ネイティブのテキストレイヤーか | 文言を編集する必要があればテキストとして作り直す |
ストロークの欠落と見えない図案
削除する前に、選択レイヤーの塗りとストローク設定を確認します。Penpotには、ストロークの色、不透明度、幅、スタイル、表示、および開いたパスの端の設定があります。短い線は端の形で大きく見た目が変わるため、線がないと判断せず、形を比較します。色とストロークが利用できる設定を説明しています。
見えないオブジェクトでは、非表示のレイヤーとクリッピングも調べます。ブラウザーでは正しくてもPenpotで違う場合、元データのコピーで失敗する要素を切り分けます。簡略化したサンプルを書き出し直し、再度比較します。複数の設定を一度に変えるより、調査する具体的なファイルと症状を得られます。
古い回避策が勧めているからといって、すべてのstyle、マスク、定義を削除しないでください。外観の情報を持っている場合があります。元のストローク構成が問題なら、詳しいSVGストローク欠落の診断に従い、ストロークを塗りのある輪郭形状へ変換する前に編集可能な原版を残します。
正しく見えても編集できないテキスト
ボタンのラベルなら、1単語を変えてみます。ロゴなら、文字の形を保つだけで十分かを判断します。要件は異なります。
読み込んだ文字は、すでにアウトラインか、ネイティブのテキストレイヤーではなくSVG内容のままかもしれません。すべてのSVGテキスト要素が編集可能なPenpotテキストになると思わないでください。文言を定期的に変えるなら、Penpotのテキストツールで作り直し、目的のフォントを選び、字間と改行を比較します。テキストガイドはテキストレイヤーの作成と内容の編集を説明しています。
文字の形や折り返しが変わったら、SVGフォントのトラブル対処ガイドを使います。納品版にアウトライン化した文字が必要でも、編集可能なテキストのコピーを残します。
この手順でPerfectVectorが役立つ場合
ラスターのアイコンやイラストがあり、Penpotで編集可能な輪郭が必要ならPerfectVectorが役立ちます。PNGやJPGをSVGパスへ変換し、シルエットと色の領域を確認してから読み込み、塗り1つ・曲線1つの試験を行います。トレースは、使いたい図案に照らして判断する必要があります。
SVG内に配置したラスター画像は、コンテナーが変わっただけでは編集可能な葉や鉢の輪郭を得られません。Penpotの読み込みには別の画像処理があり、画像を読み込みコードの別の場所で扱うネイティブのパスへ変換しません。
元のベクター書き出しがあるなら使います。シンプルなUI記号は、Penpotの標準図形で描くほうが、トレースより意図的な形状を得られる場合があります。写真や質感の多い図案でピクセルがデザインの一部なら、画像として残します。画像ベクター化の解説は、復元できるものと変わるものを扱っています。
キットを作る前にサンプルを1つ書き出す
作業用デザインはPenpotに残し、別の納品用SVGを書き出します。アイコンかボードを選び、DesignパネルのExport項目のプラスボタンから書き出しプリセットを加え、SVGを選びます。レイヤーの書き出しに記載されています。
書き出したファイルをブラウザーで開きます。色、ストローク、文字の見た目、切り抜き、余白を基準と比較します。デザインエディターへ戻す必要があれば、別の場所へその出力を読み込み、編集試験を繰り返します。正しい見た目と役立つ編集構造には、それぞれ確認が必要です。
大きなキットに加える前に、次を確認します。
- 別々の色が必要な領域を独立して選べる。
- 変形したい輪郭に使える編集機能がある。
- 編集可能なラベルが作業用デザインでテキストとして残る。
- 書き出したアイコンに目的の境界範囲と余白がある。
- 実際のUIサイズでもアイコンが明確に見える。
その後、セット全体に同じ確認を適用します。PNGアイコンからSVGのUIキットを作る手順では、個々の読み込みが問題なくできた後の共通グリッド、視覚的なサイズ調整、命名規則を扱っています。
よくある質問
PenpotのImport filesがSVGを拒否するのはなぜですか？ そのダイアログはPenpotプロジェクト用です。SVG画像を配置するには、デザインファイルを開いて画像ツールを使うか、キャンバスへSVGをドラッグします。
SVGを読み込むとすべての部分が編集可能になりますか？ 一般的なベクター図形はネイティブのPenpotオブジェクトになれますが、他の内容はraw SVGや画像のままになる場合があります。再利用する前に、必要な塗り、曲線、文字の変更を試してください。
読み込んだSVGのグループを解除する必要がありますか？ グループ構成の変更が作業に役立つ場合だけです。まずLayersパネルで子を選んでみます。有用なグループを保っても、選択可能な子を編集できます。
読み込みが正しくないSVGをベクター化すべきですか？ 既存のベクター図案の修正・再書き出しから始めます。ベクター化はラスターしかなくパスが必要な場合に役立つもので、既存SVGの一般的な修正手順ではありません。
参考資料
- Penpot：レイヤー — 図案の挿入、子の選択、パスのノード編集。
- Penpot：Penpotファイルの書き出しと読み込み — キャンバスへの図案挿入とは別の、ネイティブプロジェクトの読み込み方法。
- Penpot：SVG図形の読み込み実装 — リリース版での、ネイティブ図形、画像、raw SVG内容の別々の扱い。
- Penpot：raw SVGのオプション — 外観設定だけではネイティブパスの編集可能性を証明できないこと。
- Penpot：色とストローク — 診断で使う塗り、ストローク、端の設定。
- Penpot：テキストと文字組み — ネイティブのテキストレイヤーの作成と内容の編集。
- Penpot：レイヤーの書き出し — レイヤーやボードへのSVG書き出しプリセットの追加。
元画像がPNGやJPGで編集可能な図形が必要なら、PerfectVectorでSVGを準備します。Penpotへ読み込み、塗りを1つ変え、曲線を1つ試してからデザインキットに採用してください。
