今更・・・かもしれませんが、SVG形式の画像の存在を知りました。
Webアイコンフォントで有名なFont Awesomeは、SVGファイルのダウンロードができるようになっています。
アイコンフォントばWeb上での利用が中心かと思っていましたが、SVGファイルが使えるとなれば話は別です。SVGはベクター形式のイラストなので、むしろ印刷文書の作成場面で活用したいと思いました。
調べてみると、Microsoft では Office2016以降にSVGに対応しています。WordやExcelで使えるとなれば、印刷物に高解像度のイラストが使えて便利です。
そこで、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」をコード表示した場合がコチラです。
このコードを読めるソフトを使えばアイコンとして表示されます。
ただ、登場当時にブラウザの主流だったIEでは未対応の形式だったため、長らく不遇な時代を過ごし、広く普及することはありませんでした。
その後、IE9になって対応するようになったことやスマホ全盛期となり、拡大・縮小に強いSVGの特徴はレスポンシブデザインに効力を発揮し、再注目されるわけです。
次に、同じアイコンのSVGファイルをダウンロードして、Word2016の文書作成画面で挿入してみました。すると、文書の中にアイコンを表示することができました。
Wordに挿入されたSVGファイルは、Wordの機能を使ってサイズ、色などを変更することが可能です。
WordでSVG画像を利用してみよう（for Windows）
マイクロソフトでは、Microsoft Office 2016 以降はSVGに対応し、Word、Excel、PowerPointなどで使えます。
個人的に利用しているWord2016でSVGファイルにどんなスタイルを設定ができるのか、試してみました。その際、まずはSVGファイルが必要になります。
SVGファイルはFont Awesomeからダウンロードしました。
ダウンロードしたSVGファイルを文書に挿入する
Fong Awesome でダウンロードしたアイコンを、Word文書に挿入してみましょう。
アイコンを挿入したい位置にカーソルを挿入します。
メニュー［挿入］→［図］→［このデバイス］の順に選択します。
ダウンロードしたSVGファイルを選択し［挿入］します。
アイコンをＷクリックしても挿入できます。
WindowsのエクスプローラーはSVGのサムネイル表示ができません。
そのため、SVGに関連付けられた既定のプログラムアイコンで表示されます。
Chromeが既定のプログラムになっていると下のような表示になりますが、設定によっては別のアイコンで表示されることがあります。
カーソルを置いた位置にアイコンが挿入されます。
画像を選択していると表示されるハンドルをドラッグして、画像のサイズや角度の変更ができます。
画像の挿入元を選ぶときに［ストック画像］と［オンライン画像］があります。それぞれの違いは次の通りです。
- ストック画像
- 使用料無料の画像、アイコン、イラストなどがストックされたもの。
- オンライン画像
- オンライン上の画像を検索して挿入できる。
［オンライン画像］を使う場合は著作権に注意する必要があります。そのため、「Creative Commonns」のチェックは外さずに使うようにします。
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は、画面を見ながらドラッグ操作で色の調整ができます。
