IllustratorでSVGを作成してみる

自宅でIllustratorを使える環境がようやく整ったので、IllustratorでSVG作成を試してみたいと思います。

SVG画像の作成

Illustratorで適当に画像を作成します。
作成が終わったら ファイル > 別名で保存 を選択。

ファイルの種類をSVGに変更して保存します。

次のダイアログはそのままOKをクリック。

imgタグのsrcで保存したSVG画像を指定します。

HTML

<img src="test.svg" width="200" alt="">

これで作成したSVG画像が表示されました。
imgタグでSVG画像挿入のデモページ
　

SVGのコードをHTML内に直接記述することもできます。
先ほどの保存後のダイアログで SVGコード… を選択すると、SVGコードが表示されます。

HTML内にそのコードをそのまま貼り付けます。

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 171 69" style="enable-background:new 0 0 171 69; width: 200px;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<rect id="XMLID_1_" x="1" y="1" class="st0" width="169" height="67"/>
<g id="XMLID_2_">
	<path id="XMLID_3_" d="M42.5,33.3c0,3.9-0.7,7.1-2,9.6s-3.4,4.6-6.2,6.3s-6.4,3-10.8,3.9l-1.3-3.3c4.9-1,8.8-2.8,11.7-5.2
		s4.3-5.9,4.3-10.5v-2.4H17.1v-3.4h43.9v3.4H42.5V33.3z M58.1,18.9H19.8v-3.3h38.3V18.9z"/>
	<path id="XMLID_6_" d="M109.7,50.7l-3.3,2.6c-4.3-4.4-10.1-9.7-17.6-16C81.1,44.8,73.3,50,65.6,53.1l-1.8-3
		c6.4-2.6,12.8-6.8,19.2-12.5S94,25.7,96.5,19H69.8v-3.3h31l1,0.9c-2.2,6.6-5.7,12.7-10.5,18.1C96,38.5,102.1,43.8,109.7,50.7z"/>
	<path id="XMLID_8_" d="M156.6,36.5l-2.5,3.3c-3.3-2.2-7.1-4.3-11.6-6.4s-8.5-3.7-12.1-4.7v24.9h-4.2v-41h4.2V25
		C139.7,27.8,148.4,31.6,156.6,36.5z"/>
</g>
</svg>

そのまま貼り付けると画面サイズに合わせて表示されるので、svgタグのstyle属性にwidth: 200px;を追加しました。
svgタグで挿入のデモページ
　

【参考サイト】

• アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス