emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

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

f:id:emj1025:20151030145207g:plain

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

 

 

IllustratorのデータをSVGで保存


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

 

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

 

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

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

 

これだけです。

 

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

 

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

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

から編集します。

 

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

 

SVGファイルをHTMLで表示する

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

 

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

 

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

参考:HTML5でのSVGファイル操作のおさらい - Qiita


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

 

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

 

解決方法

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

 

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

 

参考:外部SVGファイルの使い方と、表示されないときの注意点 - 03LOG

 

SVGのメリット

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

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

 

SVGのデメリット

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

 

 

10倍ラクするIllustrator仕事術 【増強改訂版】 CS5/CS6/CC/CC2014対応 ~ベテランほど知らずに損してる効率化の新常識

10倍ラクするIllustrator仕事術 【増強改訂版】 CS5/CS6/CC/CC2014対応 ~ベテランほど知らずに損してる効率化の新常識

 

 

emuramemo(c) All Rights Reserved.