3.スプライトデータに編集

まずは細かなことは置いておいて、手順の説明を先にさせていただきます。
いつも通り、

• 不要な改行とインデント等を削除
• 不要なg要素と消し忘れ等で残った不要な要素を削除
• style属性を削除（※どうしても必要なものを除いて）
• グラフィックをdsfs要素でwrap

ここまで行うと、スプライトデータの構造としては、このようになるでしょう。

<svg class="defs" viewBox="0 0 403 53">
    <defs>
        <g id="horizontal">
            <path d="...">
            <path d="...">
                .
                .
        </g>
        <g id="vertical">
            <path d="...">
                .
                .
        </g>
        <g id="symbol">
            <path d="...">
                .
                .
        </g>
    </defs>
</svg>

そして、ここからがいつもと違うところです。
今回はこの状態のスプライトデータのg要素を直接参照させます。
また、参照時には下記のようにsvg要素下にuse要素を複数配置します。

<svg class="use1" viewBox="....">/*g要素からの参照なのでviewBox属性は必須！*/
    <use xlink:href="#symbol" />
    <use xlink:href="#vertical" />
</svg>

「バラしたグラフィック要素を使用時、用途毎に組み立てる」といったイメージで考えていただけると分かりやすいかと思います。

4.スプライトデータからグラフィックを組み立てる

では実際に、こちらの画像のように、このデータ1つから4タイプに使用してみましょう。

• 「縦型」は#symbolと#verticalの組み合わせ
• 「横型」は#symbolと#horizontalの組み合わせ
• 「シンボルのみ」は#symbol
• 「ロゴタイプのみ」は#horizontal

なので、記述はこのようにしてやるとよいでしょう。（※画像ではuse要素にidやclassが付与されていますが、今は無視してOKです）

<!-- 縦型として使用 -->
<svg class="vertical" viewBox="0 0 42 53">
    <use xlink:href="#symbol" />
    <use xlink:href="#vertical" />
</svg>
<!-- 横型として使用 -->
<svg class="horizontal" viewBox="0 0 403 53">
    <use xlink:href="#symbol" />
    <use xlink:href="#horizontal" />
</svg>
<!-- シンボルのみで使用 -->
<svg class="symbol" viewBox="0 0 42 42">
    <use xlink:href="#symbol" />
</svg>
<!-- ロゴタイプのみで使用 -->
<svg class="logotype" viewBox="40 0 403 53">
    <use xlink:href="#horizontal" />
</svg>

使用時の各svg要素のviewBox指定は

と指定してやると意図した通りに表示されます。
ここで前回やった内容が活きてきますね！

グラフィックモジュール用のSVGスプライトデータを作成、使用するにはviewBox指定に対する理解が必須になります。
しかしそれが分かっていれば、特に難しいことは何もなく、むしろ「え？これだけのこと？？」と思うかもしれません。笑

5.use要素の仕様を理解しよう

さて、では今回の裏テーマとでも言うべき題材に入りましょう。
次回に繋がる部分でもあり、今後様々な用途でSVGスプライトを使用していくにあたり、理解しておいたほうが良い「仕様」に関するお話です。

今回のポイントでもあった箇所ですが「なぜsymbol要素ではなく、g要素で作成するのか？」といった疑問を持たれた方も少なくないのではないでしょうか？
実際、symbol要素でもこうしたスプライトデータの作成は可能です。しかし、SVG関連の各要素の仕様を理解していないとまったく意図した通りのグラフィックが生成されないかったり、手順が増えたり等少々面倒なことがあります。

SVGスプライトを使用する際、必ずuse要素を使用しますね？
このuse要素は他のhtml要素などと比べてもちょっとユニークな仕様があります。そのあたりをポイントを絞ってお話していきます。

Point1：use要素はsymbol要素から参照したのかg要素から参照したのかで、振る舞いの違いがあります。

これまでSVGスプライトのつくり方を説明させていただいた際はすべて「symbol要素で」と言っていたかと思います。 しかし、今回のような「グラフィックのモジュール化用SVGスプライトデータ」は、下記のようにsvg要素以下に複数のuse要素を持たせて一つのsvg要素を構成します。

<svg class="use1" viewBox="....">/*g要素からの参照なのでviewBox属性は必須！*/
    <use xlink:href="#foo" />
    <use xlink:href="#bar" />
</svg>

svg要素下にuse要素を一つしか持たせない場合では、親となるsvg要素へスタイルを付与すれば何も問題はありませんが、このように複数のuse要素を持たせた場合では「何の要素から参照したのか」の振る舞いの違いによって意図した通りの形状にならないケースが生まれます。

use 要素が symbol 要素を参照している場合

参照先の symbol とその内容は、根元の symbol が svg に置き換えられることを除いて，生成される木に末端まで複製される。 この生成された svg は常に明示的に width 属性と height 属性の値を持ち， use 要素の width と height の値が移植されるが、これらが use 要素に与えられていないものについては値 ‘100%’ をとる。

文書構造-SVG1.1 use要素

つまるところ、symbol要素をuseで参照すると、（親となるsvg要素に対して）widthは100％になりますよ ということです。

こちらはこの記事の最初の画像（g要素から参照したもの：左）とsymbol要素から参照したもの（画像右）を並べたものです。
※他のhtmlの記述内容やスタイル指定ももちろん同じにしてあります。

ご覧の通り、右側のsymbol要素からの参照では#symbolと#horizontalが重なってしまったり、#symbolのサイズがすべて同じになったりしていますね？
この振る舞いの違いがある為、g要素での参照をおすすめします。

Point2：use要素はcssでのwidth,height指定を受け付けない

使用時のサイズがバラけてしまったので調整するために個々にサイズを変えたい…という場合、width属性やheight属性をuse要素に付与する必要があります。（これが手間になる）
※一応、その他のプロパティはほぼ全て受け付けるのでtransform:scaleなどで対応するのも無しではないですが…

widthやheightはviewBoxを見ればだいたい分かるので、そのまま記述すれば良いですが、はっきり言って使用する毎にそんなことをするのは面倒くさい。
なので、g要素から参照するほうが楽です。

また、同様の理由から
スプライトデータ作成の段階で、全アートワークの大きさがきっちり揃っているように作成しておかなければ 使用時に微妙なサイズのズレが生まれますのでご注意ください。
この微妙なズレを都度cssやwidth,height属性等で調整するのは至難の技です。必ず、作成時の段階でサイズを揃えるよう調整しておきましょう。

Point3：use要素は内包要素を持っていない（※10/18追記有り）

ここに関しては次回の内容に大きく関わってくる箇所でもあるので、次回詳しくお話ししますが、少し今回も触れておきます。
スプライトデータ内のg要素にはpath要素などが入っています。しかし、useで参照した際、それらの要素はDOMツリー上には複製されません（※ちょっと語弊がありますが）。

なので

<svg viewBox="0 0 42 53">
    <use class="symbol" xlink:href="#symbol" />
    <use class="vertical" xlink:href="#vertical" />
</svg>

.symbol path{fill:#aaa}
.vertical path{fill:#333}

といった指定をしても、「存在しない要素への指定」になるため、このスタイルが適用されることはありません。
svgスプライトからの参照で使用したsvg要素に対してスタイル指定できるのは、親となるsvg要素とuse要素に対してのみ有効となります。

まとめ

• スプライトデータをg要素で作成する
• 使用時のsvg要素下にuse要素を複数持たせて「組み立てる」
• viewBoxの指定方法を知っていることは大切！
• use要素はcssのwidth,height指定を受け付けない
• 必ず、作成時の段階でサイズを揃えるよう調整しておく

仕様に関する箇所は、そんなに難しく考えなくてもよいところでもありますが、知っているのといないのでは今後違いが出てくるかなということでお話しさせていただきました。

若干小難しく書きすぎた感が否めないのですが…もし、「意味分からん！」などありましたらお申し付けいただけると幸いです。。（文章あまり上手じゃないです…）

では、次回は『多色使いのアートワークによるグラフィックモジュール用svgスプライトの作成方法』をお話しさせていただきます！

ここまでできれば、恐らく普通に使う分にはsvgスプライトをほぼ思い通りに扱えるのではないかなと思います。お楽しみに！

…多分、次回はもう少し早めに更新できるのではないかな…？と思いますが…なるべく間が空かないよう頑張ります。。