画像付きで解説！Illustratorで画像をトレースする方法！
susan すーさんのweblog
画像付きで解説！IllustratorでSVGを書き出してwebページで使う方法
susan
記事内に商品プロモーションを含む場合があります
SVGはScalable Vector Graphicsの略でその名の通りどんなに拡大しても画質が落ちない画像形式のことで、Web上での利用に特に適しています。
本記事では、Adobe Illustratorを使用してSVG画像を作成し、それをWebページで活用する方法を具体的に解説していきます。
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較
フリーランスデザイナー用のエージェントに関して知りたい方はフリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？で詳しく解説していますので、ぜひチェックしてみてください。
あわせて読みたい
フリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？
Contents
SVGとは
SVG（Scalable Vector Graphics）は、ベクター画像のためのXMLベースのフォーマットです。
“Scalable Vector Graphics”という名称が示すように、このフォーマットの最大の特性は“スケーラブル(拡張できること)”であることです。
これは、SVGフォーマットの画像がどれだけ拡大や縮小をしても、画質が劣化しないという特性を意味します。
一般的に画像は「ピクセル」と呼ばれる小さな点の集合体でできています。
しかし、SVGは「数学の式」を使って図形を描きます。
そのため、SVGの図形はどんなに大きくしても、その形と色は鮮明に保たれます。
これはWebデザインにおいて特に重要で、様々なサイズのスクリーンで最良の見た目を提供することを可能にしています。
Illustrator学習におすすめの書籍
Illustratorに関するおすすめの記事
SVGの使用例
SVGはその特性を活かして多様な用途で使用されています。
以下にいくつか具体的な使用例を挙げてみましょう。
使用例
- アイコン
- ロゴ
- インフォグラフィック
- インタラクティブな要素
- アニメーション
アイコン
SVGは線画アイコンやシンボルなどを作成するのに適しています。
色を変更したり、サイズを自由に変えたりすることができ、さらにCSSアニメーションを適用して動きをつけることも可能です。
ロゴ
ブランドのロゴをSVG形式で作成すると、さまざまなサイズやデバイスで鮮明に表示することができます。
これは特にレスポンシブデザインにおいて重要な要素です。
インフォグラフィック
SVGを使用すれば、複雑なグラフやチャート、マップなどのデータビジュアライゼーションを作成することが可能です。
これらはテキストベースなので、スクリーンリーダーによって読み取ることができ、アクセシビリティも高められます。
インタラクティブな要素
SVGとJavaScriptを組み合わせることで、ユーザーの操作に反応するインタラクティブな要素を作成することができます。
これにより、ウェブページに動きをつけてユーザーのエンゲージメントを高めることができます。
アニメーション
SVGにはアニメーションを追加する機能があり、それによりWebページを活発に見せることが可能です。
例えば、ローディング画面のアニメーションや、スクロールに合わせて動く背景などを作成することができます
SVGを使うメリット・デメリット
SVGを実際に使う前に、まずはSVGのメリット・デメリットを知っておきましょう。
SVGを使うメリット
メリット
- スケーラビリティ（拡大・縮小の自由度）
- ファイルサイズ
- 操作の自由度
- アクセシビリティ
スケーラビリティ（拡大・縮小の自由度）
SVGはベクターグラフィックス形式なので、どれだけ大きくまたは小さく表示しても、画質が一切劣化しないというメリットがあります。
これは、さまざまなデバイスや画面サイズに対応するWebデザインにとって、非常に大きな利点です。
ファイルサイズ
SVGはテキストベースの形式なので、一般的にビットマップ画像(png, jpg)よりもファイルサイズが小さくなります。
これはウェブページのロード時間を短縮し、ユーザー体験を改善する要素となります。
操作の自由度
SVGはCSSやJavaScriptと組み合わせて使用することが可能で、色の変更、アニメーションの追加、インタラクティブな要素の作成など、自由度が非常に高いです。
アクセシビリティ
SVGはテキストベースの形式であるため、スクリーンリーダーによって内容が読み上げられます。
これは、視覚障害を持つユーザーにとってアクセシブルなWebデザインを実現するために重要な要素です。
SVGを使うデメリット
デメリット
- 複雑なグラフィック
- ブラウザの互換性
- 学習曲線
複雑なグラフィック
SVGは基本的にシンプルな図形やアイコンなどに適していますが、写真や複雑なグラフィックには向いていません。
これらの内容を表現するには、JPEGやPNGといったビットマップ画像形式の方が適しています。
ブラウザの互換性
SVGはほとんどの現代ブラウザでサポートされていますが、古いブラウザ（特にInternet Explorer 8以下）では対応していません。
そのため、古いブラウザを使用するユーザーに対応するためには、フォールバックの解決策が必要となることもあります。
学習曲線
SVGは他の画像形式と比べてやや複雑で、特にアニメーションやインタラクティブな要素を作成する場合には、CSSやJavaScriptの知識が必要になります。
これは初心者にとっては少々ハードルが高いかもしれません。
SVGを書き出す前の注意点
SVGを書き出す前に何点か注意しておきたいことがあります。
注意点
- シンプルなデザイン
- 不要な情報の削除
- ブラウザ互換性
シンプルなデザイン
SVGは基本的にシンプルな図形や線画を描くのに最適です。
複雑なデザインやグラデーション、写真等の詳細な表現はSVGでは難しいです。
あまりにも複雑なデザインは、SVGのコードが肥大化し、ページの読み込み速度に影響を及ぼす可能性があります。
不要な情報の削除
Adobe Illustratorなどのベクター画像編集ソフトウェアからSVGを書き出すとき、ファイルには編集に使うためのメタデータや不要な情報が含まれることがあります。
これらはSVGファイルを不必要に大きくする原因となるため、ファイルを書き出した後は、不要な情報を削除するために「SVGO」などのツールを使うことをお勧めします。
SVGOの詳しい使い方はこちら。
ブラウザ互換性
SVGは大部分の現代ブラウザでサポートされていますが、すべてのブラウザが全てのSVG機能をサポートしているわけではありません。
特にアニメーションや特殊なエフェクトをSVGに含める場合は、各ブラウザで適切に表示されるかテストすることが重要です。
SVGを書き出す方法
それでは実際にIllustratorでSVGを書き出していく方法をご紹介していきます。
ステップ1: 画像の取り込み・作成
まず、Adobe Illustratorで図形を作成します。
作成するときには、前述の注意点を踏まえてシンプルなデザインにしましょう。
ステップ2: ファイルの保存
1. ファイル＞書き出し＞書き出し形式をクリック
2. 保存先を選び、ファイル形式をSVGにする。
3.書き出しをクリック
ステップ3: SVGオプションを設定する
「SVGオプション」ダイアログボックスが表示されます。
ここでは、基本的にデフォルトの設定で問題ありませんが、特定の要件がある場合は設定を調整します。
ない場合はステップ4に進んでください。
1. スタイル
ー内部CSS
SVG内部にスタイル形式でCSSを指定したい場合に選択します。
サンプル
1<div>インラインスタイル</div>
2<style>
3 div {
4 width: 50%
5 }
6</style>ーインラインスタイル
SVGにスタイル属性としてCSSを指定したい場合に選択します。
サンプル
1<div style="">インラインスタイル</div> ープレゼンテーション属性
SVGにプレゼンテーション属性として装飾したい場合に選択します。
サンプル
1<div width=”500” height=”250”>プレゼンテーション属性</div> フォント
ーSVG
フォントをそのままフォントとして認識し、webサイト等で画像ではなくフォントとして利用することができます。
webサイトで文字検索をした際にSVGとして書き出されてる場合は、文字として認識されているため、検索結果に引っかかります。
ーアウトラインに変換
フォントをベクター形式の画像として認識します。
フォントをベクター形式の画像として認識しているため、webサイトで文字検索をしても検索結果に引っかかることはありません。
画像
ー埋め込む
埋め込むを選択すると、画像自体がSVG内に取り込まれます。
ーリンク
リンクを選択すると、画像を外部ファイルからのリンクとしてSVG内に取り込みます。
オブジェクトID
オブジェクトIDでは、HTML内のIDを設定することができます。CSSやJavascriptで特定のHTML要素を指定する際のIDです。
ーレイヤー名
レイヤー名をそのままIDとして利用したい場合に選択します。
ー最小
最小値のIDを設定したい場合に選択します。最小値のIDのため、データサイズは少ないものの他のIDと被ってしまう可能性があるというデメリットがあります。
ー固有
他のIDと被らないよう、固有のIDをつけたい場合に選択します。固有のIDのため、どうしても長くなってしまうというデメリットがあります。
小数点以下の桁数
通常、ベストとされる値は2です。
数値が小さければ小さいほど、画質の正確さは欠けますが数値が大きければ大きいほど画質は向上します。
しかし、画質が上がるにつれてファイルサイズも上がってしまうので、全てを考慮した上で、2が最適な数字となっています。
縮小・レスポンシブ
縮小チェックボックスでは、画像を最小サイズに縮小するかどうかを決めることができます。基本的にはチェックを入れておきます。
レスポンシブにチェックを入れておくと、SVG自体には高さや幅は反映されません。
コードを表示
コードを表示ボタンをクリックすると、作成したSVGのコードを見ることができます。
ステップ4: OKをクリック
全ての設定が完了したらOKボタンをクリック。
すると、ステップ2で選んだ保存先にSVG形式の画像が保存されているはずです。
ここまでが、Illustratorで画像をSVG形式に保存するやり方です。次では、実際に保存したSVGをwebページに表示させる方法です。
SVGをwebページに表示させる方法
作成したSVGコードをwebページで表示させる方法には大きく分けて2通りあります。
方法1: SVGのコードを貼り付ける
まずは、SVGのコードを直接貼り付ける方法です。
SVGのアニメーションを作成する際、直接SVGの中身を要素ごとに動かしたい場合などに便利です。
方法2: SVGをimgタグで読み込む
コードの量が少なく済むため、アニメーションの利用がない場合はこちらの方法がベストです。
Illustrator学習におすすめの書籍
まとめ
本記事では、Adobe Illustratorを使ってSVGを書き出し、Webページで使う方法を解説しました。
SVGの特性とメリット・デメリット、書き出し前の注意点、そして具体的な書き出し方法について理解し、Webデザインの効率化と美化につなげていただけたらと思います。
Webデザインの勉強をしたい方はこちらの記事がおすすめ！
Webデザイナー用のエージェントをお探しの方はこちらの記事がおすすめ！
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
