HOME > コラム > WEB全般 > Illustrator(イラストレーター)を使ってSVG画像を作成

Illustrator(イラストレーター)を使ってSVG画像を作成

コラム

adobeのIllustratorを使ってSVG画像を作成する方法を紹介致します。
当サイト内のロゴに関してはこのSVG画像で出力していまして、SVGコードで表示しています。
スマホから見ても綺麗に表示されているかと思います。
画像のサイズを変更しても画質が劣化しにくいなどのメリットがあり、やってみるとどんどん活用したくなるのがSVG画像です・・・と思います(笑)
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

Illustrator(イラストレーター)を使ってSVG画像を作成

SVGコードイメージ

今回はadobeのIllustratorを使ったSVG画像の作り方を紹介致します。
作り方と言っても普通の画像を制作する時と何ら変わりはありませんでして、書き出し方に違いがある・・・という程度のことです。

フォトログ(?)のような感じで画像で説明を流そうと思います。
もし、この作業だけでは完成しないという時は各種SNSやメールにてご指摘頂きますようお願い致します。

当方の作業環境とSVG画像の見本
本件の作業環境

だいたい以下の感じです。
この程度の作業の時はあまり作業環境は意識してないんですが、必要な情報が抜けてたらご指摘をお願い致します。

  • MacBook Pro
  • OS X EI Capitan 10.11.3
  • CS6 Illustrator
SVGコードによる出力の見本

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="309px" height="199px" viewBox="0 0 309 199" enable-background="new 0 0 309 199" xml:space="preserve">
<rect x="4" y="4" fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" width="301" height="191" />
<g>
<path d="M35.521,83.432c-0.726-0.462-2.31-1.155-4.422-1.155c-3.499,0-4.819,2.145-4.819,3.96c0,2.475,1.518,3.729,4.885,5.148c4.06,1.716,6.139,3.796,6.139,7.393c0,3.994-2.904,7.063-8.317,7.063c-2.277,0-4.753-0.693-6.007-1.584l0.759-2.277c1.354,0.891,3.367,1.551,5.413,1.551c3.366,0,5.347-1.815,5.347-4.521c0-2.476-1.353-3.994-4.621-5.314c-3.795-1.419-6.37-3.63-6.37-7.096c0-3.828,3.103-6.634,7.69-6.634c2.376,0,4.191,0.594,5.148,1.188L35.521,83.432z" />
<path d="M58.556,80.33l-8.647,25.149h-2.904L39.05,80.363h2.97l3.862,12.608c1.056,3.399,1.98,6.568,2.64,9.505h0.099c0.66-2.938,1.683-6.205,2.806-9.505l4.191-12.641H58.556z" />
<path d="M79.213,104.457c-1.353,0.528-3.994,1.287-7.162,1.287c-9.869,0-12.212-7.36-12.212-12.674c0-7.657,4.984-12.971,12.872-12.971c2.409,0,4.555,0.462,5.809,1.056l-0.726,2.277c-1.221-0.561-2.805-1.023-5.148-1.023c-5.941,0-9.935,3.829-9.935,10.496c0,6.799,3.795,10.594,9.539,10.594c2.112,0,3.531-0.33,4.257-0.726V94.72h-5.083v-2.211h7.789V104.457z" />
<path d="M107.922,83.63c-0.132,0.297-0.396,0.528-0.825,0.528c-1.188,10.265-4.621,19.209-10.099,19.209c-2.772,0-5.281-2.772-5.281-7.987c0-7.921,6.172-14.555,14.852-14.555c9.539,0,13.664,6.04,13.664,12.476c0,7.855-4.555,11.65-12.542,13.499c-0.297-0.528-0.858-1.419-1.386-2.013c7.591-1.453,11.486-5.149,11.486-11.387c0-5.446-3.499-10.396-11.222-10.396c-0.33,0-0.693,0.033-0.99,0.066L107.922,83.63z M104.754,83.201c-6.667,0.825-10.792,6.337-10.792,12.113c0,3.532,1.518,5.743,3.103,5.743C101.058,101.057,103.929,92.245,104.754,83.201z" />
<path d="M152.31,91.519h-11.156l0.562,0.165c-0.066,0.198-0.297,0.363-0.66,0.396c-0.892,6.139-3.136,11.618-10.198,15.083c-0.396-0.429-1.222-1.221-1.783-1.65c6.865-3.301,8.78-7.921,9.539-13.994h-12.839v-2.211h26.536V91.519z M149.042,82.211h-20.265V80h20.265V82.211z" />
<path d="M180.92,81.947c-0.066,0.165-0.231,0.297-0.43,0.363c-1.782,4.192-3.895,7.822-6.601,11.354c3.598,2.872,9.01,7.79,12.08,11.189l-2.014,1.749c-2.904-3.366-8.219-8.383-11.585-11.089c-2.904,3.531-7.921,8.35-12.707,11.089c-0.362-0.495-1.154-1.32-1.716-1.782c9.143-5.017,16.37-14.39,19.341-21.552h-16.205v-2.244h17.492l0.429-0.165L180.92,81.947z" />
<path d="M214.315,96.106c-3.366-1.815-7.987-3.96-11.585-5.379v16.502h-2.475V78.548l3.333,0.198c-0.033,0.363-0.297,0.594-0.858,0.693v9.637l0.495-0.693c3.862,1.419,8.978,3.697,12.41,5.512L214.315,96.106z" />
<path d="M224.212,82.079c2.476-0.099,22.807-1.551,27.098-1.584l0.032,2.475c-0.429-0.033-0.825-0.033-1.221-0.033c-1.914,0-3.531,0.33-5.644,1.684c-4.951,2.97-9.736,8.284-9.736,12.542c0,4.621,3.234,7.36,11.419,8.417l-1.089,2.31c-9.373-1.353-12.872-4.852-12.872-10.727c0-4.653,4.588-10.297,10.628-14.093c-3.631,0.264-13.367,0.99-17.625,1.386c-0.099,0.264-0.462,0.495-0.726,0.528L224.212,82.079z M245.6,88.581c1.584,1.188,3.465,3.135,4.488,4.555l-1.254,1.023c-0.924-1.452-2.938-3.499-4.356-4.587L245.6,88.581z M249.164,85.677c1.617,1.188,3.531,3.103,4.488,4.555l-1.254,0.99c-0.892-1.32-2.806-3.367-4.356-4.555L249.164,85.677z" />
<path d="M271.998,83.069c-0.032-0.726-0.132-4.324-0.197-5.149l3.399,0.132c-0.033,0.264-0.265,0.594-0.858,0.693c0,0.396,0,0.792,0.066,4.258c4.06-0.132,8.316-0.231,10.792-0.264v2.277c-2.806-0.066-6.799,0-10.727,0.132c0.066,2.575,0.132,4.951,0.231,6.766c0.33,1.089,0.396,2.079,0.396,3.465c0,1.056-0.099,2.277-0.33,3.202c-0.857,3.861-3.696,7.261-9.505,9.571c-0.43-0.561-1.155-1.386-1.684-1.881c5.05-1.815,7.756-4.555,8.581-7.69h-0.032c-0.693,0.99-1.915,1.749-3.4,1.749c-2.937,0-5.544-2.409-5.544-5.776c-0.033-3.498,2.805-6.172,5.94-6.172c1.188,0,2.409,0.429,3.069,1.023c0-0.561-0.065-2.772-0.132-4.192c-3.433,0.066-13.862,0.429-15.215,0.495l-0.066-2.178l7.525-0.198L271.998,83.069z M272.625,94.654c0-1.287,0-4.291-3.366-4.291c-2.277,0.033-3.895,1.782-3.928,4.191c0,2.311,1.75,3.829,3.664,3.829C271.338,98.383,272.625,96.568,272.625,94.654z" />
</g>
</svg>
imgタグで出力の見本

SVG画像の表示確認

<img src="/img/column/svg_test.svg" alt="SVG画像の表示確認" />
SVG画像の作り方
1. 何でもいいので新規ファイルを作成

jpg画像などを作る時と同様な感じで新規ファイルを作成して下さい。

新規ファイルの作成

2. 適当に画像を作成

テキストはアウトライン化しておいて下さい。
アウトライン化しなくてもコードなどは生成されますが、テキストデータのままのコードになるので宜しくはない感じです。
SVG化しなくてもいいじゃん的な、そんなコードになってしまいます。

画像を作成

3. 書き出す領域を設定

次に、アードボードで表示させる枠を決めてしまいます。
レイヤーのパネルのタブに「レイヤー」と「アートボード」がありまして、その「アートボード」をクリックして下さい。
メニューバーの中にある「オブジェクト」をクリックして頂いたら「アートボード」が出てきます、それでも構いません。

アートボードをクリックすると画像のようなウィンドウが出てきます。
赤枠にある「プリセット」をクリックして、「選択オブジェクトにあわせる」を選択して下さい。
この時、レイヤー全てを選択している状態にして下さい。

アートボードを開く

4. ブラウザ上で表示される領域を確認

プリセットを「選択オブジェクトにあわせる」を選択して進めますと、以下のような感じで表示される領域が設定された絵になります。
これで書き出し準備が整った段階です。

プリセットを調整

5. 「別名で保存」を選択する

書き出し作業ですが、jpg画像やgif画像での書き出す時は、「Web用に保存」をクリックするところですが、「.svg」画像の場合、「別名で保存」を選択して下さい。
CS5以前(?)は操作が異なるようですので、色々探してみて下さい。
拡張子が「.svg」を選べば何ら問題はありません。

別名で保存を選択

6. 拡張子は「.svg」を選択する

プルダウンの中に「SVG」があるので「SVG」を選択し「保存」をクリックして下さい。

拡張子は「.svg」を選択

7. 「詳細オプション(基本オプション)」をクリックして適宜調整

赤枠の「基本オプション」はウィンドウが開いた状態でして、最初は「詳細オプション」というボタンになっています。
「詳細オプション」をクリックし、適宜チェック入れるところに入れて下さい。
画像の通りにして頂ければだいたい問題ないと思います。

その後、青枠の「SVGコード」をクリックして下さい。

「詳細オプション(基本オプション)」を選択し適宜チェックを入れ「SVGコード」をクリック

8. 吐き出されたコードをコピペする

コードが吐き出されている状態ですので、そのコードをコピペして下さい。
「OK」をクリックすると、保存場所に設定した場所にSVG画像が保存されますので、その画像をサーバーにアップして使って下さい。

書き出されたコード

SVGに関する補足
  • Illustratorから吐き出されているコード全てをコピペすると不要な部分が入りますので、サンプルのような感じで <svg> 〜 </svg> までをコピペして下さい。
  • SVGコードはミニファイ化出来ますので、以下のようなサイトでミニファイ化するなりして、ご都合にあわせて修正してください。
    SVGOMG
  • SVGコードにはalt属性のような付随情報を追記するタグがあるようです。
    厳密な役割は分かっていませんでして、これがSEOとして必須なモノかどうかは分かりませんが、日本語情報を付随出来ます。
    アイキャッチの画像の中のコードで赤色に色をつけている「 <title> 」「 <desc> 」です。
    アイキャッチの画像を参考にしてみて下さい。
締め

うーん、、、画像が多く重いページになってしまいました・・・。
すみません。
スマホなどで見る時でも、wifiには接続しておいて下さいね・・・って、最後の文末で言っても遅いですよね(汗)

さておき。

いかがでしたでしょうか?

意外に簡単に出来たのではないでしょうか?
大きな画像などをSVGのコード表示にすると凄く長くなるので、あまりおすすめ出来ません。
紹介したようにコードのミニファイ化(簡略化)も出来るのですが、写真は普通の画像として表示させた方が良さそうな感じがします。
細かい調整は色々とテストをしてみて下さい。

こんなことを言うのもアレですが、弊社はデザインを売りにしているわけではありません。
基本的にはプログラム的な思考要素と解析数字要素の強い提案ばかりですので、デザイン要素の強い提案は基本的にはあまりしません。
時と場合によりますが、デザイン要素の強い提案は基本的に少ないです。

そんな弊社でも、ポイントになるデザイン要素は多少必要だと考えています。
そのため、IllustratorやPhotoshop、Fireworksなどを使ったチップス的なこともしてたりします。

SEOとデザインの結びつきをロジックで説明することはなかなか難しいですが、それでもUIやUXを考えると外せないところも多いです。
ですので、このような感じで要領を得ることが出来れば出来てしまうような操作は出来るだけ憶えて頂くことをおすすめしたいと思っています。
これからも色々なチップスを残そうと思っていますので、リクエストがありましたらお気軽にご連絡下さい。

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP