素材サイトからダウンロードしたSVGの素材を再利用することを考えます。再利用できて、なおかつスタイルも適用できるように考えました。詳しくは、コードをご覧ください。
サンプルコードの紹介
以下は、素材サイト*1からダウンロードしたSVGファイルです。 ちなみに絵の具の図形です。
<!--paint.svg--> <!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 16px; height: 16px; opacity: 1;" xml:space="preserve"> <style type="text/css"> .st0{fill:#4B4B4B;} </style> <g> <polygon class="st0" points="332.911,259.564 389.041,170.738 317.96,125.84 261.845,214.672 " style="fill: rgb(75, 75, 75);"></polygon> <path class="st0" d="M320.799,0l-24.557,43.291l-0.018,0.03L198.16,222.816l-8.222,14.761l-0.466,1.35l-0.102,0.288l-0.072,0.28 c-3.026,11.471-4.022,22.336-4.022,31.729c0,8.355,0.796,15.444,1.68,20.91l-23.094,36.551c-3.658,5.777-5.421,12.29-5.418,18.68 c-0.011,11.608,5.789,23.003,16.324,29.675l48.913,30.895c5.781,3.654,12.29,5.413,18.681,5.413 c11.611,0.007,23.014-5.792,29.678-16.324l23.09-36.551c11.297-3.32,29.458-10.311,46.521-24.746l0.235-0.197l0.682-0.667 l0.497-0.485l10.512-14.754L472.204,154.49l28.576-40.812L320.799,0z M253.486,385.304c-3.866,6.103-11.968,7.937-18.082,4.086 l-48.912-30.902c-6.115-3.874-7.942-11.964-4.075-18.09l23.298-36.892l71.074,44.898L253.486,385.304z M281.28,341.3l-71.07-44.89 c0,0-7.013-24.322,0.47-51.912l117.264,74.08C306.25,337.191,281.28,341.3,281.28,341.3z M332.434,311.474l-117.265-74.08 l93.268-172.011l138.596,87.552L332.434,311.474z M451.521,145.839L312.934,58.287l15.5-27.491l141.246,89.22L451.521,145.839z" style="fill: rgb(75, 75, 75);"></path> <path class="st0" d="M201.807,438.845c-11.32-13.98-2.468-25.709-16.161-31.736c-14.686-6.46-23.787,8.984-45.743,6.702 c-0.034,0-0.061,0-0.096,0c-8.173-1.152-16.691-1.827-25.52-1.827c-56.926,0-103.067,25.391-103.067,56.718 c0,31.327,46.141,43.298,103.067,43.298c56.927,0,103.072-11.971,103.072-43.298C217.36,457.731,211.605,447.526,201.807,438.845z M61.914,461.833c-7.702,0-13.95-5.83-13.95-13.033c0-7.21,6.247-13.033,13.95-13.033c7.707,0,13.954,5.823,13.954,13.033 C75.869,456.002,69.621,461.833,61.914,461.833z" style="fill: rgb(75, 75, 75);"></path> </g> </svg>
polygon要素1つとpath要素2つで構成されていることが分かります。
原寸大だと小さくて何の図形か認識しにくいので、拡大したものをキャプチャしました。
symbol要素でひな形の定義
上記のコードをsymbol要素を使い、ひな形を定義します。素材から余分なコードを削除して整理します。主な変更内容は、以下です。
- svg要素の属性をxmlnsのみにする
- 3つの要素をそれぞれsymbol要素で囲い、id名を付与する
- symbol要素にviewBoxを指定する
- ダウンロードする素材に合わせて値を指定する
- styleの記述を削除する
- class属性を削除する
コード
<!-- paint_test.svg --> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <!-- ラベル --> <symbol id="label" viewBox="0 0 512 512"> <polygon points="332.911,259.564 389.041,170.738 317.96,125.84 261.845,214.672"></polygon> </symbol> <!-- 本体 --> <symbol id="body" viewBox="0 0 512 512"> <path d="M320.799,0l-24.557,43.291l-0.018,0.03L198.16,222.816l-8.222,14.761l-0.466,1.35l-0.102,0.288l-0.072,0.28 c-3.026,11.471-4.022,22.336-4.022,31.729c0,8.355,0.796,15.444,1.68,20.91l-23.094,36.551c-3.658,5.777-5.421,12.29-5.418,18.68 c-0.011,11.608,5.789,23.003,16.324,29.675l48.913,30.895c5.781,3.654,12.29,5.413,18.681,5.413 c11.611,0.007,23.014-5.792,29.678-16.324l23.09-36.551c11.297-3.32,29.458-10.311,46.521-24.746l0.235-0.197l0.682-0.667 l0.497-0.485l10.512-14.754L472.204,154.49l28.576-40.812L320.799,0z M253.486,385.304c-3.866,6.103-11.968,7.937-18.082,4.086 l-48.912-30.902c-6.115-3.874-7.942-11.964-4.075-18.09l23.298-36.892l71.074,44.898L253.486,385.304z M281.28,341.3l-71.07-44.89 c0,0-7.013-24.322,0.47-51.912l117.264,74.08C306.25,337.191,281.28,341.3,281.28,341.3z M332.434,311.474l-117.265-74.08 l93.268-172.011l138.596,87.552L332.434,311.474z M451.521,145.839L312.934,58.287l15.5-27.491l141.246,89.22L451.521,145.839z"></path> </symbol> <!-- 絵の具(中身) --> <symbol id="drop" viewBox="0 0 512 512"> <path d="M201.807,438.845c-11.32-13.98-2.468-25.709-16.161-31.736c-14.686-6.46-23.787,8.984-45.743,6.702 c-0.034,0-0.061,0-0.096,0c-8.173-1.152-16.691-1.827-25.52-1.827c-56.926,0-103.067,25.391-103.067,56.718 c0,31.327,46.141,43.298,103.067,43.298c56.927,0,103.072-11.971,103.072-43.298C217.36,457.731,211.605,447.526,201.807,438.845z M61.914,461.833c-7.702,0-13.95-5.83-13.95-13.033c0-7.21,6.247-13.033,13.95-13.033c7.707,0,13.954,5.823,13.954,13.033 C75.869,456.002,69.621,461.833,61.914,461.833z"></path> </symbol> <!-- パーツを組み合わせて、絵の具の図形を作る --> <symbol id="paint"> <use href="#label"/> <use href="#body"/> <use href="#drop"/> </symbol> </defs> </svg>
絵の図の図形をラベル、本体、絵の具(中身) の3つのパーツに分けて定義しました。そしてそれらのパーツを組み合わせて、絵の具の図形を定義しています。
HTMLからの参照
use要素を使い、別ファイルから図形を参照します。<use href="ファイル名#id名"/>で指定します。以下は、HTMLから参照する例です。
コード
<!-- paint_test.html --> <svg width="64px" height="64px"> <use href="paint_test.svg#paint"/> </svg> <svg width="64px" height="64px"> <use href="paint_test.svg#label"/> <use href="paint_test.svg#body"/> <use href="paint_test.svg#drop"/> </svg>
widthとheightで大きさを指定できます。
デモ
symbol要素を入れ子にする
既に登場していますが、symbol要素を入れ子にすることができます。該当部分は、以下です。
コード
<!-- paint_test.svg --> <!-- パーツを組み合わせて、絵の具の図形を作る --> <symbol id="paint"> <use href="#label"/> <use href="#body"/> <use href="#drop"/> </symbol>
利用例
<!-- paint_test.html --> <svg width="64px" height="64px"> <use href="paint_test.svg#paint"/> </svg>
スタイルの適用
スタイルをまとめて適用する方法と個別に適用する方法です。HTMLから参照する際にスタイルを適用してみます。
<!-- paint_test.html --> <!-- スタイルをまとめて適用 --> <svg width="64px" height="64px"> <use href="paint_test.svg#paint" fill="red"/> </svg> <!-- スタイルを個別に適用 --> <svg width="64px" height="64px"> <use href="paint_test.svg#label" fill="blue"/> <use href="paint_test.svg#body"/> <use href="paint_test.svg#drop" fill="blue"/> </svg>
symbol要素で定義するときにスタイルを指定していないので、use要素で参照する際にスタイルを適用できます。
まとめ
- symbol要素で図形をひな形として定義する
- use要素でひな形を参照する(再利用)
- スタイルを適用できる
考察
SVGファイルにひな形のみを記述する場合と、ひな形と参照を記述する場合が考えられます。ひな形と参照を別ファイルに分けるかどうかは、考える必要があります。別ファイルから参照する場合は、クロスオリジンに注意が必要です。その際は、表示の確認をローカル環境で行います。
参考サイト
- HTML SVG の基本的な使い方(SVG入門)
- SVGスプライトの使い方【SVGを１つのファイルにまとめる】 – DESIGN REMARKS [デザインリマークス]
- アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
*1:参考サイトをご確認ください。
