画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_675/https://susanweblog.com/wp-content/uploads/2023/06/Web-1920-–-33.png)
SVGはScalable Vector Graphicsの略でその名の通りどんなに拡大しても画質が落ちない画像形式のことで、Web上での利用に特に適しています。
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
本記事では、Adobe Illustratorを使用してSVG画像を作成し、それをWebページで活用する方法を具体的に解説していきます。
デジタルハリウッド STUDIO by LIG
![公式サイト 公式サイト](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_567/https://susanweblog.com/wp-content/uploads/2023/08/Screenshot-2023-07-31-at-12.40.57-pm-1-1024x567.webp)
実績あるカリキュラムをベースにこれまで9万人以上のクリエイターを輩出。料金→安、授業クオリティ→高。
入学金 | 0円 |
料金 | 165,000円(税込)〜 |
学び方 | 通学とオンライン |
校舎 | 上野校、池袋校、大宮校、北千住校、川崎校、町田校他 |
就職サポート | ○ |
運営会社 | 株式会社LIG |
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
![【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較 【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/08/a47dd22e0a1ac2a90cbe350755d1536c-320x180.webp)
レバテッククリエイター
![公式サイト 公式サイト](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_561/https://susanweblog.com/wp-content/uploads/2023/12/Screenshot-2023-07-20-at-1.55.09-am-2048x1121-1-1024x561.webp)
Webやゲーム業界のフリーランスクリエイター向けのエージェントサービス。案件マッチングから単価交渉、契約代行までを一貫してサポート。
案件数 | デザイナー用案件数:1,000以上 |
リモート案件 | ◎ |
勤務日数 | 週3日〜 |
高単価 | ~1,400,000円/月 |
地域 | 東京 |
運営会社 | レバテック株式会社 |
フリーランスデザイナー用のエージェントに関して知りたい方はフリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ?で詳しく解説していますので、ぜひチェックしてみてください。
![フリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ? フリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ?](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/12/6c37732fd647ae4a005c408faf9f9051-320x180.webp)
SVGとは
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_896,h_512/https://susanweblog.com/wp-content/uploads/2023/12/48d513822ac6d44b8f204b3a36380b98.webp)
SVG(Scalable Vector Graphics)は、ベクター画像のためのXMLベースのフォーマットです。
“Scalable Vector Graphics”という名称が示すように、このフォーマットの最大の特性は“スケーラブル(拡張できること)”であることです。
これは、SVGフォーマットの画像がどれだけ拡大や縮小をしても、画質が劣化しないという特性を意味します。
一般的に画像は「ピクセル」と呼ばれる小さな点の集合体でできています。
しかし、SVGは「数学の式」を使って図形を描きます。
そのため、SVGの図形はどんなに大きくしても、その形と色は鮮明に保たれます。
これはWebデザインにおいて特に重要で、様々なサイズのスクリーンで最良の見た目を提供することを可能にしています。
SVGの使用例
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_768/https://susanweblog.com/wp-content/uploads/2023/06/alexander-shatov-w-qqwn5O-4I-unsplash-1024x768.jpg)
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を書き出す前の注意点
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_683/https://susanweblog.com/wp-content/uploads/2023/06/markus-spiske-VO5w2Ida70s-unsplash-1024x683.jpg)
SVGを書き出す前に何点か注意しておきたいことがあります。
- シンプルなデザイン
- 不要な情報の削除
- ブラウザ互換性
シンプルなデザイン
SVGは基本的にシンプルな図形や線画を描くのに最適です。
複雑なデザインやグラデーション、写真等の詳細な表現はSVGでは難しいです。
あまりにも複雑なデザインは、SVGのコードが肥大化し、ページの読み込み速度に影響を及ぼす可能性があります。
不要な情報の削除
Adobe Illustratorなどのベクター画像編集ソフトウェアからSVGを書き出すとき、ファイルには編集に使うためのメタデータや不要な情報が含まれることがあります。
これらはSVGファイルを不必要に大きくする原因となるため、ファイルを書き出した後は、不要な情報を削除するために「SVGO」などのツールを使うことをお勧めします。
SVGOの詳しい使い方はこちら。
ブラウザ互換性
SVGは大部分の現代ブラウザでサポートされていますが、すべてのブラウザが全てのSVG機能をサポートしているわけではありません。
特にアニメーションや特殊なエフェクトをSVGに含める場合は、各ブラウザで適切に表示されるかテストすることが重要です。
SVGを書き出す方法
それでは実際にIllustratorでSVGを書き出していく方法をご紹介していきます。
ステップ1: 画像の取り込み・作成
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_591/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-3.44.50-pm-1024x591.png)
まず、Adobe Illustratorで図形を作成します。
作成するときには、前述の注意点を踏まえてシンプルなデザインにしましょう。
ステップ2: ファイルの保存
1. ファイル>書き出し>書き出し形式をクリック
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_266,h_300/http://susanweblog.com/wp-content/uploads/2023/06/7__@__Attachment-3.png)
2. 保存先を選び、ファイル形式をSVGにする。
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_620/http://susanweblog.com/wp-content/uploads/2023/06/8__@__Attachment-3.png)
3.書き出しをクリック
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_597/http://susanweblog.com/wp-content/uploads/2023/06/9__@__Attachment-3.png)
ステップ3: SVGオプションを設定する
「SVGオプション」ダイアログボックスが表示されます。
ここでは、基本的にデフォルトの設定で問題ありませんが、特定の要件がある場合は設定を調整します。
ない場合はステップ4に進んでください。
1. スタイル
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300,h_236/http://susanweblog.com/wp-content/uploads/2023/06/10__@__Attachment-3.png)
ー内部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>
フォント
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300,h_236/http://susanweblog.com/wp-content/uploads/2023/06/11__@__Attachment-2.png)
ーSVG
フォントをそのままフォントとして認識し、webサイト等で画像ではなくフォントとして利用することができます。
webサイトで文字検索をした際にSVGとして書き出されてる場合は、文字として認識されているため、検索結果に引っかかります。
ーアウトラインに変換
フォントをベクター形式の画像として認識します。
フォントをベクター形式の画像として認識しているため、webサイトで文字検索をしても検索結果に引っかかることはありません。
画像
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300,h_238/http://susanweblog.com/wp-content/uploads/2023/06/12__@__Attachment-2.png)
ー埋め込む
埋め込むを選択すると、画像自体がSVG内に取り込まれます。
ーリンク
リンクを選択すると、画像を外部ファイルからのリンクとしてSVG内に取り込みます。
オブジェクトID
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300,h_239/http://susanweblog.com/wp-content/uploads/2023/06/13__@__Attachment-1.png)
オブジェクトIDでは、HTML内のIDを設定することができます。CSSやJavascriptで特定のHTML要素を指定する際のIDです。
ーレイヤー名
レイヤー名をそのままIDとして利用したい場合に選択します。
ー最小
最小値のIDを設定したい場合に選択します。最小値のIDのため、データサイズは少ないものの他のIDと被ってしまう可能性があるというデメリットがあります。
ー固有
他のIDと被らないよう、固有のIDをつけたい場合に選択します。固有のIDのため、どうしても長くなってしまうというデメリットがあります。
小数点以下の桁数
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300,h_240/http://susanweblog.com/wp-content/uploads/2023/06/14__@__Attachment.png)
通常、ベストとされる値は2です。
数値が小さければ小さいほど、画質の正確さは欠けますが数値が大きければ大きいほど画質は向上します。
しかし、画質が上がるにつれてファイルサイズも上がってしまうので、全てを考慮した上で、2が最適な数字となっています。
縮小・レスポンシブ
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300,h_240/http://susanweblog.com/wp-content/uploads/2023/06/15__@__Attachment.png)
縮小チェックボックスでは、画像を最小サイズに縮小するかどうかを決めることができます。基本的にはチェックを入れておきます。
レスポンシブにチェックを入れておくと、SVG自体には高さや幅は反映されません。
コードを表示
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_684/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-4.12.06-pm-1024x684.png)
コードを表示ボタンをクリックすると、作成したSVGのコードを見ることができます。
ステップ4: OKをクリック
全ての設定が完了したらOKボタンをクリック。
すると、ステップ2で選んだ保存先にSVG形式の画像が保存されているはずです。
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_270,h_286/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-4.14.42-pm.png)
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
ここまでが、Illustratorで画像をSVG形式に保存するやり方です。次では、実際に保存したSVGをwebページに表示させる方法です。
SVGをwebページに表示させる方法
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_776/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-4.34.08-pm-1024x776.png)
作成したSVGコードをwebページで表示させる方法には大きく分けて2通りあります。
方法1: SVGのコードを貼り付ける
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_265/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-4.33.02-pm-1024x265.png)
まずは、SVGのコードを直接貼り付ける方法です。
SVGのアニメーションを作成する際、直接SVGの中身を要素ごとに動かしたい場合などに便利です。
方法2: SVGをimgタグで読み込む
![画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法 webdesign, photoshop-illustrator - 画像付きで解説!IllustratorでSVGを書き出してwebページで使う方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_692,h_256/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-4.28.22-pm.png)
コードの量が少なく済むため、アニメーションの利用がない場合はこちらの方法がベストです。
まとめ
本記事では、Adobe Illustratorを使ってSVGを書き出し、Webページで使う方法を解説しました。
SVGの特性とメリット・デメリット、書き出し前の注意点、そして具体的な書き出し方法について理解し、Webデザインの効率化と美化につなげていただけたらと思います。