例としてsvg-spriteライブラリを使用してSVGスプライトを生成する方法

最近、プロジェクトで使用されるすべてのSVGファイルを単一のスプライトとして整理する問題を解決しました。 その前に、私はそのようなタスクのために自作のソリューションを使用しなければなりませんでした。 今回は、 人気のあるsvg-spriteライブラリを使用することにしましたが、その作成方法がいくつも提供されていることに非常に驚きました。 すべての方法が分析され、すべての情報がブログや個々の出版物に散らばっている単一の記事は見つかりませんでした。 したがって、スプライトを1か所で生成するためのライブラリで利用可能なメソッドを収集し、それらの利点と欠点を同時に分析することにしました。 行きましょう。

CSSモード

このモードは、写真からスプライトを生成する通常の方法に非常に似ています。 すべてのファイルが1つに接着され、結果のファイルがブロックの背景として配置され、この背景の移動により目的のアイコンが選択されます。

使用例は次のようになります

<i class="svg-ei-archive">ei-archive</i>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

および関連するCSS

 .svg-ei-archive { background: url("svg/sprite.css.svg") 12.5% 0 no-repeat; width: 50px; height: 50px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

svg-sprite



優れた機能は、スタイルを取得する形式を、純粋なCSSの形式で、またはLESS、SASS、Stylusプリプロセッサの形式で指定できることです。 出力テンプレートで少し遊んだ後、アイコンの出力をミックスインの形式で構成し、本当に必要な場合にのみコードを生成できます。

利点 ：この方法は、スプライトを使用したことがある人なら誰でも簡単に理解できるものです。

短所 ：任意のサイズを指定したり、アイコンの色を制御したりすることは不可能です。 img



タグを使用できません

Defsモード

このモードはdefsタグを使用します。このタグ内では、将来の使用のために要素が宣言されます。 各要素にはidが割り当てられ、 useタグでこの要素が呼び出されます 。

使用例

 <svg viewBox="0 0 50 50" width="50" height="50"> <use xlink:href="#ei-archive"></use> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例から要素をレンダリングするためにuse



は、 defs



SVGもドキュメントの本文に含める必要があります。 標準では、 xlink:href



で外部ファイルを使用できますが、これはInternet Explorerのすべてのバージョンでサポートされているわけではありません。 幸いなことに、この問題を解決するsvg4everybody ポリフィルがあります。

利点 ：この方法は、CSSまたは属性を使用して埋め込みアイコンを制御できるという点で優れています。 サイズや色を簡単に変更できます。

欠点 ：ほとんどの場合、アイコン挿入コードを生成するメカニズム（マクロ、ヘルパー、関数）が必要です。 生成するときは、 viewBox



属性と寸法を指定する必要がviewBox



ます。 仕様によれば、 defs



内の要素は表示されないため、最適化後のスプライトの外観を視覚的に評価することはできません。 ただし、 svg-sprite



はこれに役立ち、すべてのアイコンのサンプルを含むファイルを作成できます。

現在、この方法を使用しても意味がありません;その改善されたバージョンはシンボルモードです。

シンボルモード

このモードの動作原理は前のものと似ていますが、 シンボルタグは要素を設定するために使用されます。 このアイテムには、仕様によるとviewBox



属性が含まれる場合があるため、指定された文字を使用するときに指定する必要はありません。 また、 symbol



を使用して作成された要素はレンダリング中に表示されるため、作成されたスプライトの視覚的な制御が簡単になります。 それ以外の場合、このメソッドの適用はdefsモードと変わりません。

使用例

 <svg width="50" height="50"> <use xlink:href="#ei-archive"></use> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

利点 ：前のモードと同様（色とサイズの簡単な変更）。

短所 ：アイコンを挿入するための補助メカニズムも必要です。 ただし、このモードにはdefsメソッドの他の欠点はありません。

表示モード

この方法は、ドキュメント自体にドキュメントの名前付きビューポートを作成する機能に基づいています。 これは、 viewタグを使用して行われます 。 この方法で作成されたスプライトは、2つの方法で使用できます。

最初のモードの通常の背景画像のように

 <i class="svg-ei-archive">ei-archive</i>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フラグメント識別子が埋め込まれた別個の画像として

 <img src="sprites.svg#ei-archive" width="50" height="50>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私の意見では、それは非常に便利です。 状況に応じて、同じアイコンを画像と背景の両方にすることができます。 現在、iOS 9.xではフラグメント識別子のサポートが完全に欠落していますが、以前のバージョンでは部分的なサポートがありました。

利点 ：アイコンを背景と画像の両方に使用できます。 画像として使用する場合、サイズ変更は簡単です。

マイナス ：現時点でiOSの問題をサポートします。 任意のサイズのブロックの背景として設定することはできません。 CSSを使用して色を変更する方法はありません。

スタックモード

このメソッドも名前付きビューポートを使用しますが、Photoshopのレイヤーのように、ビューポートを上下に並べます。 各領域はデフォルトで非表示になっており、フラグメント識別子を介して参照されると表示されます

 :root>svg {display:none} :root>svg:target {display:block}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、2つの使用方法もあります。

背景画像として

 .svg-ei-archive { background: url(sprites.svg#el-archive) no-repeat 50% 50%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

通常の画像のように

 <img src="sprites.svg#ei-archive" width="50" height="50>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、ブラウザサポートの状況は、以前の方法よりも少し悪くなります。 iOS 9のサポートの欠如に加えて、バージョン48までのChromeの背景画像ではフラグメント識別子が機能しません。 ただし、将来、サポートのある状況が改善されると、この方法は非常に一般的になる可能性があります。これは、制限なしで背景と画像の両方に同じアイコンを使用できるためです。

利点 ：前の方法と似ていますが、使用方法に応じてサイズ変更の制限がありません。

短所 ：現時点でのブラウザーサポートの問題。 CSSを使用して色を変更する方法はありません。 メソッドの特性により、すべてのアイコンはデフォルトで非表示になっているため、完成したスプライトを視覚的に評価することは困難です。

ボーナスモードinline-css

このメソッドはsvg-spriteライブラリの標準的な方法ではありませんが、それに基づいて作成できます。 その意味は、data-urlを介してファイルスタイルにアイコン自体を埋め込むことです。 svg-spriteライブラリは、出力テンプレートをカスタマイズする十分な機会を提供し、アイコン自体のソースコードへのアクセスを提供します。 したがって、次のコードを生成する独自のテンプレートを作成することができます。

 .el-archive { background: url("data:image/svg+xml;[icon-data]"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、実際には、この問題を最初から解決することは不可能であり、質問にはさらに詳細な検討が必要です。

結論として

提示されたメソッドは、SVGスプライトを作成するための唯一のものではありません。 他の、よりエキゾチックなオプションに出会いました。 どの方法が最適かは、使用可能なアイコンのセットと必要なカスタマイズのオプションに基づいて決定する必要があります。 私の意見では、CSSモードとシンボルモードは、実稼働ですぐに使用できると考えることができます。