ホームページ > 記事 > ウェブフロントエンド > Webpack が実際に SVG をロードする方法の詳細な例

Webpack が実際に SVG をロードする方法の詳細な例

小云云オリジナル: 2017-12-27 13:15:391337ブラウズ

この記事では、Webpack を使用して SVG を読み込む実践的な方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

SVG はベクターグラフィックスの標準形式として主要なブラウザーでサポートされており、Web 上のベクターグラフィックスの代名詞ともなっています。 Web ページでビットマップの代わりに SVG を使用すると、次のような利点があります。

SVG はビットマップよりも鮮明で、任意のスケーリングでもグラフィックスの鮮明さを損なうことはありません。 SVG は、高解像度の画面上の画像を簡単に解決できます。
グラフィック線が比較的単純な場合、SVG ファイルのサイズはビットマップよりも小さくなります。フラット UI が普及している現在、SVG のサイズはほとんどの場合小さくなります。
同じグラフィックスの SVG は、対応する高解像度グラフィックスよりもレンダリングパフォーマンスが優れています。
SVG は、HTML と一致する XML 構文記述を使用しており、非常に柔軟です。

描画ツールは、.svg ファイルを 1 つずつエクスポートできます。SVG のインポート方法は、次のように CSS で直接使用することもできます。 HTML 内:

body {
 background-image: url(./svgs/activity.svg);
}

つまり、SVG ファイルを直接画像として使用でき、方法は画像を使用する場合とまったく同じです。したがって、「3-19 file-loader を使用した画像の読み込み」と「url-loader を使用した画像の読み込み」で紹介した 2 つの方法は、SVG に対して同様に効果的です。必要なのは、Loader テスト設定のファイル接尾辞を .svg に変更することだけです。

<img src="./svgs/activity.svg"/>

SVGはテキスト形式のファイルなので、上記2つの方法以外にも方法がありますので、以下に一つずつ説明していきます。

raw-loader を使用します

raw-loader を使用して、テキストファイルの内容を読み取り、JavaScript または CSS に挿入します。

たとえば、これを JavaScript で記述します:

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg/,
    use: [&#39;file-loader&#39;]
   }
  ]
 },
};

raw-loader 処理後の出力コードは次のとおりです:

import svgContent from &#39;./svgs/alert.svg&#39;;

つまり、svgContent のコンテンツは文字列形式の SVG と同じです。、SVG 自体は HTML 要素であるため、SVG コンテンツを取得した後、次のコードを通じて SVG を Web ページに直接挿入できます:

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 内容

raw-loader を使用する場合の関連する Webpack 構成は次のとおりです:

window.document.getElementById(&#39;app&#39;).innerHTML = svgContent;

raw-loader は SVG のテキストコンテンツを直接返すため、CSS を介して SVG のテキストコンテンツを表示することはできません。そのため、このメソッドを使用した後、SVG を CSS にインポートすることはできません。つまり、background-image: url(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948) は違法であるため、background-image: url(./svgs/activity.svg) のようなコードは CSS に含めることができません。。

この例はプロジェクトの完全なコードを提供します

svg-inline-loaderの使用方法

svg-inline-loaderは上記のraw-loaderと非常に似ていますが、違いはsvg-inline-loaderが分析することです。 SVG のコンテンツを削除して、SVG のファイルサイズを減らすためにコードの不要な部分を含めます。

Adobe Illustrator や Sketch などの描画ツールを使用して SVG を作成すると、これらのツールはエクスポート時に Web ページを実行するために不要なコードを生成します。たとえば、以下は Sketch でエクスポートされた SVG のコードです:

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: [&#39;raw-loader&#39;]
   }
  ]
 }
};

svg-inline-loader で処理された後、次のように合理化されます:

<svg class="icon" verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
   stroke="#000">
 <circle cx="12" cy="12" r="10"/>
</svg>

つまり、svg- inline-loader は SVG 圧縮機能のサポートを追加します。

svg-inline-loader を使用する場合の関連する Webpack 構成は次のとおりです:

<svg viewBox="0 0 24 24" stroke="#000"><circle cx="12" cy="12" r="10"/></svg>

この例では、プロジェクトの完全なコードが提供されます

Webpack が実際に SVG をロードする方法の詳細な例

関連記事