ブログ
symbolタグとuseタグを使って、好きなところにSVGを表示しよう！
もうすっかり定番となって、使わない機会はないぐらいになってきたSVG。
だけど、インラインで使用するのはソースも長くなってしまうし、なかなか面倒！
そこで今回はpathを一回定義すれば、何度でも呼び出せるSVGの書き方について説明します。
今回使用するSVGはこちら。
弊社の年賀状で登場しましたワンコの足跡です。
詳しくは、デザイナーたけださんのブログをご参照ください。
それでは、ワンコの足跡をペタペタする方法を紹介したいと思います。
SVGを書き出す
Adobe Illustratorから書き出したSVGのコードはこのような形。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="dog" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="395px" height="372px" viewBox="0 0 395 372" enable-background="new 0 0 395 372" xml:space="preserve">
<path d="M34.914,114.248c0,0-32.878,9.608-34.629,59.312c-2.139,60.633,7.189,75.045,30.28,76.292 c23.739,1.279,44.391-13.951,46.328-65.332C78.834,133.139,56.761,114.016,34.914,114.248z M358.47,110.754 c0,0,33.087,8.895,35.965,58.549c3.51,60.573-5.489,75.184-28.546,76.928c-23.7,1.791-44.694-12.989-47.8-64.315 C314.983,130.589,336.623,110.993,358.47,110.754z M245.427-0.007c0,0,32.763-1.192,47.8,64.315 c8.205,35.751,7.556,73.17-34.428,76.991c-36.608,3.332-49.584-73.557-47.932-76.1C212.519,62.656,198.45,8.075,245.427-0.007z M139.536,1.137c0,0-32.782-0.485-46.328,65.332c-7.395,35.919-5.895,73.314,36.165,76.228c36.674,2.54,47.898-74.61,46.192-77.118 C173.86,63.071,186.684,8.205,139.536,1.137L139.536,1.137z M354.992,322.966c0,0-7.012,48.91-58.294,47.78 c-58-1.278-62.4-17.752-94.326-16.663c-36.128,1.233-114,45.875-147.2-10.2c-31.709-53.54,32.652-85.391,45.993-94.8 s24.079-99.183,98.938-95.369c63.602,3.241,63.975,67.771,77.347,75.784C304.603,245.775,363.644,270.675,354.992,322.966z"/>
</svg>
続いて、必要ないタグやプロパティは削除してしまいましょう。
インラインで使う際に必要なタグは、svgとpathだけ。
svgのプロパティも必要なのはviewBoxくらいなものです。
<svg viewBox="0 0 395 372">
<path d="M34.914,114.248c0,0-32.878,9.608-34.629,59.312c-2.139,60.633,7.189,75.045,30.28,76.292 c23.739,1.279,44.391-13.951,46.328-65.332C78.834,133.139,56.761,114.016,34.914,114.248z M358.47,110.754 c0,0,33.087,8.895,35.965,58.549c3.51,60.573-5.489,75.184-28.546,76.928c-23.7,1.791-44.694-12.989-47.8-64.315 C314.983,130.589,336.623,110.993,358.47,110.754z M245.427-0.007c0,0,32.763-1.192,47.8,64.315 c8.205,35.751,7.556,73.17-34.428,76.991c-36.608,3.332-49.584-73.557-47.932-76.1C212.519,62.656,198.45,8.075,245.427-0.007z M139.536,1.137c0,0-32.782-0.485-46.328,65.332c-7.395,35.919-5.895,73.314,36.165,76.228c36.674,2.54,47.898-74.61,46.192-77.118 C173.86,63.071,186.684,8.205,139.536,1.137L139.536,1.137z M354.992,322.966c0,0-7.012,48.91-58.294,47.78 c-58-1.278-62.4-17.752-94.326-16.663c-36.128,1.233-114,45.875-147.2-10.2c-31.709-53.54,32.652-85.391,45.993-94.8 s24.079-99.183,98.938-95.369c63.602,3.241,63.975,67.771,77.347,75.784C304.603,245.775,363.644,270.675,354.992,322.966z"/>
</svg>
準備ができたら、実際に使用するHTMLのbody内、一番上に配置します。
その際、そのままにすると単純に表示されてしまいますので、svgタグにdisplay="none"を付与します。
<body>
<svg display="none" viewBox="0 0 395 372">
<path d="M34.914,114.248c0,0-32.878,9.608-34.629,59.312c-2.139,60.633,7.189,75.045,30.28,76.292 c23.739,1.279,44.391-13.951,46.328-65.332C78.834,133.139,56.761,114.016,34.914,114.248z M358.47,110.754 c0,0,33.087,8.895,35.965,58.549c3.51,60.573-5.489,75.184-28.546,76.928c-23.7,1.791-44.694-12.989-47.8-64.315 C314.983,130.589,336.623,110.993,358.47,110.754z M245.427-0.007c0,0,32.763-1.192,47.8,64.315 c8.205,35.751,7.556,73.17-34.428,76.991c-36.608,3.332-49.584-73.557-47.932-76.1C212.519,62.656,198.45,8.075,245.427-0.007z M139.536,1.137c0,0-32.782-0.485-46.328,65.332c-7.395,35.919-5.895,73.314,36.165,76.228c36.674,2.54,47.898-74.61,46.192-77.118 C173.86,63.071,186.684,8.205,139.536,1.137L139.536,1.137z M354.992,322.966c0,0-7.012,48.91-58.294,47.78 c-58-1.278-62.4-17.752-94.326-16.663c-36.128,1.233-114,45.875-147.2-10.2c-31.709-53.54,32.652-85.391,45.993-94.8 s24.079-99.183,98.938-95.369c63.602,3.241,63.975,67.771,77.347,75.784C304.603,245.775,363.644,270.675,354.992,322.966z"/>
</svg>
このままではブラウザの一番にSVGを表示するだけになってしまいますので、こちらを定義要素とし、表示したい場所で呼び出す準備をします。
SVGを定義する
まずは、pathをsymbolで囲い、そしてさらにsymbolをdefsで囲います。
実際に表示する際に呼び出すのは、symbolタグになるため、呼び出す要素を指定するためにidを付与してください。
またviewBoxも、symbolタグが持つことができるため、svgタグは特に表示領域の指定が必要ありません。
そのため、svgに付与されていたviewBoxは、symbolタグへと移します。
defsやらsymbolやらなんのことやという方。
それぞれの特性については、下記のサイトにSVGの詳しいことがたくさん書いてあるので、こちらを参考にしてみてください。私も毎度お世話になっております。
<body>
<svg display="none">
<defs>
<symbol id="dogstamp" viewBox="0 0 395 372">
<path d="M34.914,114.248c0,0-32.878,9.608-34.629,59.312c-2.138,60.633,7.19,75.045,30.281,76.292 c23.739,1.279,44.39-13.951,46.328-65.332C78.834,133.139,56.761,114.016,34.914,114.248z M358.47,110.754 c0,0,33.087,8.895,35.965,58.549c3.51,60.573-5.489,75.183-28.546,76.927c-23.7,1.791-44.694-12.989-47.8-64.315 C314.983,130.589,336.623,110.993,358.47,110.754z M245.427-0.007c0,0,32.763-1.192,47.8,64.315 c8.205,35.751,7.555,73.17-34.428,76.991c-36.608,3.332-49.584-73.557-47.932-76.1C212.519,62.656,198.45,8.075,245.427-0.007z M139.536,1.137c0,0-32.782-0.485-46.328,65.332c-7.394,35.919-5.894,73.314,36.165,76.228c36.674,2.54,47.899-74.61,46.193-77.118 S186.684,8.205,139.536,1.137L139.536,1.137z M354.992,322.966c0,0-7.011,48.91-58.294,47.78c-58-1.278-62.4-17.752-94.326-16.663 c-36.128,1.233-114,45.875-147.2-10.2c-31.709-53.54,32.652-85.391,45.993-94.8s24.079-99.183,98.939-95.369 c63.601,3.241,63.974,67.771,77.346,75.784C304.603,245.775,363.644,270.675,354.992,322.966z"/>
</symbol>
</defs>
</svg>
今回はsymbolタグが一つだけですが、数が多くなるとこれまたソースが長くなってしまいます。
そんなときはphpのinclude_onceやpugなどでテンプレート化するとよいでしょう。
SVGを表示する
それでは、実際に好きなところに表示してみましょう！
表示したい場所にsvgタグを配置し、表示したい領域のviewboxを指定します。
そして呼び出す際に使用するのが、useタグです。
xlink:hrefというプロパティの値を、呼び出したいsymbolタグのid名とします。
あとは表示したい場所をxとyで指定、表示したい大きさをwidthとheightで指定することでお好みに合わせて表示することができます。
fillプロパティも付与することで、元データと異なる色に変更することも可能です。
<div>
<svg x="0" y="0" width="192px" height="166px" viewBox="0 0 192 166">
<use class="dogitem" fill="#db8c81" x="16px" y="16px" width="114px" height="109px" xlink:href="#dogstamp"></use>
<use class="dogitem dogitem2" fill="#302b1a" x="0" y="64px" width="45px" height="44px" xlink:href="#dogstamp"></use>
<use class="dogitem dogitem3" fill="#d2151a" x="23px" y="109px" width="55px" height="52px" xlink:href="#dogstamp"></use>
<use class="dogitem dogitem4" fill="#037551" x="85px" y="0" width="46px" height="43px" xlink:href="#dogstamp"></use>
<use class="dogitem dogitem5" fill="#91704b" x="134px" y="16px" width="58px" height="55px" xlink:href="#dogstamp"></use>
<use class="dogitem dogitem6" fill="#2c2967" x="76px" y="63px" width="91px" height="85px" xlink:href="#dogstamp"></use>
</svg>
</div>
<a href="#" class="btn">dog<i><svg x="0" y="0" width="18.2px" height="17px" viewBox="0 0 18 17"><use class="dogicon" fill="#fff" x="0" y="0" width="18px" height="17px" xlink:href="#dogstamp"></use></svg></i></a>
これで最初に定義したSVGのアイコンを呼び出して表示することができました。
またimgタグではできなかったマウスオーバーによるアニメーションも、classを付与するなどしてCSSでスタイルを当てることで実現することができます！
ソースも長くなるし、なかなか手が出しにくいと言う人も単純な作業で綺麗に作れますので、ぜひ試してみてください！