SVGとは何か
SVGはWeb上で表示可能な画像フォーマットのことです。SVGの特徴をチェックしましょう。
画像フォーマットのひとつ
SVGは画像フォーマットのひとつで、ベクターデータの一種です。画像のフォーマットには様々なものがあり、ビットマップとベクターデータの2つに大きく分類できます。
ビットマップがピクセル画素の集合体で表現されていることに対し、ベクターデータは数値データをもとにした計算式によって画像を描画していることが特徴です。
ビットマップ画像は画像を拡大すると粗く見えますが、ベクターデータ画像は拡大しても画像の質が変化しません。
拡大しても美しい画質を維持させたい時や、高画質ディスプレイに対応したWebページを作成したい時に積極的に活用すると良いでしょう。
SVGに向かない画像
どんなに拡大表示をしても画質が劣化しないSVGは、万能に感じられますが苦手な表現もあります。複雑な色合いを持つ写真の描画はできません。
SVGで複雑な画像を表現しようとすると計算に時間がかかり、データが重くなり過ぎてしまいます。動作が重くなり、まともに閲覧できないという事態に陥るでしょう。
たくさんの画素数を必要とする写真は、JPEGやBMPといったビットマップ画像を利用します。
SVGは色をたくさん使っている写真のような画像には向いていませんが、複雑過ぎないロゴやアイコンをWeb上で扱いたい時におすすめです。
SVGの利点
SVGにはビットマップ画像にはないメリットがいくつかあります。Webページを作成する際に押さえておきたい、SVGのメリットを学びましょう。
編集しやすい
SVGは画像でありながらhtmlやcssのように、テキストデータとして扱えることが特徴です。Web上で画像の大きさや見た目に変化をつけたい時、便利に使えるでしょう。
例えば、画像をリンクボタンとして設定する際、平常時のボタンとボタン上をカーソルがホバーした時・クリックした時の3つの画像を用意する必要があります。
JPEGやGIFのようなビットマップ画像を使う場合、画像に変化をつけたい時は画像編集ソフトで画像を再編集しなければなりません。しかし、SVGの場合はテキストデータを修正するだけで画像を編集できます。
アニメーションも可能
画像の乱れを気にせずに自在に縮小・拡大が可能なSVGは、アニメーションとの相性が良いこともメリットです。
SVGはcssやJavaScriptを使い、形・大きさ・色等に変化を加え、アニメーションさせられるため、動きのあるページを作りたい時に役立つでしょう。
アニメーションを作る際はたくさんの画像データの読み込みが必要ですが、SVGを利用すれば少ないデータ容量で滑らかにアニメーションさせられるところが魅力です。
ある情報を効果的に目立たせたい時に利用したり、ナビゲーションに利用したりと、様々な使い道があるのではないでしょうか。
SVGの画像をサイトで表示する方法
SVG画像をただ作成しただけでは、サイトに表示させることはできません。Webページに組み込んで、SVG画像をサイト上に表示する方法を紹介します。
img要素を使う
SVGフォーマットの画像をWeb上に表示させたい時は、他の画像データ同様htmlコードの記述が必要です。
SVGは他の画像データと同様『＜img src="image.svg"＞』というように、img要素として読み込めます。ただし、cssで装飾できないためSVGを使うメリットは減ってしまうでしょう。
img要素を使う他にも、background-imageとして画像を読み込んだり、object要素として読み込んだりできます。
SVGスプライト
1つのファイル内に違う種類のSVG画像を保存しておき、使用したい時に呼び出す手法のことをSVGスプライトと呼びます。
外部ファイルを呼び出して使う形式となるため、長いコードを記述したくない時やたくさんのアイコンを使いたい場合に便利です。
ファイルにはSVGタグやsymbollタグを記載し、symbollタグには座標位置やサイズを示すviewBox属性を定義しましょう。外部ファイルを呼び出し、classを与えればcssで装飾できます。
SVGの記述方法
Web上にSVGファイルを表示させる方法はいくつかあります。SVGを使いこなすために知っておきたい、記述方法をまとめました。
SVGタグで囲む
SVGはhtmlファイル上で、SVGタグを使って記述できます。
SVGタグはベクターデータを描画するために必要なタグです。試しに、SVGに対応した画像を作れる、illustratorのようなアプリケーションでSVGコードを書き出してみましょう。
『＜svg＞～＜/svg＞』で囲まれた部分をコピーし、貼り付ければ画像が表示されます。タグ内には、どのように描画するのかという命令が記載されていると考えると良いでしょう。
width、height
SVGタグにはwidthやheight属性があり、これらは画像を描くキャンバスや景色が見える窓の大きさに例えられます。
この2つの数値を使えば描画エリアの表示サイズの指定が可能です。widthが図形の横幅、heightが図形の高さと覚えておきましょう。例えば『＜svg width="50 height="100"＞』というように表せます。
viewBox属性
SVGを表示させるにはキャンバスの大きさを指定するだけでなく、座標を示す必要があります。図形の座標を決定するために使うものがviewBox属性です。描画エリア内の比率や相対的なサイズを表せます。
viewBox属性を指定することで、描画エリア内のどの位置に画像が表示されるかの決定が可能です。座標は『viewBox="x, y, width, height"』で表せます。
座標の指定次第で、画像を一部だけ表示したり大きく表示したりできるでしょう。
図形を描画するには
SVGはcssを使って図形の大きさだけでなく描画する図形の形状・塗りつぶしの色・ストロークの色などの指定が可能です。
通常、illustratorのようなアプリケーションでSVGコードを書き出すことが多いですが、簡単な図形をタグとして一から記述し描画することもできます。ここでは、タグを使って様々な図形を描画する方法を学びましょう。
丸や四角を描く
SVGで丸を描画するには、circleタグを使いましょう。タグ内の要素として描画位置や半径の大きさなどを指定できます。
cx,cyで中心点の座標を決定します。円の半径はrで指定するルールです。
四角を描きたい時はrectタグを使います。円と同様に各要素を指定でき、rx,rtで角丸の度合を決めることが可能です。
円や四角以外にもpolylineタグで折れ線を描画したり、polygonタグで多角形を描画したりできます。
色の指定
図形の形状だけでなく色を指定することもできます。塗りはfillにカラーコードを指定し、描画線はstrokeを使用しましょう。塗りや線を指定したくない時はnoneを入力します。
例えば、赤い描画線と青で塗りつぶされた半径100の丸を描きたい時の記述は『＜circle cx="100" cy="100" r="100" stroke-with=”1” stroke=”#FF0000” fill="#0000FF" /＞』です。
fill-opacityでカラーの透明度を指定することもできます。また、16進数のカラーコードでだけでなくredやblueといったカラーネームで色を指定することも可能です。
path要素とは
簡単な図形はタグで描画できますが、より複雑な図形を描画したい時にはpath要素を使います。illustratorやphotoshopなどで扱う、ベジェ曲線で作ったような曲線で表現された図形を描くことが可能です。
pathは直線コマンドと曲線コマンドの2つに分けられます。直線コマンドは2点を結ぶ直線を描きたい時に使用し、四角形を描く時に使用するrectタグを使わずにpathで表現することも可能です。
曲線コマンドは座標と制御点から成り立っています。傾斜が滑らかな曲線を描きたい時に利用しましょう。
illustratorを使ったSVG画像の作り方
illustratorはDTPやフライヤー制作などに利用されるソフトですが、SVG画像を作る際にも利用されることが多いアプリケーションです。
illustratorを使えば簡単にSVGフォーマットでの書き出しができますが、作成に際して注意点がいくつかあります。illustratorでSVG画像を作る際に注意したい点をチェックしましょう。
カラーモード
illustratorでSVG画像を作る前に確認したいものが、カラーモードの設定です。illustratorにはCMYKとRGBの2つのカラーモードがあります。CMYKは印刷物向けのカラーモードです。
illustratorは印刷物の制作用に作られたアプリケーションであるため、デフォルト設定のままだとCMYKになっています。Webで利用する画像を作るにはRGBのカラーモードで画像を制作しましょう。
ファイルを新規作成する際に、カラーモードを選択できます。また、ファイルを作成した後にカラーモードを変更したい場合、ファイルメニューの中にあるドキュメントのカラーモードから設定の変更ができます。
意外と変更を忘れやすい部分のため、注意しましょう。
書き出し
illustratorで作成したデータを保存時に、SVGフォーマットで保存できます。メニューのファイルから別名で保存もしくは複製して保存を選び、SVGフォーマットを選択しましょう。
その他にも、オブジェクトをアートボード化しアートボードごとに、メニューのファイルから書き出しを選び、スクリーン用に書き出しを選択することも可能です。
テキストはアウトライン化してから
SVGフォーマットで書き出せるデータは、パス化されているデータのみです。テキストをパスに変換するには、アウトライン化の作業をしましょう。
テキストを選択した状態で、書式からアウトラインの作成を選ぶだけでアウトライン化できます。アウトライン化した後はフォントを変更することはできないため、注意しましょう。
SVG オプションの設定
SVGのオプション設定にはフォントの設定外にも、スタイル・フォントの設定・画像・小数点以下の桁数等があります。
スタイルは内部cssに設定すると、後からスタイル変更が簡単です。
フォントはSVGのオプション設定で、アウトラインに変換またはテキストタグでの文字の設定を選べます。基本的にはアウトライン化してから書き出しをしましょう。
書き出し時に『アウトラインに変換』を選ぶと、万一フォントのアウトライン化を忘れてしまった部分があっても安心です。
画像はリンクを貼るか埋め込むかを選べますが、埋め込むとファイルサイズが大きくなるため注意しましょう。
小数点以下の桁数に入力する数字は、数を増やすほど複雑な図形を描画できますが、ファイルサイズが大きくなり扱いにくくなります。簡単な図形であれば1を設定すれば十分です。
SVGの書き出しが可能なツール
illustratorはデザインのプロが使用することが多いアプリケーションです。コストの問題から利用していない人も多いのではないでしょうか。
illustratorを使わずSVG画像を作ってみたい時におすすめしたい、2つのアプリケーションを紹介します。
Inkscape
Inkscapeはillustratorのようにベクターデータを扱うことができ、レイヤー機能やパスを操作する機能が搭載されているフリーソフトです。
illustrator形式で保存されたデータを開いて編集することもできます。SVGに書き出す際は、メニューのファイルから名前を付けて保存しSVGを選びましょう。
コミュニティやチュートリアルが充実しているため、初めてドローイングソフトを使う人でも挑戦しやすいです。
Sketch
Sketchはプロ仕様の画像編集ソフトです。ビットマップやベクターデータなど、幅広いファイルフォーマットに対応しています。わかりやすいインターフェースや、何百種類もあるプラグインが魅力です。
任意のレイヤーを選択し、エクスポートからSVGを選択すれば書き出せます。有料ソフトですが無料試用期間があるため、気軽に使い心地を試せるでしょう。
ファイル形式を変換する方法
ベクターデータを扱えるアプリケーションを使いSVGデータを1から作成しなくても、ファイルフォーマットを変換するツールを使えばSVGデータを利用できます。
画像のファイルフォーマットを、任意のフォーマットに変換できるツールをチェックしましょう。
Vector Magic
Vector Magicは画像を任意のフォーマットに変換できる海外製のツールです。難しい作業が必要なく、ビットマップデータを自動でSVGデータ化してくれます。
他のツールでは粗くなってしまいがちな部分を丁寧にトレースする機能を備えており、数秒で詳細にベクターデータ化されるところが魅力です。
使い心地を無料で試せる他、フルバージョンのオンライン有料版を月9.5$から利用できます。
出典：Vector Magic: JPG、PNG の画像を SVG、EPS、AI ベクターに変換
SVG to PNG
SVGファイルをPNGファイルに変換できる無料のツールです。変換したいファイルをブラウザ上にドラッグ&ドロップするだけで作業が完結します。
変換したデータは個別にダウンロードする他、zipファイルとしてまとめてダウンロードすることが可能です。
SVGファイルは多くのWebブラウザでサポートされていますが、すべてのWebサービスで利用できるわけではありません。SVG to PNGはSVGファイルがサポートされていないSNSに画像をアップロードしたい時、手軽に利用できます。
出典：SVG to PNG – SVGファイルをネット上でPNGに変換する
Convertio
Convertioは様々なファイルを任意のファイルに変換できるサービスです。ソフトをインストールする手間や難しい手順が必要なく、サイトにアクセスすれば簡単にファイルを変換できます。
変換したいファイルをドラッグ&ドロップし、任意のファイル形式を選ぶだけで変換が可能です。
画像ファイルの変換ができるだけでなく、動画やオーディオファイルのフォーマットを変換することも可能です。100MBまで無料で利用できます。有料版は24時間7.99$から用意されており、1GBまで使い放題です。
まとめ
SVGは画像をくっきりと表示できるため、Retina対応の高画質ディスプレイで画像を綺麗に表示させたい時に便利です。
画面を拡大して閲覧することが多いスマホとの相性が良く、ファイルサイズが軽量で済むところもSVGの魅力だといえるでしょう。
テキストデータ上で画像を後から編集したり、アニメーションさせたりすることもできるため、使い方が幅広いです。画像を劣化せずに表示させたい時や、動きのあるWebページ作りに役立ててはいかがでしょうか。
