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

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

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

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

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

• MacBook Pro
• OS X EI Capitan 10.11.3
• CS6 Illustrator

<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 src="/img/column/svg_test.svg" alt="SVG画像の表示確認" />

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

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

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

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

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

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

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

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

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

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

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

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

さておき。

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

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

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

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

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

執筆 : 清水 隼斗