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

学びを形に:プログラミングとウェブデザインの勉強メモ

 メニュー

お知らせ:2025.1.15 サイトマップを更新しました

トップ > SVG > SVG|素材の再利用:symbol

SVG|素材の再利用:symbol

SVG

素材サイトからダウンロードした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:参考サイトをご確認ください。

» Processingの記事一覧はこちらです。