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

  1. SVG is cleaner than bitmaps and can be scaled at any size without destroying the sharpness of the image. SVG is a convenient solution to the problem of blurred images on high-resolution screens.
  2. In cases where graphic lines are simple, SVG files are smaller than bitmaps, and in these days of flat UIs, SVG is much smaller.
  3. SVG with the same graphics has better rendering performance than their HD counterparts.
  4. SVG uses the same XML syntax as HTML and is highly flexible.

SVG files can be exported using the drawing tool. SVG is imported in a similar way to images, and can be used directly in CSS like the following:

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

Can also be used in HTML:

<img src="./svgs/activity.svg"/>
Copy the code

This means that you can use an SVG file directly as an image in exactly the same way that you would use an image. So the two methods described in loading images 3-19 using file-loader and using url-loader are equally valid for SVG. Just change the file suffix in the loader test configuration to.svg, and the code is as follows:

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

Since SVG is a text file, there are other ways to do this, and I’ll explain them all.

Use raw – loader

Raw-loader can read the contents of text files and inject them into JavaScript or CSS.

For example, write this in JavaScript:

import svgContent from './svgs/alert.svg';
Copy the code

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

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // omit the SVG content at the end
Copy the code

That is, the content of svgContent is equal to the SVG as a string. Since SVG itself is an HTML element, after obtaining the SVG content, you can insert SVG directly into a web page with the following code:

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

The Webpack configuration is as follows:

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

The RAW-loader directly returns the SVG text content and cannot display the SVG text content through CSS. Therefore, SVG cannot be imported into CSS using this method. Background-image: url(./ SVGS /activity.svg); background-image: url(< SVG >…
) is illegal.

This example provides the complete code for the project

Using SVG – the inline – loader

Svg-inline-loader is very similar to the raw-loader mentioned above, except that svG-inline-Loader analyzes SVG content and removes unnecessary code to reduce SVG file size.

When SVG is created using drawing tools such as Adobe Illustrator and Sketch, these tools generate code that is not necessary for the web to run when exported. As an example, here is the code for SVG exported with Sketch:

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

After being processed by SVG-inline-loader, it will be condensed to the following:

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

This means that SVG-inline-loader adds compression for SVG.

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

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

This example provides the complete code for the project

Easy to Understand Webpack online reading link

Read the original