図遠位便利な使用SVGスプライト

：より多くのコードの詳細github.crmeb.net/u/LXTは、

簡単な紹介

原因に関係なく、どのような状況下で、SVGベクトル自体の性質のために、アイコンが明確であり、異なるサイズと異なる解像度に適合させることができます。ぼかしやギザギザを心配しないでください。アイコンの塗りつぶしの色を変更しながら。

図CSSスプライトとスプライトSVGマップ

CSSは、伝統的なアイコン画像アイコンやフォントのアイコンに分けることができます。

絵のアイコンが画像にすべてのアイコンを統合して、アイコンを配置することにより、それらを取得することです。シンプルな管理の利点、少ないネットワーク要求。欠点は、高画素の画面アイコンと周囲のコンテンツに比べて、より不鮮明になることである。固定されたサイズ、最もスタイルを変更することができない、単一のアイコンを使用して、限定されたシナリオ。
比較的フォントアイコンを言えば、はるかに良いでしょう。基本的な原理は、アイコン、アイコン、フォントはCSSを使用して、フォントイメージとして定義されていることである@フォントフェースカスタムフォントは、指定されたアイコンを示すアイコンフォント、再利用のフォントファミリと文字コードを導入しました。

@font-face {
    font-family: 'iconfont';
    src: url(/res/icon2.ttf) format('truetype');
}
.icon2 {
    font-family: 'iconfont';
}

利点は、フォントの色やアイコン（フォントサイズ）のサイズ、より少ないネットワーク要求アイコン修正することができます。欠点は、アイコンを追加することで、ギザギザにアイコンを大きくすることができる、あまりにも面倒です。SVGアイコン、フォントと比較すると、アイコンがスタイルプロパティは非常に限られて変更することができます。

より多くのスタイルを動的に変更することが可能と絵のアイコンやフォント、アイコンに関しては、SVGのアイコンは、明確な無限にスケーラブルを維持することができます。

コード内のHTMLコード内のSVG SVGアイコンはSVGアイコン、リンク・ノードに存在するのではなく、それのスタイルを変更するための前提条件である参照、です。しかし、それは直接コードアップSVGを使用する必要性を追加しますが、すべてのアイコンを管理するための固定の場所を持って、単にIdで直接使用されている必要が参照するためのID、各アイコンを定義していませんことができます。アイコンの使用は最も重要なことは、あなたがSVGのアイコンと一元管理を再利用することができている間使用は、ビジネスのコードの可読性に複雑なSVGコードによって影響されることはありませんになります。

SVGは、<記号>、<使用>でSVGを持つ2つの主要なサブレーベル、それに関連して行うことができます。

シンボルラベル

図は、SVGを使用してスプライト、<記号>タグは、コンテンツアイコンを定義します。

それは何のシンボル要素ですか？

要素は、グラフィカルシンボルテンプレートオブジェクトを定義し、我々は、単に定義をレンダリングしない、自身が属するSVG後または<使用>参照によって、すなわち他のSVG <使用>要素タグのインスタンスのアイコン、によって定義することができますレンダリングされるように。アニメーションを含む要素を描画任意のSVGを追加することができ、しかし<DEFS>含まれていないシンボルは、これらの特性を提供することができる<SVG>タグラベルで塩基とSVGに加えて、ほぼ同一のビューボックスを表示しません。

我々は、各シンボルに代わって、アイコン、アイコンを定義するとき。表示されていないことに加えて、全体を<シンボル>は、完全なSVGのアイコンです。

 <svg>
    <symbol id="svg-test" viewBox="0 0 26 26">
        <desc>居中对齐</desc>
        <path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5,6,8S6.5,9,7,9z"/>
        <path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>
        <path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>
    </symbol>
    
    <symbol id="svg-tool-stroke-5" viewBox="0 0 30 16" >
        <desc>描边5</desc>
        <rect x="-10" y="6" width="7" height="2"/>
        <rect x="-1" y="6" width="2" height="2"/>
        <rect x="3" y="6" width="7" height="2"/>
        <rect x="12" y="6" width="2" height="2"/>
        <rect x="16" y="6" width="7" height="2"/>
        <rect x="25" y="6" width="2" height="2"/>
        <rect x="29" y="6" width="7" height="2"/>
        <rect x="38" y="6" width="2" height="2"/>
    </symbol>
</svg>

ノートに定義することができない、という<DEFS>は、そのスタイルアイコンのデザインやテクスチャ勾配等の場合には、必要性のSVG <シンボル>の前に配置され、その後、これらのコンテンツを定義するSVGでいっぱい。その後に<シンボル>を参照してください。

<svg id="defs-svg">
    <linearGradient id="linear-gradient" x1="0.122" y1="0.147" x2="0.902" y2="0.872" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#f4d039"/>
      <stop offset="1" stop-color="#f73"/>
    </linearGradient>
</svg>

<svg id="sym-svg">
    <symbol id="svg-tool-rect" viewBox="0 0 30 16" >
        <desc>矩形</desc>
        <rect x="0" y="0" width="24" height="14" fill="url(#linear-gradient)"/>
    </symbol>
</svg>

フロントを使用してSVGアイコンで定義する必要があり、すなわち、<記号>

<使用>タグの前にあるラベルに必ず、私たちは、文書全体の流れは、我々が定義されたアイコン上のどこにでも使用できることを保証し、ドキュメントフローのヘッダにアイコンの一般的な定義を紹介します。アイコンとして扱わ同時に表示されていません。＃ドキュメントの流れにDEFS-のSVG SVGは、このようなもののようなメスフィルタ効果の後に隠された、隠されたことはできません使用することができない、それは一般的に0に幅と高さのセット、最も低いレベルです。＃1 SYM-SVGは隠された後にアイコンが印象に使用することはありません、非表示にすることができます。

ラベルを使用

<用途>タグは、タグの参照である、ノードIDによって<DEFS>の定義内の要素を参照することができ、参照は、<記号>タグであってもよいです。

ラベルを使用する2つの効果があります。

1、繰り返し呼び出し

2、クロスSVGコール

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>

<!-- 直接调用上一节定义好的symbol -->
<svg width="500" height="110"><use xlink:href="#svg-tool-rect" x="50" y="100" /></svg>

<用途>使用中のSVGアイコンの重要な原則である、我々はすべてのSVG、統一された治療アイコンSVGで定義することができます。あなたが使用して、SVGを再作成後、使用したい場合は、アイコンラベルを呼び出します。

この方法の利点は、あなたが、アイコンのコードの再利用を減らすアイコンコードビジネスコードへの影響を減らすことができるということです。

SVGアイコンのスタイルを変更します

私たちは、SVGアイコンを<使用>タグを介して追加、あなたがなど塗りつぶし、ストローク、などいくつかのスタイルSVGを変更し、スタイルの継承を通じて、子要素にプロパティ値を継承し、ひいてはロール変更アイコンのスタイルを再生することができます。

塗りつぶしの色を変更するには、最初のシンボルで定義されたアイコンが自分のラベルに色、そして私たちはSVGを使用する場合、直接塗りつぶしを変更することはできません、塗りつぶしの色の値は、内部に行くことを継承しています。使用時には、我々は、色が定義されている記号は、変更することはできません。

<svg>
    <symbol id="svg-test" viewBox="0 0 26 26">
        <desc>居中对齐</desc>
        <path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5,6,8S6.5,9,7,9z"/>
        <path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>
        <path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>
    </symbol>
</svg>

<svg fill="red">
    <use xlink:href="#svg-test"/>
</svg>
<svg fill="blue">
    <use xlink:href="#svg-test"/>
</svg>

複数の色のアイコンを変更する方法

知ることは上記の説明によれば、上記方法によれば、一つの色のアイコンを変更することが可能です。もちろん、複数の色を提供することができます。ここでは、CSSのカスタム属性CSSカスタムプロパティを使用します

充填するアイコンコード、パターン色内部<記号>に変更する必要があります。var（ - * [、デフォルト]）を形成します。

<symbol id="icon-flag" width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" style="fill: var(--color0, #008d46)" />
    <rect width="1" height="2" x="1" style="fill: var(--color1, #fff)"/>
    <rect width="1" height="2" x="2" style="fill: var(--color2, #d2232c)"/>
</symbol>

CSSスタイルの定義

.flag-belgium {
    --color0: #201b18;
    --color1: #f1ee3d;
    --color2: #dc352f;
}

<svg class="icon">
    <use xlink:href="#icon-flag"/>
</svg>
<svg class="icon flag-belgium">
    <use xlink:href="#icon-flag"/>
</svg>

<記号>タグ塗りつぶしの色を取得する最初の取得色-color、色値が取得されたデフォルトのカラー値を存在しない場合。

これは、SVGスプライトのフィギュアを作るの原則、主に2つのステップを必要とする、1つのステップは、テンプレート、アイコン、カスタムを使用することで、ステップを追加]アイコンを使用する方法です。SVGのアイコン最も厄介で、設計者は、一般的にのみSVGのアイコンを提供し、この1つのアイコンのカスタムで、<シンボル>コードを提供しませんが、手動で更に多くのビットマップアイコンのトラブルを使用するよりもあるSVGコードを、変更をお願いする必要があります。そうすることがあればもちろん、あなたはSVG画像に自動的にデザイナーにスクリプトを書くことができます。<シンボル>コードに変換します。これは、より心配します。

転載：https://juejin.im/post/5cff812ae51d4510aa0114e4

図遠位便利な使用SVGスプライト

おすすめ