SVGをwebで使う。

今頃？って思われるでしょうけど、
SVGをWebで使う方法について今日は書きたいと思います。

iPhoneや最新のMacBookにretinaディスプレイが採用されて、従来の解像度用の画像では荒く見えてしまう問題があります。
これに対応してくれるのが、ベクターデータです。
ベクターデータとビットマップデータてなんぞやて方はこちら
「ビットマップデータ」と「ベクターデータ」の違い

とにかく、ベクターデータにすればiPhoneでピンチインしてどアップしても荒くならないよってやつです。一般的なのはフォントでWebで使われているテキストデータはピンチインしても荒くなりません。
このサイトのロゴは画像を利用しているので、ピンチインすると荒くなってしまいます。
とりあえずコレを直そうと思い、SVG形式の画像の使い方を勉強します。

ここのサイト見れば一瞬でした。
SVGファイル大解剖 : Illustratorによる作成から、Web書き出しまで

1,Illustrator等でイラストを作成しSVG形式で保存する。

2,webに埋め込む。（いくつか方法がある。）

<img src="images/svg-test.svg" alt="">

1	<img src="images/svg-test.svg" alt="">

<object type="image/svg+xml" data="images/svg-test.svg"></object>

1	<object type="image/svg+xml" data="images/svg-test.svg"></object>

<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" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
	<g>
		<circle cx="136.5" cy="140" r="9"/>
	</g>
	<g>
		<circle cx="163.5" cy="140" r="9"/>
	</g>
</g>
<g>
	<path d="M137,163h26.3h-26.4c0,0,0,0.1,0,0.2c0,7.5,6,13.6,13.3,13.6c7.4,0,13.4-6.1,13.4-13.6"/>
</g>
<g>
	<path d="M150,203.8c-29.7,0-53.8-24.1-53.8-53.8c0-29.7,24.1-53.8,53.8-53.8c29.7,0,53.8,24.1,53.8,53.8
		C203.8,179.7,179.7,203.8,150,203.8z M150,106.2c-24.1,0-43.8,19.6-43.8,43.8s19.6,43.8,43.8,43.8s43.8-19.6,43.8-43.8
		S174.1,106.2,150,106.2z"/>
</g>
</svg>

y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

<g>

</g>

<g>

</g>

<g>

</g>

<g>

<path d="M150,203.8c-29.7,0-53.8-24.1-53.8-53.8c0-29.7,24.1-53.8,53.8-53.8c29.7,0,53.8,24.1,53.8,53.8

C203.8,179.7,179.7,203.8,150,203.8z M150,106.2c-24.1,0-43.8,19.6-43.8,43.8s19.6,43.8,43.8,43.8s43.8-19.6,43.8-43.8

S174.1,106.2,150,106.2z"/>

</g>

</svg>

こんな感じ↓

body{
	width: 100%;
	height:100%;
	background-image: url(./images/svg-test.svg);
	-webkit-background-size: 100px 100px;
	background-size: 100px 100px;
}

body{

width: 100%;

height:100%;

background-image: url(./images/svg-test.svg);

-webkit-background-size: 100px 100px;

background-size: 100px 100px;

}

こんな感じ↓

ということで、svgをWebで表示する事は簡単だという事が分かりました。
次回はsvgでグラフィックを動かす方法について学びたいと思いやす。svgをWebで表示する方法はいくつかあったけれど、どの場面でどの方法を使うのが良いのかとか掘り下げたいと思います。

※僕の記事を読むより、上記の参照先の記事を読んだ方がいいと思います。とりあえず僕の記事を書く練習です。。

Pocket