IllustratorのデータをSVGで保存してHTMLで表示する

f:id:emj1025:20151030145207g:plain

会社の制作テンプレートを一新することになったのでSVGデータを使ってみることにしました。

IllustratorのデータをSVGで保存

現在使用ソフトがIllustrator CS5と少し古いので、もしかすると異なる部分もあるかもしれません。

Illustratorで作成されたロゴデータ等を開き（フォントのアウトラインを忘れずに）、

「ファイル」→「別名で保存（ctrl + shift + s）」で

「ファイルの種類」を「SVG」にして保存。

これだけです。

SVGファイルはアートボードのサイズで書き出されるので、アートボードに不要な余白がある場合は

アートボードツール、もしくは

「ファイル」→「ドキュメント設定」→「アートボードの編集」ボタン

から編集します。

※「ファイル」→「書き出し」にすると「ファイルの種類」の選択にSVGがないのでお気をつけを。

SVGファイルの表示方法はimgタグ、svgタグ、objectタグなど色々ありますが、一番馴染みのあるimgタグでさくっと表示してみます。

<img src="/images/logo.svg" />

このように画像ファイルを表示するが如く、非常に簡単です。

のはずが、表示されない…。

試しにobjectタグで記述したところ表示されたので、imgタグに問題があるのかもと思いググってみました。
どうやらサーバーの設定によってSVGがimgタグで認識出来ない事があるようです。

.htaccessファイルに以下の記述を追加すればOKです。

AddType image/svg+xml .svg AddType image/svg+xml .svgz

・いくら拡大してもぼやけないので高解像度ディスプレイ、レスポンシブに向いてる

・サイズ変更によるスライスのし直しが必要ないのが良い

・IE8以下では使えない。
とは言っても今の時代、最低でもIE9から対応できれば良いと思います。