How to load SVG in Webpack

This article mainly introduces the actual method of loading SVG with Webpack. Now I will share it with you and give you a reference.

As a standard format for vector graphics, SVG has been supported by major browsers, and it has also become synonymous with vector graphics on the Web. Using SVG instead of bitmaps in web pages has the following benefits:

1. SVG is clearer than bitmaps and will not destroy the clarity of graphics under arbitrary scaling. SVG can facilitate It effectively solves the problem of unclear image display on high-resolution screens.

2. When the graphic lines are relatively simple, the size of the SVG file is smaller than the bitmap. Today, when flat UI is popular, SVG will be smaller in most cases.

3. SVG with the same graphics has better rendering performance than the corresponding high-definition graphics.

4. SVG uses XML syntax description consistent with HTML, and is highly flexible.

The drawing tool can export .svg files individually. The import method of SVG is similar to that of images. It can be used directly in CSS as follows:

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

Also Used in HTML:

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

That is to say, the SVG file can be used directly as a picture, and the method is exactly the same as when using pictures. Therefore, the two methods introduced in 3-19 Loading Images using file-loader and using url-loader are equally effective for SVG. You only need to change the file suffix in the Loader test configuration to .svg. The code is as follows:

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

Since SVG is a text format file, there are other methods besides the above two methods, which will be explained one by one below.

Use raw-loader

raw-loader can read the contents of the text file and inject it into JavaScript or CSS.

For example, write this in JavaScript:

import svgContent from './svgs/alert.svg';

The output code after raw-loader processing is as follows:

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

That is to say, the content of svgContent is equal to the string form SVG, since SVG itself is an HTML element, after obtaining the SVG content, you can directly insert the SVG into the web page through the following code:

window.document.getElementById('app').innerHTML = svgContent;

The relevant Webpack configuration when using raw-loader is as follows:

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

Since raw-loader will directly return the text content of SVG and cannot display the text content of SVG through CSS, SVG cannot be imported into CSS after using this method. That is to say, code such as background-image: url(./svgs/activity.svg) cannot appear in CSS, because background-image: url(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948) is illegal of.

This example provides the complete code of the project

Using svg-inline-loader

svg-inline-loader and the raw-loader mentioned above are very Similar, but the difference is that svg-inline-loader will analyze the content of SVG and remove unnecessary code to reduce the file size of SVG.

After using drawing tools such as Adobe Illustrator and Sketch to create SVG, these tools will generate unnecessary code for the web page to run when exporting. For example, the following is the SVG code exported by Sketch:

<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>

After being processed by svg-inline-loader, it will be streamlined into the following:

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

In other words, svg-inline-loader has been added Compression function for SVG.

The relevant Webpack configuration when using svg-inline-loader is as follows:

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['svg-inline-loader']
   }
  ]
 }
};

This example provides the complete code of the project

The above is what I compiled for everyone, I hope it will be useful to you in the future Everyone is helpful.

Related articles:

How to integrate vux in vue.js to implement pull-up loading and pull-down refresh

Related vue projects in webpack Resource file reports 404 problem (detailed tutorial)

Use webpack vue2 for project construction

About how to implement secondary linkage in vue, the default selection is A value

Using ui-route to implement multi-layer nested routing in AngularJS (detailed tutorial)

The above is the detailed content of How to load SVG in Webpack. For more information, please follow other related articles on the PHP Chinese website!