SVGファイルをIllustratorで簡単に作成し、HTML5で表示する方法

最近、ロゴに「.svg」となったファイルを使うサイトが増えていているような気がします。
.svgとはなんなのかよく知らなかったので調査し、実際にブラウザで表示させることが出来るようになったので、備忘録としてポストしてみたいと思います。

SVG形式ファイルについて

SVGとは

まずはSVGファイルについて。分かったことを羅列してみます。

• aiやepsなどと同じような、ベクター形式の画像形式
• 実はXMLでできている
• Scalable Vector Graphics の頭文字をとって、SVGという
• ベクター形式なのでサイズは自由自在
• Adobe Illustratorで作成(出力)可能

サポートするブラウザ

ブラウザ名	サポートバージョン
Internet Explorer	9以上
Firefox	3.0以上
Chrome	4.0以上
Mac OS X Safari	3.2以上
Opera	9.0以上
iOS Safari	3.2以上
Androidブラウザ	3.0以上

というふうな感じ。
マークアップ言語（XML）でできているってのが一番の驚きでした。

Adobe Illustrator で作成する

↑ 今回は簡単な画像で作成。キャンバスをオブジェクトと同じサイズにします

↑ 保存の際に「SVG」を選択

↑ 上記オプションがいい感じだと思われます

↑ 出来上がったsvgファイル。私の環境では、IEの様なアイコンとなりました

ソースコード

作成したsvgファイルを秀丸などのテキストエディタで開くと、以下の様な内容です。
XMLで出来ているのがわかると思います。

[html]




[/html]

SVG形式のファイルをHTMLで表示する方法

大きく分けて、以下の4つの方法がある。

1. <IMG>タグを使う
2. CSSを使う
3. <SVG>タグを使う：
4. <OBJECT>タグを使う

1. <IMG>タグを使う

HTMLのIMGタグにSVGファイルを直接指定する方法。

[html]

[/html]

2. CSSを使う

CSSのbackground-imageプロパティで背景画像として指定する方法

[html]

[/html]

[css]
#logo {
width: 100px;
height: 100px;
background-image: url(../img/logo.svg);
}
[/css]

3. <SVG>タグを使う

HTML内に直接SVGタグでベクターパスを指定して描画する方法

[html]

[/html]

4. <OBJECT>タグを使う

HTMLのOBJECTタグでSVGファイルを埋め込む方法

[html]

[/html]

結果

いずれも、以下のような結果。

書式による違い

表示の書式が4つありますが、それぞれ以下の違いが有ります。

• 1(imgタグ)、2(CSS)は画像要素となり、SVG内のpathに対してcss, jsでの制御が効かない
• 4(OBJECTタグ)はiframeのように別documentになり、css, jsはそのdocumentに対して適用される必要がある

css, Javascriptで制御を行いたい場合は、3のsvgタグでhtml内にsvg文書を埋め込む方法 or SVG文書内にJavascriptを埋め込んだ状態から、4のOBJECTタグで埋め込む方法を採る必要がある。

但し、JavaScript埋め込み型SVGファイルのOBJECTタグでのイベント発動に対応しているのは Chrome と Safari の Webkit系ブラウザだけなので、クロスブラウジングを考えるのならインラインSVGタグ＋JavaScriptというセットを採用するのが良さそうなのですが、どちらにしてもちょっと面倒ってのが正直なところ…。

有名ロゴ画像を表示してみる

Jリーグのガンバ大阪のロゴを表示してみました。
表示方法はこれまで説明したとおり。

[html]

[/html]

サイズを変えてみても美しいまま。
いいね。

参考にしたサイト様

-HTML,CSS
-hml, html5, Illustrator, svg, WEB制作, ロゴ, 作成, 画像