前置き

SVG 形式でこれを作ります。

---

本稿では、フリーで優れたオフィスソフトである LibreOffice(リブレオフィス) の「Draw(ドロー)」を使用し、SVG 形式で簡単なアイコン図形を作成します。
基本操作のサンプルなので単純な図形にしていますが、複雑な図形も描画できます。
LibreOffice をダウンロード・インストールしておいてください。
(デフォルトの拡張子が異なるので Microsoft Office と同居できます)

高機能グラフィックツール GIMP は SVG のエクスポートができるものの、
対象はパス情報 (経路情報) だけであり、色情報や塗りつぶし情報を付加することができません。
(ベクター型に見えるけど、GIMP はラスター型グラフィックエディタ)

ベクターグラフィックエディタの「Draw」は、色情報付きの図形を SVG フォーマットで出力することができます。

項目	内容	備考
基本ソフト	Windows11 Pro 23H2	-
アプリケーションソフト	LibreOffice 24.8.6.2	本稿記述時の最新安定版

1. LibreOffice の Draw を起動する。

LibreOffice を起動してから をクリックする。

⇒

2. 中が塗られた円を描く。

2-1. 楕円を使用して円を描画する。

メニューから「 楕円(P) 」を選択し、円を描画する。
描画中に キーを押すと真円を描ける。

⇒

2-2. 円を塗りつぶす。

塗りつぶしの「▼」をクリックすると色を選択できる。
色をクリックすると、選択中のオブジェクトが塗りつぶされる。

⇒

3. 中が塗られた文字列図形を作成する。

3-1. テキストボックスを使用して文字列を描画する。

図形オブジェクトをすべて非選択にして、メニューの「 テキストボックス(T) 」を選択する。
ここでは文字列「太陽」を作成している。

何かオブジェクトが選択されていると、そのオブジェクトに文字が入ってしまうので注意。
(オブジェクトの中に文字を書くのではなく「文字列オブジェクト」を作成する)

⇒

3-2. 文字列オブジェクトを図形変換する。

文字列オブジェクト全体を選択 (枠が表示される) し、
マウスの右クリックから「 変換(C) 」>「 曲線に変換(C) 」を選択する。
(オブジェクトとして選択しないと「変換(C)」が表示されない)

⇒

3-3. 文字列図形を塗りつぶす。

塗りつぶしの「▼」をクリックすると色を選択できる。
色をクリックすると、選択中のオブジェクト (上記 3-2 で変換した文字列図形) が塗りつぶされる。

⇒

4. 図形を重ね合わせる。

上記 2、3 で作成した円と文字列図形を重ね合わせる。

⇒

5. 図形をエクスポートする。

5-1. SVG にする図形を選択する。

SVG としてエクスポートする図形オブジェクトをすべてマウスで範囲選択し、
メニューから「 エクスポート(T)... 」を選択する。

⇒

5-2. エクスポートを実行する。

「エクスポート」の画面で、以下を記入・選択し ボタンをクリックする。

• ファイル名(N):
• ファイルの種類(T): SVG - スケーラブル ベクター グラフィックス (*.svg)
•  ☑  選択範囲(S)

 ⇓
 SVG ファイルが作成された。

 <img src="太陽.svg">
 を記述すれば HTML に埋め込むこともできる。