SVGファイルとは？
SVGファイルはHTMLファイル上で画質を劣化させることなく自在に拡大・縮小できる特徴があり、多くのWebコンテンツで採用されています。
SVGファイルの特徴や、使用の前に覚えておきたい注意点をチェックしましょう。
Webやアプリ制作に欠かせないファイル
SVGはWebコンテンツなどに使用される画像ファイル形式です。Web制作やアプリ制作などに使用されており、一度は目にしたことがあるでしょう。
SVGは2001年にW3Cが勧告し、Web制作の分野で使用されるようになりました。
当時はまだSVGに対応しているブラウザが少なかったため、一般に広く浸透しませんでしたが、現在は利用環境が整っていて、多くのWebコンテンツで利用されています。
JPEGやPNGなどとの違い
SVGがどんな画像フォーマットなのかを知るには、JPEGやPNGのような画像との違いを知りましょう。
JPEGやPNGは『ラスターデータ』に分類されます。ラスターデータはドット状のピクセルや画素が固まって一つの画像を表現しており、拡大すると粗くなることが特徴です。
一方、SVGは『ベクターデータ』に分類されます。点の座標で表現でき、数値のデータで構成されているため、画像を拡大・縮小しても画質を損ねません。また、テキストデータとして編集することもできます。
SVGファイル使用時の注意点
拡大しても美しい画質を維持できるSVGファイルは、使用上のメリットがあります。例えば、高画質ディスプレーに対応できる点や、JavaScriptと組み合わせてアニメーションさせられる点が魅力です。
しかし、どんな場合でも万能に使えるわけではなく、多くの色を必要とする写真などはSVGの利用に向いていません。
多くの色調を使用している風景写真を、ベクターデータで滑らかに表示させようとすれば、膨大なデータ量を必要としてしまいます。Web上で写真を表示させたい場合、ラスターデータを利用するのが普通です。
SVGファイルを作成、編集する方法
SVGファイルはテキストデータで構成されているため、HTMLファイルに直接コードを記述して画像を表示させられます。SVGファイルの作成方法や編集方法をチェックしましょう。
CSSを使って編集する
SVGはXMLがベースとなっており、HTMLファイル上で編集が可能です。ドローソフトを使わなくても、コードを記述して画像を表示させられます。
SVGを表示する方法はいくつかあり、SVGタグを使用し直接記述したりCSSで装飾したりできるため、ドローソフトを扱えなくても画像を作成できるところが魅力です。
対応するタグを入力すれば、円・四角形・多角形・折れ線といった多彩な図形を描けます。
図形の表示サイズ・塗り色・線の色・透明度などの要素を追加できる他、path要素を使えば滑らかな曲線を表現することもでき、自由な図形に編集可能です。
SVGエディターを利用する
Illustratorのようなプロ仕様のドローソフトは、ハードルが高いと感じる人も多いのではないでしょうか。デザイナーではない人におすすめな方法がSVGエディターの利用です。
初めてSVGを作成する場合、ドローソフトを扱う知識を持っていなくても操作しやすいSVGエディターを利用するといいでしょう。SVGエディターの中にはソフトをインストールしなくてもブラウザ上で作業を完結できるタイプのものもあります。
作業効率をアップするためにも、直感的に操作でき、データの書き出しからコードの編集まで可能なエディターの利用がおすすめです。
IllustratorでSVGファイルを扱う
のようなドローソフトでSVGファイルを作成すると、複雑な図形を簡単に作成できます。IllustratorでSVGファイルを作る方法を学びましょう。アイコンの作り方
Webページに掲載するアイコンを作る場合、カラーモードは『RGB』で新規ドキュメントを作成しましょう。
新規ドキュメント作成時に、作りたいアイコンのサイズでアートボードを作成します。アートボードの数は作りたいアイコンの数だけ指定しましょう。
SVGファイルとして書き出すにはオブジェクトをパス化する必要があるため、作成したアイコンはすべてアウトライン化します。
複雑な曲線を描く場合、不必要なパスのアンカーポイントができないように作成することが大事です。アンカーポイントが多い複雑な図形ほど、ファイルサイズは大きくなります。
また、複数のオブジェクトが混在している状態ではなく、パスを合体し複合シェイプとして1つのオブジェクトにするとファイルサイズを小さくできるでしょう。後からCSSで編集することを考え、色は1色にします。
SVG形式に書き出す方法
アイコン作成の完了後にメニューのファイルから『別名で保存』を選び、SVG形式で書き出します。ファイル形式をSVGに選択すると、オプションの設定が可能です。
SVGオプションにはいくつかの項目があります。CSSのスタイリング方法・フォントや画像の扱い・小数点の桁数などを変更可能です。
データにビットマップ画像が含まれる場合、画像を埋め込みにするか外部ファイルにリンクするかを選べます。ファイルサイズを抑えたい場合はリンクを選びましょう。
小数点の桁数を上げるとパスの精度がアップしますが、ファイルサイズが大きくなってしまうため、高い精度が求められる場合を除き、1～2を選べば十分です。
出典：SVGを書き出す | Adobe Illustrator チュートリアル
無料で使えるおすすめSVGエディター
フリーソフトとして提供されているSVGエディターの中には、無料で使えるにもかかわらず高いクオリティーを備えているものが少なくありません。
気軽にSVGファイルを作成したい人におすすめな、無料で使えるソフトを紹介します。
フリードローソフトのInkscape
Inkscapeはオープンソースのドローソフトとして開発されました。グラフィック制作を趣味にしているアマチュアからプロのデザイナーまで、さまざまなグラフィックデザインの現場で使用されています。
豊富な機能が魅力
丸や四角といった基本シェイプはもちろん、パスを使用した複雑なグラフィックも制作可能です。
Illustratorに匹敵する機能を備えており、ビットマップ画像のトレース機能やリアルタイムで反映されるXMLエディターも備えています。
図形を編集しながらXMLコードの変化を確認できるため、これからSVGを学ぼうと考えている人におすすめです。
ブラウザ上で使えるVectr
Vectrはオンライン上で使用できる無料のベクター画像編集ツールです。
シンプルかつ直感的に操作しやすいインターフェースを備えています。丁寧なチュートリアルがあるため、初めて使用する人でも簡単に操作できるでしょう。
オンラインでどこでも編集可能
Vectrのオンラインサイトにアクセスするだけで、編集作業を開始できます。ソフトのインストールやバージョンアップの手間がかかりません。
アカウント登録やログインする必要がなく、手軽にSVGファイルの作成ができます。動作も軽快なためストレスなく利用できるでしょう。
まとめ
SVGはCSSで装飾でき、テキストデータとして後から編集が容易にできるところが魅力です。
HTMLやCSSの基本を理解していれば、編集自体は決して難しくありません。色や表示サイズをCSSで変更できるため、複数の画像をフレキシブルに使いたい時に役立つでしょう。
また、無料のエディターやツールを利用すれば、高価なソフトを購入しなくても気軽にSVGファイルを作成できます。フリーソフトなどをうまく活用しつつ、SVGを取り入れたWebコンテンツ作りに挑戦してみてはいかがでしょうか。