LibreOffice DrawでSVG図形を編集し、確認しながら書き出す
LibreOffice DrawでSVGの図形や色を編集します。BreakとUngroupを使い分け、ODG原版を残し、別に書き出したSVGを共有前に確認する方法を紹介します。
目次
LibreOffice Drawに挿入したSVG内の図形を編集するには、画像を選び、Shape → Breakを使います。その後、外側をクリックして、変更したい部分を選びます。DrawのBreakの実装は、埋め込みのベクター画像を描画オブジェクトへ変換して扱います。そのため、Ungroupが使えなくても、挿入したSVGにBreakが必要な場合があります。
元のSVGを残して小さな編集を試し、作業用の図面をODGとして保存します。次のアプリケーション用には、別のSVGを書き出します。Scribusでページを組むなら、編集可能なSVG読み込みの手順に従い、ページを作る前に読み込んだ領域を1つ試します。この手順は、図形を調整したいバッジ、グラフ、図に適しています。大きな図面に取り組む前に、文字と見た目を確認してください。
Break、Ungroup、To Polygonの使い分け
選択枠が1つあることは、Drawが何を選んだかを示します。内容がグループ、読み込んだベクター画像、ピクセルのどれかは示しません。
| 選択しているもの | 適した次の操作 | 操作後に確認すること |
|---|---|---|
| ベクター図案を含む挿入済みSVG画像 | Shape → Break | 目的の部分を選択して色変更できるか |
| Drawオブジェクトのグループ | Enter Groupで中を編集するか、Ungroupで構成要素を分ける | 必要なオブジェクトがグループ内にあるか |
| PNG、JPG、その他のビットマップ | ベクター図形が必要な場合だけトレースする | シルエットと有用な細部が保たれたか |
| アウトライン化した文字 | 輪郭を編集するか、テキストボックスでラベルを置き換える | 編集可能な文言か、同じ外観だけが必要か |
LibreOfficeのグループの説明は、Enter GroupとUngroupを既存のグループに対する操作として説明しています。Enter Groupは、グループを保ちながら構成要素を編集します。Drawではグループのコンテキストメニューから使えます。
ビットマップのトレースは別の操作です。文書にある経路はShape → Convert → To Polygonです。SVG画像をBreakしても、内部に埋め込まれた画像から元のパスは復元できません。選択対象がまだ不明なら、より広いSVG選択の診断を使います。
小さく元に戻せる編集から始める
変更したい図案のコピーを使います。簡単な練習ファイルには、次のオリジナルの例をプレーンテキストエディターでbadge-source.svgとして保存します。円、三角形、短いバーがあるので、選ぶ部分が分かりやすくなっています。
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<circle cx="78" cy="72" r="40" fill="#167d8d" />
<path d="M150 32 L194 112 L106 112 Z" fill="#e76f51" />
<rect x="48" y="128" width="144" height="12" fill="#20354b" />
</svg>この練習用デザインで自分のDraw環境の手順を確認してから、実際の図案でも同じ確認を繰り返します。
新しい図面へSVGを挿入する
空のDrawドキュメントを開き、Insert → ImageからSVGを選びます。作業用コピーを埋め込むため、Insert as Linkはオフにします。Draw Guideの挿入手順は埋め込みとリンクを区別しています。埋め込み画像は図面の一部となり、リンク画像は元ファイルに依存します。
ブラウザーか別ウィンドウで原版を参照できるようにします。編集前に、欠けた図形、変わった間隔、意図しない背景を探します。すでに違って見えるなら、読み込みの問題として記録します。挿入時に存在した違いは、後の編集によるものではありません。
ここでの経路は標準メニューバーに従っています。LibreOfficeのタブ形式のインターフェースや古いバージョンでは、名称や場所が異なる場合があります。
画像をBreakして塗りを1つ試す
- 挿入した画像を選び、Shape → Breakを使います。
- ページの空白をクリックして選択を解除します。
- 練習バッジの三角形か、自分の図案の見分けられる領域を1つ選びます。
- サイドバーのProperties → Areaで塗りを変えます。
- 目的の領域だけが変わったことを確認します。残す必要がなければ試験用の色を元に戻します。
Draw入門ガイドは、オブジェクトの選択と領域の書式設定を扱っています。バッジ全体を動かせば配置できること、三角形だけの色を変えればその部分を編集できることが分かります。
複数の部分がまだ一緒に選ばれ、Enter Groupが使えるなら、グループに入って構成要素を選びます。グループをなくしたい場合にUngroupを使います。必要な部分へアクセスできたら、それ以上分解しません。
輪郭を1つ試してから文字を確認する
三角形を選び、Edit → Toggle Point Edit Modeを有効にします。現在のLibreOffice HelpにはF8もあります。古い説明ではPointsと呼ばれる場合があります。角を少し動かして結果を調べ、元に戻します。パソコン側がショートカットを処理する場合は、メニューを使います。
自分の図案では、実際に変える必要のある輪郭を選びます。選択枠のサイズを変えられることは、輪郭を編集できる証拠ではありません。
練習バッジに文字はありません。自分のSVGにあるなら、ラベルを別に試します。文字カーソルを置き、単語を置き換えられますか。パスとして描かれた文字には、編集可能な文言はありません。SVGはテキストと形状の両方に対応するため、同じ見た目のラベルでも編集動作が異なります。SVGテキスト仕様は、テキストを独自の内容形式として定義しています。
定期的に更新するラベルなら、ODG原版でネイティブのDrawテキストボックスへ置き換えることを検討します。読み込んだラベルを削除する前に、フォント、配置、改行を基準と比較します。
ODG原版を保存し、SVGは別に書き出す
File → Save Asで、badge-master.odgなどの作業用ファイルを残します。Drawは既定でODGとして保存します。納品ファイルには、完成した図案を選び、File → Exportで形式一覧からSVGを選びます。選択した図案だけが欲しい場合はSelectionを有効にします。Draw Guideはドキュメント全体と選択オブジェクトの書き出しを説明しています。ダイアログの見た目はOSと設定で変わります。
結果にbadge-edited.svgなど区別できる名前を付けます。その後の編集はODG原版で行い、再書き出しします。どのファイルが作業用図面かを識別できます。
共有前に、ブラウザーと使用先アプリケーションでSVGを開き直します。次を確認します。
- 練習バッジの短いバーを含め、目的の部分がある。
- 変えた塗りと輪郭が書き出し後も残る。
- 目的のサイズで文字、細いストローク、重なった図形が正しく見える。
- 意図したキャンバス範囲があり、誤って参照用コピーも書き出していない。
- 受け取り側に必要な追加編集が使用先でできる。
ブラウザー表示は見た目を確認します。同じファイルを使用先で開くことは、実際の受け渡しを確認します。書き出し後だけ違いが出たら、図案を作り直す前にODG原版へ戻り、書き出し設定と選択オブジェクトを比較します。
それでも部分を編集できない場合
**Breakが使えない。**テキスト編集中なら外側をクリックし、画像自体を選んで利用できるコマンドを調べます。すでに描画オブジェクトになっている、グループ内にいる、ビットマップである可能性があります。無効なコマンドだけで、ラスターと判断しないでください。
**同じ色が多数の部分に分かれている。**読み込んだ図案は、たまたま同色の複数領域を含む場合があります。必要な領域を意図的に色変更します。小さな編集に多数の断片の管理が必要なら、続ける前にSVGエディターで元のSVGを試します。SVG編集ガイドは、視覚的なエディターとマークアップ編集の選択に役立ちます。
**画像が画像のまま残る。**SVGはimage要素でラスター画像を含められます。Breakを実行しても、ピクセルは元のイラストレーターの図形になりません。SVGに埋め込みラスターがあるかを調べ、その部分にトレースが必要かを決めます。
元のSVG構造を保つ必要がある場合
特定のID、グループ、編集可能なテキスト、アニメーションに依存する仕事なら、元ファイルを残し、SVGエディターやコードで作業します。Drawオブジェクトへ変換すると、元のSVGとは異なるデータ表現で作業することになります。見た目の一致だけでは、元の詳細が残った証拠にはなりません。
PNGやJPGしかない場合
ピクセルでしかない図案の形や色を変えたい場合、ベクター化が適しています。画像から新しいパスを作るもので、作者の元ドキュメントを再構築するものではありません。画像ベクター化ガイドが、この違いを説明しています。
ビットマップにはDrawのTo Polygon変換を試し、生成された図形を確認できます。Drawが使用先の場合、PerfectVectorも別の方法を提供します。PNGやJPGをSVG図案へ変換し、シルエットと色の領域を確認して、Drawへ挿入します。その図案を使ってドキュメントの残りを作る前に、同じ塗り・輪郭の試験を行います。
配置や切り抜きだけが必要な写真は、ラスター画像のまま保ちます。選択だけが問題の既存ベクターなら、上のオブジェクト確認から始めます。
よくある質問
LibreOffice DrawでSVGのUngroupが無効なのはなぜですか？ 選択対象がDrawオブジェクトのグループではなく、読み込んだSVG画像かもしれません。コピーにShape → Breakを試し、選択を解除して個々の部分を選びます。Ungroupが無効なだけでは、内容がラスターとはいえません。
BreakでPNGは編集可能なベクター図形になりますか？ いいえ。ビットマップのトレースは別の操作です。Drawは、Shape → Convert → To Polygonでビットマップをベクター画像へ変換すると説明しています。使用前に結果を確認してください。
読み込んだSVGの文言を編集できないのはなぜですか？ 文字が編集可能なテキストではなく、アウトラインやラスターかもしれません。ラベルを別に試します。文言を変えたいなら、編集可能な元データを使うか、Drawのテキストボックスで置き換えて外観を確認します。
編集した図面はODGとSVGのどちらで保存すべきですか？ Drawでの追加編集用にODG原版を残し、共有や別アプリ用にSVGを別に書き出します。SVGを開き直し、見た目、境界範囲、受け取り側に必要な編集を確認します。
参考資料
- LibreOffice — Breakコマンドの実装 — Breakで埋め込みベクター画像を扱うリリース版のソース。
- LibreOffice — Draw Guide 26.2：画像の編集 — 埋め込み、リンク、ODG、選択オブジェクトの書き出し。
- LibreOffice — グループの操作 — Enter Group、Exit Group、Ungroupの動作。
- LibreOffice — ビットマップ画像をベクター画像へ変換 — Drawの独立したTo Polygonトレースの手順。
- LibreOffice — Draw入門 — 描画オブジェクトの選択、塗り、編集操作。
- LibreOffice — 点編集モードの切り替え — 現在の点編集コマンドとF8ショートカット。
- W3C — SVGテキスト — 形状の輪郭と異なるテキスト内容。
- W3C — SVGの埋め込み内容 — SVGドキュメント内のラスター画像。
PNGやJPGしかなく編集可能な輪郭が必要なら、PerfectVectorでSVGを準備します。図形を確認してDrawへ挿入し、塗りの編集1つと輪郭の編集1つを確かめてから完成した図案を書き出してください。
