[イラレ]IllustratorでSVGを書き出し,ウェブページで使う方法

あらすじ

画像の拡張子にはPNGやJPEGの他にSVGと呼ばれるものがありますが、今回はそのSVGをIllustratorから書き出して、ウェブページに挿入する方法をご紹介したいと思います。

これにはいくつか方法がありますが、今回は書き出しを使った方法で解説していきます。

SVGは非常に有能ですので、ぜひ取り出し方をマスターしてWebページで使いましょう。

完成時(SVG形式の画像を二枚挿入しました。)

イラストレーターをまだお持ちでない方はこちらからご購入いただけます。fa-arrow-circle-down

SVGとは

まずはSVGについて。

(すでにSVGについて知ってるよーって方は読み飛ばしてください。)

SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略です。

よく使われている画像型式でPNGとJPEGなどがありますが、これらとの違いにはどのようなものがあるのでしょうか。

それぞれ詳しく見ていきましょう。

合わせて読みたい

[イラレ]Illustratorの画像トレースのやり方を徹底解説

2021.2.5

あらすじ 皆さん、Adobeイラストレーターで画像トレースという超便利かつおしゃれな機能があるのをご存知でしたでしょうか。 この画像トレース機能というのはラスター画像をベクター画像に変更してくれる画期的な機能です。 Adobeイラストレーターには色々な便利な機能がたくさん揃っていますが、中でもこ...

SVGを使うタイミング

SVGは上で説明した通りベクター形式の画像ですので、ロゴやアイコンなど拡大縮小してもその画像クオリティが落ちない場合に使うのが理想的です。

アイコン

アイコン自体が元々小さいものなので、拡大時どうしても画質が荒れてしまうという欠点がありましたが、SVGを使えば解決ですね。

最近の無料アイコン素材サイトでは、アイコンをpngやjpg形式の他にsvg形式としてダウンロードすることができます。

ロゴ

ロゴはやはり会社の顔とも言える要素です。

ロゴ自体の画質が荒くなってしまったり、大きなロゴを必要とする場合などはSVGを利用するといいでしょう。

SVGのメリット・デメリット

SVGを使うメリットにはどのようなものがあるのでしょうか。

またデメリットについてもみていきたいと思います。

SVGを使うメリット

SVGを使うデメリット

書き出し型式でSVGを書き出す方法

それでは本題のSVGをエクスポートする方法をご紹介していきます。

ステップ1:画像の取り込み・作成

まずは画像を取り込むか、作成しましょう。

(自分で画像を作成してある場合はここのステップは読み飛ばしてください。)

ファイル＞開く

開く画像を選択し開くボタンをクリック

画像が取り込まれました。

ステップ2:書き出し型式を使って画像を書き出し

ファイル＞書き出し＞書き出し形式

保存先を選び、ファイル形式をSVGにする。

書き出しをクリック

ステップ3:オプション

ステップ2で書き出しボタンをクリックするとSVGオプションが表示されます。

スタイル

内部CSS

SVG内部にスタイル形式でCSSを指定したい場合に選択します。

<div>インラインスタイル</div> 

<style>div {width: 50%} </style>

インラインスタイル

SVGにスタイル属性としてCSSを指定したい場合に選択します。

<div style=””>インラインスタイル</div> 

プレゼンテーション属性

SVGにプレゼンテーション属性として装飾したい場合に選択します。

<div width=”500” height=”250”>プレゼンテーション属性</div> 

フォント

SVG

フォントをそのままフォントとして認識し、ウェブサイト等で画像ではなくフォントとして利用することができます。

ウェブサイトで文字検索をした際にSVGとして書き出されてる場合は、文字として認識されているため、検索結果に引っかかります。

アウトラインに変換

フォントをベクター形式の画像として認識します。

フォントをベクター形式の画像として認識しているため、ウェブサイトで文字検索をしても検索結果に引っかかることはありません。

画像

埋め込む

埋め込むを選択すると、画像自体がSVG内に取り込まれます。

リンク

リンクを選択すると、画像を外部ファイルからのリンクとしてSVG内に取り込みます。

オブジェクトID

オブジェクトIDでは、HTML内のIDを設定することができます。

CSSやJavascriptで特定のHTML要素を指定する際のIDです。

レイヤー名

レイヤー名をそのままIDとして利用したい場合に選択します。

個人的には一番オススメのオプションです。

最小

最小値のIDを設定したい場合に選択します。

最小値のIDのため、データサイズは少ないものの他のIDと被ってしまう可能性があるというデメリットがあります。

固有

他のIDと被らないよう、固有のIDをつけたい場合に選択します。

固有のIDのため、どうしても長くなってしまうというデメリットがあります。

小数点以下の桁数

通常、ベストとされる値は2となります。

数値が小さければ小さいほど、画質の正確さは欠けますが数値が大きければ大きいほど画質は向上します。

しかし、画質が上がるにつれてファイルサイズも上がってしまうので、全てを考慮した上で、2が最適な数字となっています。

縮小・レスポンシブ

縮小チェックボックスでは、画像を最小サイズに縮小するかどうかを決めることができます。

SVGはウェブ用ですので、基本的にはチェックを入れておきます。

一見ややこしいですが、レスポンシブチェックボックスをオフにすることでSVG自体の高さや幅を設定することができます。

チェックボックスをオンにすると、SVG自体には高さや幅は反映されません。

コードを表示

コードを表示ボタンをクリックすると、作成したSVGのコードを見ることができます。

ステップ4:OKをクリック

全ての設定が完了したらOKボタンをクリック。

すると、ステップ2で選んだ保存先にSVG形式の画像が保存されているはずです。

確認してみましょう。

ステップ5:テキストエディタに貼り付け

作成したSVGコードをテキストエディタで表示させる方法には2通りあります。

ステップ：３のコードを表示ボタンをクリックし、表示されたSVGのコードをコピーしてそれをそのままテキストエディタに貼り付ける方法と、保存したSVGファイルをダブルクリックすることで、SVGのコードをそのままテキストエディタで表示させる方法の2つです。

こちらは好みの問題ですのでどちらかの方法を選んでもらい、テキストエディタでSVGのコードを表示させましょう。

ステップ6:Webページで表示

ステップ5でSVGコードをテキストエディタで表示させたら、次はそのファイルをhtml形式で保存します。

もしくはすでにhtmlファイルを作成済みで、SVG画像だけを取り込みたい場合は、SVGタグで囲まれた部分をすべてコピーし、作成済みhtmlファイルにペーストします。

あとはブラウザで表示するだけです。

まとめ

いかがだったでしょうか。

想像していたよりは簡単だったのではないでしょうか。

自分もSVGのSの字も知りませんでしたが、使い方がわかった今、非常に便利であることを確信しています。

SVGは今後間違いなくもっと普及していく画像形式だと思いますので、ぜひここでマスターしてみてください。