劣化しないSVG画像が手軽にWordで使える件

今更・・・かもしれませんが、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」をコード表示してみましょう。

SVGの実態

このコードを読めるソフトを使えばアイコンとして表示されます。

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クリックしても挿入できます。

カーソルを置いた位置にアイコンが挿入されます。

ハンドルをドラッグして、画像のサイズや角度の変更ができます。

ハンドルは、イラストを選択している時に表示される□のマークです。

WindowsのエクスプローラーはSVGのサムネイル表示ができません。
そのため、SVGに関連付けられた既定のプログラムアイコンで表示されます。

Chromeが既定のプログラムになっていると下のような表示になりますが、設定によっては別のアイコンで表示されることがあります。

画像の挿入元を選ぶときに[ストック画像]と[オンライン画像]があります。

それぞれの違いは次の通りです。

ストック画像
使用料無料の画像、アイコン、イラストなどがストックされたもの。
オンライン画像
オンライン上の画像を検索して挿入できる。

[オンライン画像]を使う場合は著作権に注意する必要があります。そのため、Creative Commonns」のチェックは外さずに使うようにします。

Creative Commons
CCライセンスとはインターネット時代のための新しい著作権ルールで、作品を公開する作者が「この条件を守れば私の作品を自由に使って構いません。」という意思表示をするためのツールです。

詳細はコチラ をご覧ください。

SVG画像にスタイルを設定しよう!

文中に挿入した画像やアイコンをクリックすると[グラフィックス形式]メニューが表示されます。こちらのツールを使って画像のスタイルを設定します。

SVG画像の色を変えよう!

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

Word付属の[アイコン]を使おう!

Wordに用意されている[アイコン]画像を編集してSVG形式で保存すれば、ほかのファイルなどで再利用できます。

手順

アイコンを配置する位置にカーソルを置きます。
メニュー[挿入]→[アイコン]をクリックします。
アイコンを選択したら[挿入]をクリックします。

[アイコン]を編集しよう!

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

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

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

アイコンによっては分解できないものもあります。

[アイコン]をSVG形式で保存して再利用しよう!

Wordでは、画像ファイルを他のファイル形式に変換して保存できます。

この機能を使って[アイコン]をSVGファイルとして保存しておけば、別の文書を作成するときに再利用できて便利です。

図形に変換したアイコンは、すべてのパーツを選択してグループ化しておきましょう。

手順

対象のイラストを選択して右クリック→[図として保存]を選択します。

対象となる図形すべてを複数選択しておくか、グループ化して選択しましょう。

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

無料年賀状素材【年賀状AC】

[図形]を使って作成した画像をSVGに変換できる

Wordに挿入した写真やイラストは、[図として保存]を使うと異なる画像形式で保存できます。

変換可能な画像形式はPNG、JPEGなどがあり、その中にSVGが含まれています。

SVGは複雑な色や形を扱うことは苦手ですが、Wordの[図形]を組み合わせたイラストならシンプルな作りなので、SVG形式の保存にピッタリです。

再利用の可能性がある場合は保存して活用しましょう。

手順

Wordの[図形]を使って、イラストを作成します。
対象のイラストを選択して右クリック→[図として保存]を選択します。

対象となる図形すべてを複数選択しておくか、グループ化して選択しましょう。

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

PNGをSVGに変換する無料ツール

Wordの[図として保存]を使うと、PNG画像からSVGに変換することも可能です。

ただ、元のイラストによっては変換時に減色されることがあり、期待した状態で保存されないことがあります。

PNGからSVGに変換する場合は、無料変換ツール【SVGcode】が便利です。

SVGcodeは、画面を見ながらドラッグ操作で色の調整ができます。

タイトルとURLをコピーしました