KeynoteでSVGを分割し、個別の図形を編集する

MacのKeynoteでSVGを選び、Format → Shapes and Lines → Break Apartを実行します。その後、アートワークの外をクリックし、編集したい部分を選びます。iPadではSVGを選び、Format → Arrange → Break Apartを使います。AppleはMacとiPadの両方の方法を説明しています。

葉の色を変える、アイコンの一部を削除する、スライド用にイラストを並べ替える場合に役立ちます。通常のPNGをベクター図形にするものではありません。まず、使えるSVGがすでにあるのか、その絵の画像だけなのかを判断します。

必要な編集に合う元データを選ぶ

ワークショップのスライド用の鉢植えのイラストを考えます。成長段階を示すため、葉を一枚外に動かし色を変えたいとします。三つのファイルで植物が同じに見えても、必要な方法は異なる場合があります。

中央のケースは見落としやすいものです。ベクターはきれいに拡大できても、認識できる部品ごとに整理されているとは限りません。つながった葉と茎は、別々に名前を付けられるだけで別のオブジェクトにはなりません。

.svgという拡張子も、すべてがパスである証拠にはなりません。W3CのSVG埋め込みコンテンツの規則が定めるとおり、image要素でラスターを埋め込めます。不確かな場合は、Keynoteのコマンドに時間を使う前に埋め込み画像の確認を行います。

SVGを挿入し、作業用コピーを分割する

別のスライドに未変更のコピーを保持し、作業版を変えた後の比較に使います。

Macでは実際のSVGをFinderからスライドにドラッグします。Appleの画像挿入ガイドは、SVGの追加とFinderからのドラッグに対応するとしています。Webプレビューのスクリーンショットではなく、ファイル自体を使います。

操作はプラットフォームで異なります。

これらはAppleの資料にあるSVGの手順です。Macのガイドは編集可能な部品の白いハンドル、iPadは青いハンドルを説明しています。実行後も植物全体が一緒に選ばれるなら、取り込み失敗と考える前に記載されたUngroupを試します。

この順序でBreak ApartとUngroupは役割が異なります。前者は対象のSVG画像から図形を取り出し、後者はグループに残ったオブジェクトを分けます。必要な領域を選べたら止めます。すべての部品をすべてのグループから外すと、単純なスライド編集が管理しにくくなる場合があります。

この手順はMacとiPadのアプリを対象にしています。Pages、Numbers、PowerPointのメニューを転用せず、端末に合うAppleのガイドを使います。Microsoftのアプリで編集するなら、別のPowerPointのSVGから図形への変換手順を使います。

葉の編集を小さな合格テストにする

全体を作り直す前に、複製したスライドで一つの変更を試します。植物の例なら次のとおりです。

1. 動かしたい葉だけを選びます。鉢や別の葉も選ばれるなら、グループが残っていないか調べます。
2. 葉を少し動かします。茎との接点に隙間がないか見て、構造確認後は移動を戻します。
3. 目的の色変更を葉に適用し、別の領域も変わっていないか確認します。
4. 発表時のサイズで見ます。技術的には編集できても、小さすぎて聴衆に役立たない細部もあります。

葉が独立して変わり、接続が意図どおりに見え、植物の残りが視覚的に一貫していることが終了の基準になります。自身のファイル用の推奨確認であり、すべてのSVGが同じ部品を提供するという主張ではありません。

葉を動かすと茎の欠けが現れるなら、接続を直すか元の配置を保つかを決めます。装飾の絵は一つの固定構図用に描かれていることがよくあります。部品を分けても、隠れた部分や描かれなかった部分は補われません。

続ける前に未変更のスライドと比較します。鉢の開口、重なった葉、細い茎、陰影を確認します。文字があればそれも調べます。図形の編集性とテキストの編集性は別の要件です。後で文言を変えるスライドラベルは、ネイティブのテキストボックスに保持します。

Break Apartが淡色、または表示されない場合

AppleのMacの手順では、淡色のBreak Apartは選択画像を分割できないことを意味します。iPadではその画像にコマンドが現れないと説明しています。現在の選択で操作できないことを示すだけで、どのファイルにも共通する特定の欠陥を示すものではありません。

次の順に確認します。

ファイル固有の問題なら、元のベクターエディターから葉と茎だけを書き出して内容を絞ったコピーを試します。そのコピーで分割できるなら他の部品を段階的に戻します。全体を何度も変えずに問題箇所を探せます。

灰色のコマンドを理由に既存のベクターを再トレースしないでください。復元の工程が増え、有用な形状を捨てる場合があります。グループ解除できないSVGのガイドは、グループ、パス、埋め込み画像の違いを説明しています。

PNGやJPGしかない場合

小さな幾何学的な植物なら、最初から鉢、茎、葉を別のネイティブ図形として描くのが最も簡単かもしれません。接続と動きを決められます。写真は、意図的に単純なベクターにしたいのでなければ、通常は写真のままスライドに置きます。

細かいラスターイラストを再利用するなら、Keynoteの前にPerfectVectorのクリップアートからSVGへのツールでパスを再構築できます。最も鮮明な元データから始め、葉の輪郭、細い茎、配色、不要な背景をプレビューで確認し、再構築が適していればダウンロードします。

Keynoteで開き、葉の合格テストを繰り返します。有用な結果は、スライド用に領域を選択、修正できるイラストです。ベクター化は元デザイナーのレイヤーや隠れた絵を復元せず、見えるすべての細部に別のKeynote図形を約束しません。正確な部品が必要なら、再インポート前にベクターエディターで構造を仕上げます。

後で修正できるよう、ラスターとSVGマスターはプレゼンテーションの外に保持します。この復元工程の広い説明は、画像ベクター化が変えるものを参照してください。

よくある質問

MacのKeynoteでSVGを分割するには？ 選択して画面上部のFormat → Shapes and Lines → Break Apartを実行します。外をクリックして必要な部品を選びます。グループが残るなら全体を選びArrange → Ungroupを使います。

iPadのKeynoteでもSVGを分割できますか？ はい。選択してFormatボタン、Arrange、Break Apartの順にタップします。外をタップして個別の図形を選びます。グループが残るなら全体を選びUngroupをタップします。

Break Apartが灰色なのはなぜですか？ AppleによるとMacで淡色なら選択画像は分割できません。ラスターのプレビューや別のオブジェクトではなく実際のSVGを選んだか確認します。すでに実行したなら、元データを変える前にグループとパス構造を調べます。

Break ApartはPNGをSVGに変換しますか？ 資料の手順はSVG画像から始まるもので、ラスタートレースではありません。PNGやJPGでは、元のベクターを得る、単純な部品をネイティブ図形で描く、適した絵を先にベクター化する方法を選びます。そのSVGがスライドに必要な部品を提供するか試します。

参考資料

1. Apple — MacのKeynoteで図形を結合、分割する — MacのSVGコマンド、部品の選択、任意のUngroup手順。
2. Apple — iPadのKeynoteで図形を結合、分割する — iPadの操作とコマンドを使えない場合の動作。
3. Apple — MacのKeynoteに画像を追加する — SVGの挿入とFinderからのドラッグ。
4. W3C — SVG 2の埋め込みコンテンツ — SVG内のラスター画像の定義。

---

ラスターのクリップアートだけですか。イラストからSVGを準備し、重要な領域を確認して、スライドの残りを調整する前にKeynoteで一つの独立した編集を試してください。