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

2016/02/29 2017/12/09

最近、ロゴに「.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で出来ているのがわかると思います。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="126.829px" height="126.829px" viewBox="0 0 126.829 126.829" enable-background="new 0 0 126.829 126.829"
	 xml:space="preserve">
<circle fill="#5BB531" cx="63.415" cy="63.415" r="63.415"/>
<circle cx="63.415" cy="66.464" r="29.878"/>
</svg>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

y="0px" width="126.829px" height="126.829px" viewBox="0 0 126.829 126.829" enable-background="new 0 0 126.829 126.829"

xml:space="preserve">

</svg>

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

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

<IMG>タグを使う
CSSを使う
<SVG>タグを使う：
<OBJECT>タグを使う

1. <IMG>タグを使う

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

<img src="logo.svg" width="100" height="100">

1	<img src="logo.svg" width="100" height="100">

2. CSSを使う

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

<div id="logo"></div>

1	<div id="logo"></div>

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

#logo {

width: 100px;

height: 100px;

background-image: url(../img/logo.svg);

}

3. <SVG>タグを使う

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

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="126.829px" height="126.829px" viewBox="0 0 126.829 126.829" enable-background="new 0 0 126.829 126.829"
	 xml:space="preserve">
<circle fill="#5BB531" cx="63.415" cy="63.415" r="63.415"/>
<circle cx="63.415" cy="66.464" r="29.878"/>
</svg>

y="0px" width="126.829px" height="126.829px" viewBox="0 0 126.829 126.829" enable-background="new 0 0 126.829 126.829"

xml:space="preserve">

</svg>

4. <OBJECT>タグを使う

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

<object type="image/svg+xml" data="logo.svg" width="100" height="100"></object>

1	<object type="image/svg+xml" data="logo.svg" width="100" height="100"></object>

結果

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

書式による違い

表示の書式が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リーグのガンバ大阪のロゴを表示してみました。
表示方法はこれまで説明したとおり。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
    background-color: #ccc;
}
</style>
</head>
<body>
<img src="gambaosaka.svg" alt="GAMBA OSAKA logo" width="250">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #ccc;

}

</style>

</head>

<body>

</body>

</html>

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

参考にしたサイト様

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

: 【CSS】改行が入っても文字の頭をそろえる（2行目以降を1文字下げる）方法

箇条書きや注釈に「・」や「※」をよく使うと思いますが、改行すると記号が回りこんで埋もれてしまいがちです。
今回は記号ではありませんが、利用規約をHTML化する作業をしていた時に「(1)」などがやはり回りこんでいたのが非常に気になったので、それを回避、揃える方法を備忘録としてポストします。

: 【CSS】backgroundプロパティのまとめ

CSSの背景関係を指定するプロパティですが、一括指定の方法をよく忘れるので、一度、backgroundプロパティに整理してみます。

: HTML5のFile APIを使って、複数(の画像)ファイルをサーバにアップロードする方法。

HTML5のFile APIを使うと、複数ファイルのアップロードが簡単に出来るそうなので、試してみました。
対象のブラウザがモダンブラウザに限定されるようなのですが、妙に簡単に出来たのが印象的。

ちなみに、CakePHP2（2.3.6）でも動きました。

: 【CSS】ラジオボタンの背景色を選択肢によって変更する方法

今までも何度か登場していますが、ラジオボタンの背景色。今回は、選択肢によって色を変えれば見やすくなると思ったのでそれに対応したものの備忘録です。

: ログイン画面デザイン100選

ちょっとでもテンションが上がるようなログイン画面にしてみたい、ってことでググりましたところ、海外のサイト（しかも2009年）の記事ですが、ログインのデザイン画面のみを集めたサイトを見つけました。

PREV: CakePHPのバージョン確認方法
NEXT: 【JS】選択済みのチェックボックスの個数をカウントするスクリプトをjQueryで組んでみた