The preface,

Why choose SVG as the preferred format for your website's icon system?

1. Scalable vector graphics, the image quality will not be lost in the case of enlarging or changing the size;

2. It is a world Wide Web Consortium standard and a W3C recommendation

1. What is SVG?

Scalable vector graphics is a graphics format used to describe two-dimensional vector graphics based on extensible Markup Language (EXTENSIBLE Markup Language), a subset of the standard Universal Markup Language. It is an open standard developed by the World Wide Web Consortium.

Scalable Vector Graphics

Simple to understand, it is another format of graphics, and common image formats. PNG,. JPG,.gif and so on.

2. History and advantages of SVG

History of SVG

  • SVG 1.0 was released on September 4, 2006
  • On January 4, 2003, SVG 1.1 was released
  • January 14, 2003: SVG Mobile sub-versions: SVG Tiny and SVG Basic
  • SVG Tiny 1.2 was released on 22 December 2008
  • On 16 August 2011, SVG 1.1 (version 2) was released as the current W3C recommendation
  • The W3C is still working on SVG 2

The advantages of using SVG over other image formats are:

  • SVG can be read and modified by a wide variety of tools (such as Notepad)
  • SVG is smaller and more compressible than JPEG and GIF images.
  • SVG is scalable
  • SVG images can be printed with high quality at any resolution
  • SVG can be enlarged without degrading image quality
  • Text in SVG images is optional and searchable (great for making maps)
  • SVG can work with Java technology
  • SVG is an open standard
  • SVG files are pure XML

3. SVG browser compatibility problem?

A picture is worth a thousand words

4.svg VSWhat’s different about traditional image formats?

  1. Compatible with existing picture capabilities and vector support

    SVG offers a feature set that includes the ability to nest transformations, clipping paths, Alpha channels, filter effects, and more. It also has vector capabilities that traditional images do not have, making it very clear on any HD device.

  2. Good readability, conducive to SEO and accessibility

    Since SVG uses XML syntax, the text content in graphics can be directly read by browsers, search engine SEO and screen reader software. The specific usage code is as follows to set title and DESC tags

5.svg VSIconfont iconfont?

SVG iconfont
Magnification is not blurred, no jagged The browser thinks it’s text and the icon is anti-aliased. May result in the icon being as sharp as expected.
Can control various parts of the icon, using SVG-specific CSS properties, multi-color icon Control the size through CSS (yesfont-size)color, shadows, rotation, etc.
SVG is just its size Insert by pseudo-element, and that depends online-height.vertical-align.letter-spacing.word-spacing, what font font design (does it naturally have space around it? Does it have kerning information?) . And then the pseudo-elementdisplayType affects whether these attributes are valid or not.
Browsers support SVG, interceptors don’t care about SVG AD blocker provides complete blocking of custom fonts. Some browsers prevent the icon font from loading, causing the site to fail to display
Semantically, ICONS are small images. semantically<svg>“I am an image.” No semantic

The Web has gone through 30 years from 1989 to 2019, and the use of Web ICONS has also experienced corresponding development:

  1. ICONS were first referenced via the IMG tag (one file per icon)
  2. In order to save requests, the concept of Sprites was proposed, which combines multiple ICONS together, using a single image file, with background-related properties to implement the ICONS
  3. After all, images are bitmaps, which make it easier to control the color and size of ICONS on multiple devices, so we started to use Icon Font to make Web ICONS
  4. Of course, the font icon is to solve a lot of problems, but each time for the use of different ICONS, the need to customize the font, but also to load the corresponding font file, the corresponding also brought certain problems, such as cross-domain problems, font loading problems
  5. As SVG became more and more supported, people started thinking about SVG and using SVG to make ICONS. This technology can solve most of the problems we’ve encountered before, especially when it comes to many end devices
  6. SVG is a bit like IMG, and we can splice all SVG ICONS together with tags and tags, similar to Sprites, but called SVG Sprites here
  7. SVG ICONS also have the advantage of being able to control the color of ICONS directly in THE CSS code

SVG optimization Toolgithub.com/svg/svgo

SVG files exported from vector tools often contain a lot of unnecessary data, such as editor metadata, comments, hidden elements, and other content that can be safely removed without affecting SVG rendering results.

Node.js must be installed before installing the tool

www.npmjs.com/package/svg…

npm install -g svgo
svgo  xxx.svg
Copy the code

svg-spriteEngineering construction

Gulp configuration is as follows; Other engineering build tools have similar tools.

const gulp = require('gulp');
const path = require('path');
const svgmin = require('gulp-svgmin')
const svgstore = require('gulp-svgstore');
const cheerio = require('gulp-cheerio');


gulp.task(`svg-sprite`.function () {
  return gulp
      .src(`./assets/src/images/svg/**/*.svg`)
      .pipe(cheerio({
          run: function ($) {$('[class]').removeAttr('class');
          },
          parserOptions: { xmlMode: true }
      }))
      .pipe(svgmin(function (file) {
          var prefix = path.basename(file.relative, path.extname(file.relative));
          return {
              plugins: [{
                  cleanupIDs: {
                      prefix: prefix + The '-'.minify: true
                  }
              }]
          }
      }))
      .pipe(rename({prefix: 'icon-'}))
      .pipe(svgstore())
      .pipe(rename({prefix: 'icon-'}))
      .pipe(gulp.dest(`./assets/dist/images/svg`))})Copy the code

use

.icon-svg-pricing { font-size: 24px; fill: none; stroke: #7a8598; width: 1em; height: 1em; } // You can control some style or animation changes according to CSSCopy the code
<svg class="icon-svg-pricing">
	<use xlink:href="./assets/dist/images/svg/icon-svg-sprite.svg#icon-miniapp_live"></use>
</svg>
Copy the code

To be compatible with Internet Explorer, the relevant SVG compatibility library is introducedsvg4everybody

<script src="/path/to/svg4everybody.js"></script>
<script>svg4everybody(); // run it now or whenever you are ready</script>
Copy the code