イラレデータがあれば簡単!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

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad