元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【SVG】素材の再利用:symbol

素材サイトからダウンロードした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ファイルにひな形のみを記述する場合と、ひな形と参照を記述する場合が考えられます。ひな形と参照を別ファイルに分けるかどうかは、考える必要があります。別ファイルから参照する場合は、クロスオリジンに注意が必要です。その際は、表示の確認をローカル環境で行います。

参考サイト

*1:参考サイトをご確認ください。