イラストレーターを使ってSVGを作成しよう!

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

イラストレーターを使ってSVGを作成しよう!

最近よく耳にするSVGファイルですが、SVGファイルとは何か?どうやって作成するのか?と疑問に思うことも多いはずです。今回はIllustrator(イラストレーター)を使ったSVGファイルの作成方法についてご紹介します。

SVGファイルとは

SVGファイルとは

SVGファイルとはスケーラブル・ベクター・グラフィックス(Scalable Vector Graphics)の略で、画像ファイル形式の1種となります。画像ファイル形式ですと、PNGやJPGなどの形式はよく耳にするのではないかと思います。

PNGとJPGはラスタ形式と言われ、グラデーションなど複雑な色合いを綺麗に出すことができます。ただし、拡大・縮小に向いておらず、画像が荒れてしまうなどデメリットがあります。

SVGはベクトル形式といわれるもので、拡大・縮小をしても荒れることはありません。ただし、ラスタ形式と違い複雑な色合いを出すことはできません。

 

SVGファイルの使用用途

Web制作で使用することが多いかと思われます。

例えば、アイコンをPNGではなく、SVGで表示をすると拡大しても荒れず、綺麗な状態で確認することができます。CSSなどで簡単に色や大きさも変えることができるので、編集作業などに無駄な手間がかかりません。Retineから見ても、ぼやけることがなく綺麗に表示されます。他にもCSSやjsを使ってアニメーションを作成することも可能です。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

IllustratorでSVGファイルを作成する方法

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を表示させる

SVGを表示させる

Illustrator(イラストレーター)で作成した、SVGファイルをサイトに表示させましょう。表示方法は何パターンかあります。

  • imgタグを使用する
    HTMLにimgタグを使って表示させる方法です。手間もかからず一番簡単な方法となります。
    <img src="表示させたいSVG" alt="">
    上記のようにタグを入れるだけでSVGファイルを表示させることができます。
  • コードを使用する
    IllustratorでSVG形式で保存した際に、オプションで「SVGコード」というボタンがあります。クリックすると、コードが表示されます。これをHTMLに貼り付けることでSVGを表示させることができます。ただ、コードがかなり長いので、見にくいです。

他にもSVGスプライトというSVGをまとめて必要なものだけ表示させる方法など、ありますので、自分に合った表示方法を探してみてください。

IllustratorでSVGファイルを作成して効率化を

IllustratorでSVGファイルを作成して効率化を

Illustrator(イラストレーター)を使用するメリットは、使用している人が多いソフトということが、一番大きいかと思われます。知らないソフトだと、まず使い方や機能を調べる作業、そもそも使い方が見つからないなど、手間がかかってしまいます。IllustratorでSVGファイルを作成して、効率よく作業を進めていきましょう。

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree