SVG画像でアイコンを作成する方法。【高解像度なデバイスへの対応】
本日は、SVG画像でアイコンを作成する方法を記載します。
SVGとは?】
ベクトルデーター画像を描写する事が出来るXMLベースの言語です。拡大してもぼやけたりすることがなく、アイコンなどの図形の描画に適しています。(写真等の複雑な画像には向かない。)
作成方法
1.画像を作成します。
①Illustratorで、画像を作成。
②画像の周りを四角で囲みます。(塗りつぶし無し、枠線黒で作成しました。)
③SVG形式で保存します。
④Illustratorに戻り、外枠の四角だけを選択してください。
※この四角の内部がアイコン画像として認識されます。
注意】一旦四角を作成し、アートボードに変換したら絶対に動かさないようにしてください。ちょっとでも動かすと、認識されなくなってしまいます。
オブジェト → アートボード → アートボードに変換 ↓
↓
右側のSVG画像に変換されたら第一段階成功です。
↓
SVGオプションが立ち上がりますので、OKで保存をして下さい。
↓
.svg で保存がされたらOKです。
2.表示しましょう。
(HTML)
<body>
<div id="site">
<h1><img src="mark.svg" alt="">PICKUP<span>STREAM</span></h1>
</div>
</body>
こうなったら出来上がりです。
お疲れ様でした。