イラレデータがあれば簡単!SVGロゴを表示する

key_svg
 

SVGってpngやjpg画像と違ってベクター形式なので綺麗に表示されるという情報は以前から知っていたのですが、実際の業務で使ってきませんでした。

しかし、2016年1月12日をもってIE8のサポート終了されることもあり、思い切ってSVGロゴ表示させてみました。

Internet Explorer サポートポリシー変更の重要なお知らせ

SVGロゴの表示の仕方をメモしておきます。

  1. イラストレーターを使ってロゴデータ準備
  2. SVGコードで表示させる方法
  3. htmlにimgタグを使って表示させる方法

 

イラストレーターを使ってロゴデータ準備

まずは、イラストレータを使ってロゴデータを準備します。
今回はテスト用で適当にテキスト入力したロゴを用意しました。
01_svglogo
 

余計な余白ができないようにアウトライン化します。
「書式」-「アウトラインを作成」
02_svglogo
 

特に必要ないとは思うのですが、念のためアートボードをオブジェクトに合わせます。
ロゴを選択した状態で「アートボード」-「選択オブジェクトに合わせる」
03_svglogo
 

SVGコードで表示させる方法

SVGコードをhtmlに埋め込んで表示させる方法です。
イラストレータからSVGコードを取得します。

まずは「ファイル」-「別名で保存」をクリックします。
04_svglogo
 

「保存」をクリックします。
05_svglogo
 

右側にある「SVGコードを表示」をクリックします。
06_svglogo
 

SVGコードが表示されるので、htmlに<svg>タグ~</svg>タグまでをコピペします。
07_svglogo
 

これで表示されます。

<svg>タグ内のidが日本語になっていたので、削除するか修正してください。
サイズを変更したい場合は、<svg>タグ内のwidthとheightを削除して、<svg>タグ内にidかclassを指定します。
指定したidかclassのcssに任意のwidthとheightを指定すれば大丈夫です。

DEMOページではサイズを小さくしています。

DEMO

 

htmlにimgタグを使って表示させる方法

次にimgタグを使って表示させます。
まずは、イラレからSVG保存します。
「ファイル」-「Webおよびデバイス用に保存」をクリックします。
08_svglogo
 

保存形式で「SVG」を選択して「保存」をクリックします。
09_svglogo
 

適当なフォルダを指定して「保存」します。
10_svglogo
 

htmlでimgタグを使用して保存したSVGを読み込みます。

<img src="images/logo.svg" alt="ロゴ">

 

これで表示されました。

DEMO

 

タイトルとURLをコピーしました