最近よく耳にするSVGファイルですが、SVGファイルとは何か？どうやって作成するのか？と疑問に思うことも多いはずです。今回はIllustrator（イラストレーター）を使ったSVGファイルの作成方法についてご紹介します。
目次
SVGファイルとは
SVGファイルとはスケーラブル・ベクター・グラフィックス（Scalable Vector Graphics）の略で、画像ファイル形式の1種となります。画像ファイル形式ですと、PNGやJPGなどの形式はよく耳にするのではないかと思います。
PNGとJPGはラスタ形式と言われ、グラデーションなど複雑な色合いを綺麗に出すことができます。ただし、拡大・縮小に向いておらず、画像が荒れてしまうなどデメリットがあります。
SVGはベクトル形式といわれるもので、拡大・縮小をしても荒れることはありません。ただし、ラスタ形式と違い複雑な色合いを出すことはできません。
SVGファイルの使用用途
Web制作で使用することが多いかと思われます。
例えば、アイコンをPNGではなく、SVGで表示をすると拡大しても荒れず、綺麗な状態で確認することができます。CSSなどで簡単に色や大きさも変えることができるので、編集作業などに無駄な手間がかかりません。Retineから見ても、ぼやけることがなく綺麗に表示されます。他にもCSSやjsを使ってアニメーションを作成することも可能です。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
IllustratorでSVGファイルを作成する方法
SVGファイルを作成するには様々なソフトがあります。今回は、Adobe Illustratorを使って作成していきます。
1 新規ドキュメントの作成
Illustratorを開いて、ファイル→新規作成から新規ドキュメントを作成します。Webデザインの場合、アイコンに使用することが多いと思いますので、正方形で作成します。
2 アートボードにイラストを作成する
作成したアートボードにSVGファイルにしたいデータをツールで作成します。
3 アウトラインの作成
データをアウトライン化します。オブジェクト→パス→パスのアウトラインでアウトラインを作成することができます。
テキストの場合は、書式→アウトラインを作成でアウトラインを作成出来ます。
4 アートボードのサイズを変更
作成したデータに合わせて、アートボードのサイズを変更します。
5 SVGファイルで保存する
保存をし、ファイル形式を選ぶ際にSVGを選択します。SVG（svg）とSVG圧縮（svgz）があります。SVG圧縮とはSVGより圧縮されたデータを保存することによってデータの容量を少なくすることができます。
6 完成
これでSVGファイルを作成することができました。
更に詳しいことはAdobe公式のヘルプページのSVG 形式で書き出す方法に書かれているので、確認してみてください。
SVGファイル作成の注意点
SVGファイルを作成する際にはいくつか注意点があります。
- ズレを無くす
作成したデータのオブジェクトの座標がズレていると、書き出した際にぼやける原因となります。ズレが無いか、小数点が含まれていないか、拡大をしたり数値を確認し、設定しましょう。 - アウトライン化を忘れない
レイヤーのアウトラインを忘れず、複雑すぎるパスは単純化します。複雑なパスデータはSVGファイルのデータ量が大きくなってしまいます。 - レイヤー名をわかりやすいものにする
レイヤー名がSVGのIDとなるため、コーディングがしやすいように分かりやすいものに設定しましょう。 - アートボードの余白はなくす
作成したデータのオブジェクトにしっかり合うようにアートボードを調整しましょう。調整しないと書き出しの際に余白にまで書き出してしまいます。
SVGを表示させる
Illustrator（イラストレーター）で作成した、SVGファイルをサイトに表示させましょう。表示方法は何パターンかあります。
- imgタグを使用する
HTMLにimgタグを使って表示させる方法です。手間もかからず一番簡単な方法となります。
<img src=”表示させたいSVG” alt=””>
上記のようにタグを入れるだけでSVGファイルを表示させることができます。 - コードを使用する
IllustratorでSVG形式で保存した際に、オプションで「SVGコード」というボタンがあります。クリックすると、コードが表示されます。これをHTMLに貼り付けることでSVGを表示させることができます。ただ、コードがかなり長いので、見にくいです。
他にもSVGスプライトというSVGをまとめて必要なものだけ表示させる方法など、ありますので、自分に合った表示方法を探してみてください。
IllustratorでSVGファイルを作成して効率化を
Illustrator（イラストレーター）を使用するメリットは、使用している人が多いソフトということが、一番大きいかと思われます。知らないソフトだと、まず使い方や機能を調べる作業、そもそも使い方が見つからないなど、手間がかかってしまいます。IllustratorでSVGファイルを作成して、効率よく作業を進めていきましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
