webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

SVG画像でアイコンを作成する方法。【高解像度なデバイスへの対応】

本日は、SVG画像でアイコンを作成する方法を記載します。

SVGとは?】

ベクトルデーター画像を描写する事が出来るXMLベースの言語です。拡大してもぼやけたりすることがなく、アイコンなどの図形の描画に適しています。(写真等の複雑な画像には向かない。)

作成方法

1.画像を作成します。

Illustratorで、画像を作成。

②画像の周りを四角で囲みます。(塗りつぶし無し、枠線黒で作成しました。)

f:id:kaoru01-05:20140627064108p:plain

SVG形式で保存します。

f:id:kaoru01-05:20140627064419p:plain

 

Illustratorに戻り、外枠の四角だけを選択してください。

※この四角の内部がアイコン画像として認識されます。

注意】一旦四角を作成し、アートボードに変換したら絶対に動かさないようにしてください。ちょっとでも動かすと、認識されなくなってしまいます。

 

オブジェト → アートボード → アートボードに変換 ↓

f:id:kaoru01-05:20140627064701p:plain

右側のSVG画像に変換されたら第一段階成功です。

f:id:kaoru01-05:20140627072038p:plain

SVGオプションが立ち上がりますので、OKで保存をして下さい。

f:id:kaoru01-05:20140627090845p:plain

.svg で保存がされたらOKです。

f:id:kaoru01-05:20140627091216p:plain

2.表示しましょう。

(HTML)

<body>
<div id="site">
<h1><img src="mark.svg" alt="">PICKUP<span>STREAM</span></h1>
</div>
</body>

f:id:kaoru01-05:20140627092032p:plain

こうなったら出来上がりです。

お疲れ様でした。