SVGローダー：外部SVGを使用する別の方法

SVGは素晴らしいです。それらは小さく、あらゆるスケールでシャープに見え、別のファイルを作成せずにカスタマイズできます。ただし、今日のWeb標準には欠けていると感じるものがあります。フォーマットのカスタマイズパワーも保持する外部ファイルとしてそれらを含める方法です。

たとえば、Webweblogo.svgとして保存されているWebサイトのロゴを使用したいとします。あなたがすることができます：

 <img  src="/images/logo.svg" alt="SVGローダー：外部SVGを使用する別の方法" >

あなたのロゴがどこでも同じように見えるなら、それは問題ありません。しかし、多くの場合、同じロゴの2〜3のバリエーションがあります。たとえば、Slackには2つのバージョンがあります。

上記のロゴの塗りつぶし色をカスタマイズする方法があれば、任意の色を渡してすべてのバリエーションをレンダリングすることができます。

アイコンのケースも考えてください。あなたはこのようなことをしたくないでしょうか？

 <img  src="/icons/heart-blue.svg" alt="SVGローダー：外部SVGを使用する別の方法" >
<img  src="/icons/heart-red.svg" alt="SVGローダー：外部SVGを使用する別の方法" >

外部SVGをインライン要素としてロードします

これに対処するために、SVG-Roaderというライブラリを作成しました。簡単に言えば、XHRを介してSVGファイルを取得し、インライン要素としてロードして、インラインSVGのようにフィルやストロークなどのプロパティをカスタマイズできます。

たとえば、サイドプロジェクトのsvgboxにロゴがあります。バリエーションごとに異なるファイルを作成する代わりに、1つのファイルを使用して、塗りつぶし色をカスタマイズできます。

Data-SRCを使用して、SVGファイルのURLを設定しました。 Fill属性は、元のSVGファイルの塗りつぶしをオーバーライドします。

ライブラリを使用するには、私が確実にしなければならない唯一のことは、提供されるファイルにはXHRが成功するための適切なCORSヘッダーがあることです。ライブラリはまた、ファイルをローカルでキャッシュし、その後のより速くなります。最初の負荷であっても、パフォーマンスはタグの使用に匹敵します。

この概念は新しいものではありません。 SVG-Injectは同様のことをします。ただし、SVG-Loaderは、コードのどこかにライブラリを含める必要があるため（<script>タグを介して、またはjavaScriptバンドルのいずれか）ため、使いやすいです。追加のコードは必要ありません。</script>

動的に添加された要素と属性の変更も自動的に処理され、すべてのWebフレームワークで動作することが保証されます。これがReactの例です：

しかし、なぜ？

このアプローチは、JavaScriptの依存関係を導入し、インラインや外部ソースを含むSVGを使用する複数の方法がすでにあるため、非正統派を感じるかもしれません。しかし、この方法でSVGを使用するための良いケースがあります。一般的な質問に答えて、それらを調べてみましょう。

SVGをインライン化するだけではありませんか？

インラインは、SVGを使用する最も簡単な方法です。 HTMLのSVGコードをコピーして貼り付けるだけです。それがSVGローダーが最終的に行っていることです。それでは、なぜ他の場所からSVGファイルをロードするために追加の手順を追加するのですか？ 2つの主な理由があります。

1. インラインSVGはコードを冗長にします： SVGは数行から数百の範囲になります。インラインSVGは、必要なものがいくつかのアイコンであり、それらがすべて小さくなった場合、うまく機能します。しかし、それらがかなり大きい場合や多くの場合、それは大きな痛みになります。なぜなら、それらは「ビジネスロジック」ではないコードのテキストの長い文字列になるからです。コードを解析するのが難しくなります。
   
   

2. 外部SVGの方がはるかに便利です。コピーと貼り付けはしばしばジョブを行いますが、外部SVGは非常に便利です。アプリで使用するアイコンを実験しているとします。インラインSVGを使用している場合、SVGコードを取得するために行き来することを意味します。ただし、外部SVGを使用すると、ファイルの名前を知る必要があります。
   
   この例を見てください。 GitHubで最も広範なアイコンリポジトリの1つは、マテリアルデザインアイコンです。 SVGローダーとUNPKGを使用すると、すぐに5,000個のアイコンのいずれかの使用を開始できます。

スプライトを作成するのに対して、すべてのSVGのHTTP要求をトリガーすることは非効率的ではありませんか？

あまり。 HTTP2を使用すると、HTTPリクエストを行うコストの関連性が低下しています。はい、バンドルの利点（たとえば、より良い圧縮）がありますが、非ブロッキングリソースとXHRの場合、プロは実際のシナリオではほとんど存在しません。

上記と同様の方法で50個のアイコンをロードするペンです。 （ファイルがデフォルトでキャッシュされているため、シークレットモードで開きます）：

タグ（SVGシンボル）はどうですか？

SVGシンボルは、SVGファイルの定義を使用から分離します。どこでもSVGを定義する代わりに、次のようなものを持つことができます。

 <svg>
  <xlink></xlink>
</svg>

問題は、サードパーティのドメインでホストされているシンボルファイルを使用してブラウザをサポートしていないことです。したがって、私たちはこのようなことをすることはできません：

 <svg>
  
</svg>

Safariは、同じドメインでホストされているシンボルファイルさえサポートしていません。

SVGを誘惑するビルドツールを使用できませんか？

局所的に保存されているSVGファイルをインラリングするために存在しますが、WebpackやGruntのような一般的なバンドラーにSVGをフェッチし、それらをインライン化する明白な方法を見つけることができませんでした。これを行うプラグインが存在していても、バンドラーのセットアップはまったく簡単ではありません。実際、私はプロジェクトが複雑さの確実なレベルに達するまで、それらを使用することをしばしば避けます。また、インターネットの大部分がWebpackやReactのようなものにとっては異質であることを認識しなければなりません。シンプルなスクリプトは、はるかに広い魅力を持つことができます。

 <object data="https://unpkg.com/

ただし、欠点は、同じドメインでホストされていない限り、SVGの属性をカスタマイズできないことです（および