今更・・・かもしれませんが、SVG形式の画像の存在を知りました。
SVGファイルは、拡大・縮小しても劣化しない高品質な画像ファイルです。
Webアイコンフォントで有名な Font Awesome では、あのアイコンをSVG形式でダウンロードできるようになっています。
てっきり、WebフォントはWeb上で使うためのものだと思っていましたが、印刷物を作る目的で使うこともできるんですね…。
それに、「アイコン」と聞くと「小さなイラスト」という感覚が染みついてましたが、拡大してもギザギザしないとなれば、むしろ印刷文書で活用したほうが良いのでは?
調べてみると、Microsoft では すでに Office2016以降からSVGに対応していました。
そこで、WordでのSVG対応がどうなっているのかを確認してみることにしました。
SVGとは
SVGとは、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略称です。
一般的に画像形式で有名なのはJPEG、GIF、PNGですが、新しい技術として登場したのがSVGです。
といっても最初に登場したのは2001年なので、実に今から20年前のこと。
画像形式にはそれぞれ、得意・不得意な表現があって、それゆえJPEGなら写真、GIFとPNGはイラストという棲み分けがされています。
どちらかというとSVGはイラスト画像の保存に向いた形式ですが、GIFやPNGがラスタ形式の画像であるのに対して、SVGはベクタ形式の画像である、というのが大きな違いです。
ベクタ形式の画像は拡大・縮小しても劣化しないことが最大の特徴ですが、反面、色や形が複雑な画像の表現は苦手です。
SVGのもう一つの特徴として、「SVGはマークアップ言語である」ということがあげられます。
ディスプレイに映し出される姿は画像ですが、そのファイルの実態はXML言語です。そのためHTMLと組み合わせて使うことに相性が良いのです。
参考に、Font Awesome のアイコン「hand-peace」をコード表示してみましょう。

このコードを読めるソフトを使えばアイコンとして表示されます。
hand-peace →
SVGが登場した頃は、ブラウザの主流だった Internet Explorer がSVGに未対応だったため、長らく不遇な時代を過ごし、広く普及することはありませんでした。
その後、IE9になって対応するようになったことや、世の中がスマホ全盛期となり、拡大・縮小に強いSVGの特徴はレスポンシブデザインに効力を発揮し、再注目されました。
実際にSVGファイルをダウンロードして、Word2016の文書作成画面で挿入してみました。
すると、文書の中にアイコンを表示することができました。

Wordに挿入されたSVGファイルは、Wordの機能を使ってサイズ、色などを変更することが可能です。
WordでSVG画像を利用する(for Windows)
マイクロソフトは、Microsoft Office 2016 以降はSVGに対応し、Word、Excel、PowerPointなどで使えます。
WordでSVGがどんな風に扱えるのかを試してみました。(word2016)
SVGファイルはFont Awesomeからダウンロードしました。
SVGファイルを文書に挿入する
Fong Awesome からダウンロードしたアイコンを、Word文書に挿入してみましょう。
手順
アイコンを挿入したい位置にカーソルを挿入します。
メニュー[挿入]→[図]→[このデバイス]の順に選択します。

ダウンロードしたSVGファイルを選択し[挿入]します。
アイコンをWクリックしても挿入できます。
カーソルを置いた位置にアイコンが挿入されます。
ハンドルをドラッグして、画像のサイズや角度の変更ができます。
ハンドルは、イラストを選択している時に表示される□のマークです。

画像の挿入元を選ぶときに[ストック画像]と[オンライン画像]があります。
それぞれの違いは次の通りです。
- ストック画像
- 使用料無料の画像、アイコン、イラストなどがストックされたもの。
- オンライン画像
- オンライン上の画像を検索して挿入できる。
Creative Commons
CCライセンスとはインターネット時代のための新しい著作権ルールで、作品を公開する作者が「この条件を守れば私の作品を自由に使って構いません。」という意思表示をするためのツールです。
詳細はコチラ をご覧ください。
SVG画像にスタイルを設定しよう!
文中に挿入した画像やアイコンをクリックすると[グラフィックス形式]メニューが表示されます。こちらのツールを使って画像のスタイルを設定します。

SVG画像の色を変えよう!
グラフィックツールを使うと、塗りつぶし、枠線、影などの効果を設定できます。


Word付属の[アイコン]を使おう!
Wordに用意されている[アイコン]画像を編集してSVG形式で保存すれば、ほかのファイルなどで再利用できます。
手順
アイコンを配置する位置にカーソルを置きます。
メニュー[挿入]→[アイコン]をクリックします。

アイコンを選択したら[挿入]をクリックします。


[アイコン]を編集しよう!
SVG画像同様に、[グラフィック形式]ツールを使ってスタイルを設定します。


アイコンを[図形に変換]しよう!

アイコンを[図形に変換]すると、パーツごとに選択できるようになり、そのひとつひとつにスタイルが設定できるようになります。
アイコンによっては分解できないものもあります。

[アイコン]をSVG形式で保存して再利用しよう!
Wordでは、画像ファイルを他のファイル形式に変換して保存できます。
この機能を使って[アイコン]をSVGファイルとして保存しておけば、別の文書を作成するときに再利用できて便利です。
図形に変換したアイコンは、すべてのパーツを選択してグループ化しておきましょう。
手順
対象のイラストを選択して右クリック→[図として保存]を選択します。
対象となる図形すべてを複数選択しておくか、グループ化して選択しましょう。

[ファイル名]に任意の名前を入力します。
[ファイルの種類]からSVGを選択します。

[保存]をクリックします。
[図形]を使って作成した画像をSVGに変換できる
Wordに挿入した写真やイラストは、[図として保存]を使うと異なる画像形式で保存できます。
変換可能な画像形式はPNG、JPEGなどがあり、その中にSVGが含まれています。
SVGは複雑な色や形を扱うことは苦手ですが、Wordの[図形]を組み合わせたイラストならシンプルな作りなので、SVG形式の保存にピッタリです。
再利用の可能性がある場合は保存して活用しましょう。
手順
Wordの[図形]を使って、イラストを作成します。

対象のイラストを選択して右クリック→[図として保存]を選択します。
対象となる図形すべてを複数選択しておくか、グループ化して選択しましょう。

[ファイル名]に任意のファイル名を入力します。
[ファイルの種類]でSVGを選択します。

[保存]をクリックします。
PNGをSVGに変換する無料ツール
Wordの[図として保存]を使うと、PNG画像からSVGに変換することも可能です。
ただ、元のイラストによっては変換時に減色されることがあり、期待した状態で保存されないことがあります。
PNGからSVGに変換する場合は、無料変換ツール【SVGcode】が便利です。
SVGcodeは、画面を見ながらドラッグ操作で色の調整ができます。