今更・・・かもしれませんが、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ファイルを選択し［挿入］します。
アイコンをＷクリックしても挿入できます。
カーソルを置いた位置にアイコンが挿入されます。
ハンドルをドラッグして、画像のサイズや角度の変更ができます。
ハンドルは、イラストを選択している時に表示される□のマークです。
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は、画面を見ながらドラッグ操作で色の調整ができます。
