デザイナーやディレクターにも知ってほしい！SVGの使い方

入社一ヶ月、新人コーダーのよしだです。好きなHTMLタグは<li>タグです。この度、カンナートHACKSの担当に任命され、隔週で更新していく予定です。HTML、CSS、JavaScript関係の記事をメインに書いていきます！

はじめに

ところでみなさん「SVG」をご存知でしょうか?「Adobe Illustratorで扱っているベクター画像をWebブラウザに表示させる技術」というのはWebに携わっている方々でしたらほとんどの人が知っていると思います。
ただ、具体的にSVGとは何なのか、何ができるのか、どう扱えばいいのかを知っているのはHTMLコーダーであったり、フロントエンドエンジニアの方々が多いのではないでしょうか？
コーダーやエンジニアだけでなく、デザイナーやディレクターにもSVGを知ってもらうことで、制作や提案の幅を広げていくことを目的にSVGを紹介していきます!

１．SVGって？

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略でAdobe Illustratorで扱っているベクターデータをWebブラウザに表示させる技術です。

jpegやpngといったビットマップ形式の画像とは違い、拡大や縮小を行っても画質が劣化しないというのが大きな特徴です。

1.1. 主な特徴

・拡大・縮小しても画質が劣化しない。
・画像でもあり、文書でもある
・ファイル容量が軽量
・主にロゴやアイコン、画像マスクに使われる。
・アニメーションさせることもできる

1.2. 対応ブラウザ

・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以上

上記の対応ブラウザ一覧をご覧の通り、かなり実用的な技術になっています。積極的に使っていくべきです！

1.3. SVGとPNGを比較してみた

SVGの大きな特徴のひとつである「拡大・縮小しても画質が劣化しない」ことをPNGとの比較でご覧いただきたいと思います。

いかがでしょう、PNG画像と比較してSVGは画質は劣化していませんし、ファイル容量も軽いですね。

2．SVGで表現できること

SVGは単にAdobe Illustratorで書き出したものをそのまま表示させて使うことだけに留まりません。
SVGはアニメーション、ドロップシャドウ、クリッピングマスクなどをSVGの要素や属性だけで表現することができます！

2.1. ドロップシャドウ

<filter>要素を使うことでドロップシャドウを表現できます。

See the Pen <a href="http://codepen.io/YOSHIDASHINGO/pen/WogWpo/">SVG Drop shadow</a> by yoshida (<a href="http://codepen.io/YOSHIDASHINGO">@YOSHIDASHINGO</a>) on <a href="http://codepen.io">CodePen</a>.<br />

2.2. クリッピングマスク

<clipPath>要素を使うことで画像や動画にクリッピングマスクを適用できます。
下のサンプルでは正円のマスクを使用しましたが、多角形やテキストで切り抜くことも可能です。

See the Pen <a href="http://codepen.io/YOSHIDASHINGO/pen/aBaMxq/">SVG Clipping mask</a> by yoshida (<a href="http://codepen.io/YOSHIDASHINGO">@YOSHIDASHINGO</a>) on <a href="http://codepen.io">CodePen</a>.<br />

2.3. アニメーション

SVGにはアニメーション専用の要素が用意されています。
もちろんJavaScriptやcss3のkeyframesアニメーションを適用させることもできます。
サンプルでは<animateMotion>という要素を用い、パスに沿って要素を動かしています。GIFアニメーションと比べると画質は良いですし、動作も軽快です。

See the Pen <a href="http://codepen.io/YOSHIDASHINGO/pen/QGVeMp/">SVG Animation</a> by yoshida (<a href="http://codepen.io/YOSHIDASHINGO">@YOSHIDASHINGO</a>) on <a href="http://codepen.io">CodePen</a>.<br />

3．SVGを書き出してみよう！

ベクターデータの申し子Adobe IllustratorでのSVGの書き出し方をご紹介します。

3.1. SVGの書き出し手順

STEP1: Adobe Illustratorで作成したデータを別名で保存する

画像を作成し、「ファイル(F)→別名で保存(Shift+Ctrl+S)」
余白が出ないようにアートボードのサイズはオブジェクトサイズに合わせます。

STEP2: ファイルの種類「SVG」を選択

適当な名前を付け、ファイルの種類「SVG」を選択します。

STEP3: オプションを選択して保存！

保存の際、オプション選択画面が出てきます。
オプションを選択して「OK」でSVGデータの保存が完了します。
オプションの詳細に関しては次回以降の記事で紹介したいと思います。

3.2. SVGのコードを表示

テキストエディタでSVGのコードを確認してみましょう。

単純な図形などでない限り、すごく長いコードでデータが構成されています。
先程SVGの特徴で挙げました、「画像でもあり、文書でもある」とはまさしくこのことです。
SVGはXMLベースで構成されており、SVGの要素は約80個あります。

4．SVGをブラウザに表示させる方法

書き出したSVGデータをブラウザに表示させる方法を紹介します。表示方法はなんと4通りもあります。

4.1. インラインでSVGのコードを記述

最もメジャーな記述方法で、アニメーションさせたり、JavaScriptを適用させたいときに向いています。

<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" width="300px" height="265.945px" viewBox="0 0 300 265.945" enable-background="new 0 0 300 265.945"
	 xml:space="preserve">
<g>
	<g>
		
			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-377.9438" y1="532.7891" x2="-372.4966" y2="532.7891" gradientTransform="matrix(0 11.9189 11.9189 0 -6197.4565 4705.6963)">
			<stop  offset="0" style="stop-color:#EFC781"/>
			<stop  offset="0.2022" style="stop-color:#EFC781"/>
			<stop  offset="0.5562" style="stop-color:#D49C3F"/>
			<stop  offset="1" style="stop-color:#D49C3F"/>
		</linearGradient>
		<path fill="url(#SVGID_1_)" d="M294.875,245.648c0,7.975-6.889,15.074-15.386,15.748c-84.354,6.064-169.002,6.064-253.357,0
			c-8.499-0.674-15.386-7.773-15.386-15.748c-1.709-8.17-3.417-16.221-5.126-24.132c0-7.855,6.887-14.872,15.383-15.578
			c87.763-6.555,175.853-6.555,263.614,0c8.498,0.706,15.383,7.723,15.383,15.578C298.291,229.428,296.583,237.479,294.875,245.648z
			"/>
	</g>
	<g>
		<g>
			<path fill="#9D7358" d="M293.614,192.671c0,12.556-7.251,23.486-16.198,24.288c-82.97,6.191-166.241,6.191-249.211,0
				c-8.949-0.802-16.198-11.732-16.198-24.288c0-12.555,7.25-23.483,16.198-24.285c82.97-6.197,166.241-6.197,249.211,0
				C286.363,169.186,293.614,180.116,293.614,192.671z"/>
		</g>
		<path fill="#BBA078" d="M80.43,183.217c0,0,10.745,4.741,10.867,18.372C91.297,201.589,80.641,207.075,80.43,183.217z"/>
		<path fill="#7B5748" d="M49.439,197.238c-3.482-1.989-5.582-5.207-4.653-7.188c0.938-1.983,4.5-1.996,7.991-0.005
			c3.488,1.975,5.583,5.201,4.656,7.183C56.506,199.206,52.919,199.213,49.439,197.238z"/>
		<path fill="#BBA078" d="M235.896,191.028c0,0,11.1-2.13,14.454,10.366C250.35,201.395,241.769,212.903,235.896,191.028z"/>
		<path fill="#BBA078" d="M135.232,186.177c0,0-0.25,17.798-8.502,21.521C126.73,207.698,120.795,192.711,135.232,186.177z"/>
		<path fill="#BBA078" d="M228.723,179.181c0,0,7.611,12.931,3.295,24.751C232.018,203.932,221.167,199.901,228.723,179.181z"/>
		<path fill="#BBA078" d="M113.584,181.191c0,0,10.741,4.728,10.857,18.365C124.441,199.557,113.793,205.058,113.584,181.191z"/>
		<path fill="#BBA078" d="M284.517,189.382c0,0-0.255,17.796-8.496,21.523C276.021,210.905,270.079,195.929,284.517,189.382z"/>
		<path fill="#BBA078" d="M28.454,172.282c0,0,10.738,4.74,10.857,18.377C39.312,190.659,28.66,196.161,28.454,172.282z"/>
		<path fill="#7B5748" d="M216.911,190.28c0.039,4.249-1.609,7.736-3.675,7.823c-2.063,0.072-3.768-3.299-3.805-7.54
			c-0.041-4.23,1.605-7.726,3.672-7.805C215.17,182.682,216.873,186.072,216.911,190.28z"/>
		<path fill="#7B5748" d="M183.975,204.171c1.788,3.753,1.785,7.689-0.042,8.73c-1.822,1.058-4.743-1.139-6.55-4.911
			c-1.799-3.776-1.781-7.692,0.037-8.747C179.234,198.191,182.176,200.402,183.975,204.171z"/>
		<path fill="#7B5748" d="M262.494,203.162c0.036,4.242-1.605,7.724-3.676,7.808c-2.057,0.081-3.766-3.297-3.809-7.541
			c-0.029-4.229,1.614-7.73,3.675-7.799C260.752,195.552,262.459,198.94,262.494,203.162z"/>
		<path fill="#7B5748" d="M105.731,179.412c3.687-1.552,7.314-1.153,8.113,0.895c0.805,2.038-1.528,4.953-5.198,6.504
			c-3.675,1.557-7.312,1.16-8.109-0.883C99.736,183.878,102.073,180.959,105.731,179.412z"/>
		<path fill="#7B5748" d="M80.612,210.125c-3.826,1.087-7.375,0.238-7.96-1.89c-0.574-2.133,2.056-4.74,5.876-5.815
			c3.818-1.083,7.376-0.239,7.958,1.89C87.063,206.438,84.425,209.052,80.612,210.125z"/>
		<path fill="#7B5748" d="M106.313,206.165c0.039,4.241-1.611,7.738-3.681,7.815c-2.066,0.064-3.765-3.313-3.803-7.556
			c-0.042-4.231,1.607-7.722,3.675-7.808C104.573,198.561,106.276,201.917,106.313,206.165z"/>
		<path fill="#893025" d="M94.028,180.536c0,0,41.628,17.459,71.512,10.217c0,0,27.517-6.461,42.39-16.053
			c0,0,28.921-6.97,40.777,0.77c0,0,29.116,7.711,34.368-1.695c0,0,13.883-1.616-14.053-11.68
			c-27.94-10.065-137.489-21.355-203.605-0.09l-45.367,6.72c0,0-9.57,5.509,4.402,10.543
			C24.452,179.268,40.444,173.636,94.028,180.536z"/>
	</g>
	<path fill="#7FAE2E" d="M210.467,104.52c0,0-137.661-0.294-178.822,11.893c-41.156,12.196-17.938,4.265-30.59,4.866
		c0,0-4.205,7.873,4.168,13.457c0,0-2.637,1.827-0.662,5.996c0,0,8.969-2.132,13.73,3.614c0,0-1.458,8.606-4.138,9.588
		c0,0,5.631,4.847,10.085,2.945c0,0-4.6,20.679,15.078,14.626c0,0,13.141,11.324,26.529,6.43c0,0,3.615-0.186,4.343-4.48
		c0,0,37.542-12.014,47.733-6.525c0,0,3.953,8.345,11.257,9.701c0,0,4.49-1.072,11.821,1.141c0,0,3.11-1.413-0.606-3.806
		c0,0-2.015-5.027-0.278-6.81c1.735-1.792-0.484-0.841-0.484-0.841s4.009-1.458,6.397,1.416c0,0,0.5,1.259,4.082,0.23
		c0,0,0.331-2.998-0.211-5.107c0,0,1.501-7.753,9.736-5.583c0,0,2.85,3.271,11.921,3.698c0,0,22.879,5.743,25.433,1.785
		c0,0,8.119-0.814,10.46,1.202c0,0,10.689,6.754,11.856,2.001c0,0,3.665,1.111,4.867-2.792c0,0,8.202,1.315,10.672,6.313
		c0,0,8.856,6.423,9.177,2.99c0,0,0.694-5.161,8.967-2.14c0,0,17.883,5.558,16.789,0.921c0,0,1.22-3.476-2.047-5.886
		c0,0,0.692-5.149,5.733-3.682c0,0,19.796-3.074,20.509-7.797c0,0-11.759,0.123-13.658-1.911c0,0-4.779-6.178-0.329-8.093
		c0,0-1.008-2.51-4.657-3.186c0,0-18.284-15.35,0.94-21.383c0,0,5.333-2.384,4.781-4.919c0,0,8.745-7.664,1.307-12.43
		c0,0-2.326-1.6-10.724,3.497c0,0-2.677,0.968-3.703-1.954l-15.818,0.742L210.467,104.52z"/>
	
		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="164.7114" y1="99.3135" x2="172.7275" y2="175.4537" gradientTransform="matrix(0.9991 -0.0441 0.0441 0.9991 -1.2997 -1.2199)">
		<stop  offset="0.1517" style="stop-color:#558031"/>
		<stop  offset="0.7303" style="stop-color:#7FAE2E"/>
	</linearGradient>
	<path fill="url(#SVGID_2_)" d="M210.467,104.52l30.425-3.371l5.735,24.058l-20.186,21.43c0,0,0.886,5.071-5.218,5.358
		c0,0-5.575-3.567-8.259-2.795l-12.755,3.795c0,0-17.777-2.994-19.813-2.894c-2.028,0.096-26.359,3.169-26.359,3.169
		s0.128,3.192-5.291,3.45l-9.592-2.108l-11.551-0.088l0.387,9.581l-22.988-14.266l-3.808-10.062l81.884-5.707l13.611-23.133
		L210.467,104.52z"/>
	
		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="77.0864" y1="100.6196" x2="49.6614" y2="177.0182" gradientTransform="matrix(0.9991 -0.0441 0.0441 0.9991 -1.2997 -1.2199)">
		<stop  offset="0.1517" style="stop-color:#558031"/>
		<stop  offset="0.691" style="stop-color:#7FAE2E"/>
	</linearGradient>
	<path fill="url(#SVGID_3_)" d="M100.858,131.47l2.685,15.885c0,0-27.638,5.144-33.091,4.76l-5.869,6.037
		c0,0-29.95-1.77-21.74-16.887l9.179-8.116c0,0,0.414-6.408-7.716-6.026c0,0-0.546-13.42-9.932-10.409l61.136,0.294L100.858,131.47z
		"/>
	<path fill="#FAF1B5" d="M195.209,107.806c0,0,16.168,30.367-46.228,32.476c0,0-33.389,2.866-50.837-3.128
		c0,0-12.354-3.25-14.286-6.154c0,0-2.797-1.996-12.392-4.099c0,0-10.639-5.472,0.919-10.708
		C72.386,116.192,181.664,97.774,195.209,107.806z"/>
	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="152.811" y1="128.7119" x2="152.811" y2="-0.013">
		<stop  offset="0.191" style="stop-color:#F1D1A1"/>
		<stop  offset="0.5056" style="stop-color:#D49C3F"/>
	</linearGradient>
	<path fill="url(#SVGID_4_)" d="M290.123,74.114C251.532,17.461,201.657-0.455,153.238,0.019
		C104.548-0.668,54.313,17.13,15.5,74.114c-17.167,37.553-0.386,43.892-0.386,43.892s45.238,9.719,134.712,9.783v0.013
		c1.026,0.008,1.968-0.008,2.982-0.008c1.018,0,1.962,0.017,2.986,0.008v-0.013c89.476-0.064,134.711-9.783,134.711-9.783
		S307.29,111.667,290.123,74.114z"/>
</g>
</svg>

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

xml:space="preserve">

<g>

</linearGradient>

<path fill="url(#SVGID_1_)" d="M294.875,245.648c0,7.975-6.889,15.074-15.386,15.748c-84.354,6.064-169.002,6.064-253.357,0

c-8.499-0.674-15.386-7.773-15.386-15.748c-1.709-8.17-3.417-16.221-5.126-24.132c0-7.855,6.887-14.872,15.383-15.578

c87.763-6.555,175.853-6.555,263.614,0c8.498,0.706,15.383,7.723,15.383,15.578C298.291,229.428,296.583,237.479,294.875,245.648z

"/>

</g>

<g>

<path fill="#9D7358" d="M293.614,192.671c0,12.556-7.251,23.486-16.198,24.288c-82.97,6.191-166.241,6.191-249.211,0

c-8.949-0.802-16.198-11.732-16.198-24.288c0-12.555,7.25-23.483,16.198-24.285c82.97-6.197,166.241-6.197,249.211,0

C286.363,169.186,293.614,180.116,293.614,192.671z"/>

</g>

<path fill="#7B5748" d="M49.439,197.238c-3.482-1.989-5.582-5.207-4.653-7.188c0.938-1.983,4.5-1.996,7.991-0.005

c3.488,1.975,5.583,5.201,4.656,7.183C56.506,199.206,52.919,199.213,49.439,197.238z"/>

<path fill="#7B5748" d="M216.911,190.28c0.039,4.249-1.609,7.736-3.675,7.823c-2.063,0.072-3.768-3.299-3.805-7.54

c-0.041-4.23,1.605-7.726,3.672-7.805C215.17,182.682,216.873,186.072,216.911,190.28z"/>

<path fill="#7B5748" d="M183.975,204.171c1.788,3.753,1.785,7.689-0.042,8.73c-1.822,1.058-4.743-1.139-6.55-4.911

c-1.799-3.776-1.781-7.692,0.037-8.747C179.234,198.191,182.176,200.402,183.975,204.171z"/>

<path fill="#7B5748" d="M262.494,203.162c0.036,4.242-1.605,7.724-3.676,7.808c-2.057,0.081-3.766-3.297-3.809-7.541

c-0.029-4.229,1.614-7.73,3.675-7.799C260.752,195.552,262.459,198.94,262.494,203.162z"/>

<path fill="#7B5748" d="M105.731,179.412c3.687-1.552,7.314-1.153,8.113,0.895c0.805,2.038-1.528,4.953-5.198,6.504

c-3.675,1.557-7.312,1.16-8.109-0.883C99.736,183.878,102.073,180.959,105.731,179.412z"/>

<path fill="#7B5748" d="M80.612,210.125c-3.826,1.087-7.375,0.238-7.96-1.89c-0.574-2.133,2.056-4.74,5.876-5.815

c3.818-1.083,7.376-0.239,7.958,1.89C87.063,206.438,84.425,209.052,80.612,210.125z"/>

<path fill="#7B5748" d="M106.313,206.165c0.039,4.241-1.611,7.738-3.681,7.815c-2.066,0.064-3.765-3.313-3.803-7.556

c-0.042-4.231,1.607-7.722,3.675-7.808C104.573,198.561,106.276,201.917,106.313,206.165z"/>

<path fill="#893025" d="M94.028,180.536c0,0,41.628,17.459,71.512,10.217c0,0,27.517-6.461,42.39-16.053

c0,0,28.921-6.97,40.777,0.77c0,0,29.116,7.711,34.368-1.695c0,0,13.883-1.616-14.053-11.68

c-27.94-10.065-137.489-21.355-203.605-0.09l-45.367,6.72c0,0-9.57,5.509,4.402,10.543

C24.452,179.268,40.444,173.636,94.028,180.536z"/>

</g>

<path fill="#7FAE2E" d="M210.467,104.52c0,0-137.661-0.294-178.822,11.893c-41.156,12.196-17.938,4.265-30.59,4.866

c0,0-4.205,7.873,4.168,13.457c0,0-2.637,1.827-0.662,5.996c0,0,8.969-2.132,13.73,3.614c0,0-1.458,8.606-4.138,9.588

c0,0,5.631,4.847,10.085,2.945c0,0-4.6,20.679,15.078,14.626c0,0,13.141,11.324,26.529,6.43c0,0,3.615-0.186,4.343-4.48

c0,0,37.542-12.014,47.733-6.525c0,0,3.953,8.345,11.257,9.701c0,0,4.49-1.072,11.821,1.141c0,0,3.11-1.413-0.606-3.806

c0,0-2.015-5.027-0.278-6.81c1.735-1.792-0.484-0.841-0.484-0.841s4.009-1.458,6.397,1.416c0,0,0.5,1.259,4.082,0.23

c0,0,0.331-2.998-0.211-5.107c0,0,1.501-7.753,9.736-5.583c0,0,2.85,3.271,11.921,3.698c0,0,22.879,5.743,25.433,1.785

c0,0,8.119-0.814,10.46,1.202c0,0,10.689,6.754,11.856,2.001c0,0,3.665,1.111,4.867-2.792c0,0,8.202,1.315,10.672,6.313

c0,0,8.856,6.423,9.177,2.99c0,0,0.694-5.161,8.967-2.14c0,0,17.883,5.558,16.789,0.921c0,0,1.22-3.476-2.047-5.886

c0,0,0.692-5.149,5.733-3.682c0,0,19.796-3.074,20.509-7.797c0,0-11.759,0.123-13.658-1.911c0,0-4.779-6.178-0.329-8.093

c0,0-1.008-2.51-4.657-3.186c0,0-18.284-15.35,0.94-21.383c0,0,5.333-2.384,4.781-4.919c0,0,8.745-7.664,1.307-12.43

c0,0-2.326-1.6-10.724,3.497c0,0-2.677,0.968-3.703-1.954l-15.818,0.742L210.467,104.52z"/>

</linearGradient>

<path fill="url(#SVGID_2_)" d="M210.467,104.52l30.425-3.371l5.735,24.058l-20.186,21.43c0,0,0.886,5.071-5.218,5.358

c0,0-5.575-3.567-8.259-2.795l-12.755,3.795c0,0-17.777-2.994-19.813-2.894c-2.028,0.096-26.359,3.169-26.359,3.169

s0.128,3.192-5.291,3.45l-9.592-2.108l-11.551-0.088l0.387,9.581l-22.988-14.266l-3.808-10.062l81.884-5.707l13.611-23.133

L210.467,104.52z"/>

</linearGradient>

<path fill="url(#SVGID_3_)" d="M100.858,131.47l2.685,15.885c0,0-27.638,5.144-33.091,4.76l-5.869,6.037

c0,0-29.95-1.77-21.74-16.887l9.179-8.116c0,0,0.414-6.408-7.716-6.026c0,0-0.546-13.42-9.932-10.409l61.136,0.294L100.858,131.47z

"/>

<path fill="#FAF1B5" d="M195.209,107.806c0,0,16.168,30.367-46.228,32.476c0,0-33.389,2.866-50.837-3.128

c0,0-12.354-3.25-14.286-6.154c0,0-2.797-1.996-12.392-4.099c0,0-10.639-5.472,0.919-10.708

C72.386,116.192,181.664,97.774,195.209,107.806z"/>

</linearGradient>

<path fill="url(#SVGID_4_)" d="M290.123,74.114C251.532,17.461,201.657-0.455,153.238,0.019

C104.548-0.668,54.313,17.13,15.5,74.114c-17.167,37.553-0.386,43.892-0.386,43.892s45.238,9.719,134.712,9.783v0.013

c1.026,0.008,1.968-0.008,2.982-0.008c1.018,0,1.962,0.017,2.986,0.008v-0.013c89.476-0.064,134.711-9.783,134.711-9.783

S307.29,111.667,290.123,74.114z"/>

</g>

</svg>

4.2. imgタグで設置

jpgやpngなどを置く感覚と同じで手軽です。

<img src=”sample.svg”>

1	<img src=”sample.svg”>

4.3. 背景画像としてCSSに記述

こちらもjpgやpngを背景画像として設置する感覚と同じです。

<div class=”sample”></div>

1	<div class=”sample”></div>

.sample {
 width: 300px;
 height: 268px;
 background: url(images/sample.svg) 0 0 no-repeat;
 background-size: cover;
}

.sample {

width: 300px;

height: 268px;

background: url(images/sample.svg) 0 0 no-repeat;

background-size: cover;

}

4.4. objectタグで設置

SVG非対応ブラウザ用にobjectタグ内に代替画像を設置することができます。

<object data=”sample.svg” type=”image//svg+xml”></object>

1	<object data=”sample.svg” type=”image//svg+xml”></object>

おわりに

SVGの概要、書き出し方、表示方法、何ができるのかを理解していただけたでしょうか？拡大・縮小をしても画質が荒れないこと、簡単に効果やアニメーションを適用させられるのはSVGを使う最大のメリットだと思います。

ただIEで一部のSVG要素（<clipPath>要素など）が使えないことが難点ですが、実はHTML5 APIのcanvas要素で再現できたりします。canvas要素に関してもいずれ記事にしていきたいと思います。

■使用素材

・ハンバーガー
http://www.tadae.net/item.php?cate1=1&cate2=26&item=43

・猫
https://www.pakutaso.com/20160321076post-7268.html

・車
http://www.d-materials.net/madori/car/

Post Views: 2,779