Adobe Illustratorで描いたイラストをSVGで実装する方法

Pocket

SVG Advent Calendar 2015 10日目の記事です。

先週も別のAdvent Calendarに参加していたのですが、先月参加したリクリイベントでSVGについてちょっと勉強したこともあり、こちらのカレンダーにも参加してみることにしました。

今回はリクリで教わったことをベースに、データの作成からサンプル作成までの流れをざっくりと書いてみます。

SVGって?

XMLをベースにした、ベクター画像フォーマットです。
ベクター画像なので、拡大してもきれいなため、高解像度端末でもきれいに見えます。

対応環境

IE9~、Android3~で対応しており、その他のブラウザも最新版であれば問題なく表示されます。
(ちなみに、ChromeよりもIEの方がSVGのレンダリングがきれいだそうです。)

埋め込み方

埋め込み方は大きく見ると4つほどあります。

1.img要素としてHTMLに埋め込む

<img src="参照先URL" alt="" width="100" height="100">

2.外部メディアとして埋め込む

<object data="参照先URL " width="100" height="100" codetype="image/svg+xml">代替コンテンツ</object>
<embed src="参照先URL " width="100" height="100" type="image/svg+xml">

3.背景画像として埋め込む

.box{
  background-image: url(参照先URL );
}

4.インラインでHTMLに埋め込む

<div>
  <svg width="320" height="320">
    <circle cx="100" cy="100" r="100" fill="red">
  </svg>
</div>

今回はソースをごにょごにょいじりたいので、4番目のインラインでHTMLに埋め込む方法を採用します。

イラストの作成

Illustratorでイラストを作成します。
SVGはPhotoshopでも書き出せるそうなのですが、Illustratorで作業するのをおすすめします。

Illustratorで作業するメリット

  • レイヤー名をIDに設定できる
  • SVG構造をそのまま保持できる

Illustratorで作業する場合は、レイヤー構造を保ったまま持ってこれるので、なるべくレイヤー名はキチッとしておきましょう。

また、普通に作成すると重くなるので、以下の点にも気を付けます。

作成するときの注意点

  • ピクセル単位で、座標やサイズの数値が小数点にならないように
  • アンカーポイントを減らす
  • アピアランスはやりすぎない

Illustratorの環境設定

一般


キー入力を0.5px、もしくは1pxに設定します。
これで、などキー入力で移動するときもピクセル単位で移動してくれるようになります。

「プレビュー境界」と「線幅と効果も拡大・縮小」にはチェックしないようにしましょう。
(※「プレビュー境界」は線幅まで含めた境界線でサイズが表示されてしまう機能です。)

単位


単位のところは全てピクセルにしておきます。

テキスト


サイズ/行送り、 ベースラインシフトを1pxにしておくとブラウザ上の文字サイズ指定に近くなるようです。
また、トラッキングを10/1000emにしておくことで、ブラウザ上のletter-spacing: 0.01em;相当になります。

Illustrator上での作業

プレビューモードはピクセルで作業します。
プレビューモードの変更は[表示]→[ピクセルプレビュー]より設定できます。

また、[変形]パネルで座標、サイズともに整数値になるように心がけましょう。

サンプルでこんなの作ってみました。


レイヤー構造はこんなかんじにしてます。
背景の緑は、確認用で置いているだけで、実際書き出すときには消すレイヤーです。

パスの単純化

結構複雑な形の場合は、アンカーポイントを減らすべく、パスの単純化をします。
[オブジェクト] → [パス] → [単順化…]
あんまりやると崩れてしまうのでほどほどに…。

また、テキストを扱う場合はアウトラインに変換しましょう。

書き出し

アートボードのサイズが大きいとその分、要らないところまで書き出してしまうことになるので、アートボードがオブジェクトにピッタリになるように設定します。

[オブジェクト] → [アートボード] → [オブジェクト全体に合わせる]
これで、自動的にアートボードが作成されます。

別名で保存でファイル形式の項目はSVG(svg)を選択し、さらに、「アートボードごとに作成」にチェックします。

別名で保存

SVGオプションを設定します。今回は参考サイトを見つつ下記のように設定しました。

詳細オプション

レスポンシブのとこはチェックすると、SVG要素にwidthとheightが指定されなくなってしまうのでチェックしないようにします。

追記

先日リリースされたCC 2015.2からSVGの書き出しに新機能が追加され、Minify機能がついたようです。
詳細は週刊SVGさんの記事をご覧ください。

週刊SVG 2015年12月12日のSVG

最適化

このままだといらないものも入ってしまってて、ちょっと重たいので最適化をします。
最適化にあたり今回はSVGOMGを使いました。

svgomg

実際やってみたところ 752B → 434B と約40%のダイエットになりました。
SVGは、PNGやJPEGと違い、gzip圧縮ができるので、これだけで大分軽くなりますね。

生成されたソースについて

<svg xmlns="http://www.w3.org/2000/svg" width="70px" height="73px" viewBox="0 0 70 73">
  <g id="box">
    <path id="boxBottom" fill="#F5F5F5" d="M5 33.76v36.996c0 1.66 1.345 3.005 3.005 3.005h53.99c1.66 0 3.005-1.344 3.005-3.004V33.76H5z"/>
    <path id="boxTop" fill="#FFF" d="M66.995 33.76H3.005C1.345 33.76 0 32.416 0 30.757v-13.99c0-1.66 1.345-3.005 3.005-3.005h63.99c1.66 0 3.005 1.346 3.005 3.006v13.99c0 1.66-1.345 3.005-3.005 3.005z"/>
  </g>
  <g id="ribon">
    <path id="ribonObi" fill="#B91912" d="M27 33.76h16v40H27z"/>
    <path id="ribonTop" fill="#C82520" d="M27 13.76h16v20H27z"/>
    <g id="ribonMusubi">
      <g id="ribonMusubiWrap" fill="#C82520">
        <path id="ribonMusubiR" d="M36.714 11.76L23.044.654c-1.282-1.04-3.14-.812-4.13.508l-5.4 7.2c-.99 1.32-.506 2.79 1.074 3.263L18.84 12.9c1.58.473 4.224.86 5.874.86h9c1.65 0 3-1.237 3-2.75v.75z"/>
        <path id="ribonMusubiL" d="M33 11.76L46.672.654c1.28-1.04 3.138-.812 4.128.508l5.4 7.2c.99 1.32.507 2.79-1.073 3.263L50.874 12.9c-1.58.473-4.223.86-5.873.86h-9c-1.65 0-3-1.237-3-2.75v.75z"/>
      </g>
    </g>
  </g>
</svg>

(※実際生成されるソースは改行されてないですが、見やすいように成形してます。)

xmlns属性

SVGのネームスペースを表します。
URLになってますが、このURL先には特に意味がないです。
(ちなみにこの2000というのは勧告された年のようです。)

widthとheight

表示する大きさを決めるwidthheightの指定も必要です。
デフォルトだと単位は省略されていますが、IEとAndroid向けにpxで指定するのがいいようです。

viewBox属性

viewBox="min-x min-y width height"

min-xmin-yは座標の基準点のことです。SVGでは左上が基準になります。
widthheightについては、少し注意が必要で、img要素にあるwidthheightとは別物です。

jpg/png画像サイズ
SVG内容が描画される空間

SVGキャンパスは無限に広がっており、描画するエリアを設定しているというイメージのようです。

詳しくはW3Cのサイトをどうぞ。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/coords.html

g要素

パスのグループを示すもので、Illustratorでいうレイヤーになります。
レイヤー名はそのままid名になります。

他にもこんなものがあります。

preserveAspectRatio属性

オブジェクトの縦横比が保たれるように均等に拡縮させたい場合に使います。

title

SVGはXML文書なので、個別の画像要素にタイトルテキストを入れることができます。

role aria-labelledby

設定しておくとスクリーンリーダーに対応します。
表などでテキストが入る場合は設定しておきましょう。

サンプル

Media Queriesと連動させて、アニメーションするサンプルを作成してみました。
ウィンドウサイズを広げるとイラストが変更します。

ソースはこちら

See the Pen present by matsui (@matsui) on CodePen.

Media Queriesと連動させるとアイコンやロゴなどを、スマホ端末、タブレット端末、PCとごとに情報の詳細度を変えることができます。

最後に

「SVGに挑戦してみたいけど、よくわからなかった」という人の参考になるとうれしいです。

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。