精灵图svg icon区别

Posted 2023-05-09

参考技术A 主要有以下几点区别：
1、渲染方式不同：icon font采用的是字体渲染；SVG是图形渲染。
2、icon font只能支持单色图形；SVG可以多色图形。
icon font可读性不好，icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好。

Webpack SVG 渐变问题

【中文标题】Webpack SVG 渐变问题

【英文标题】：Webpack SVG gradient issues

【发布时间】：2021-02-07 08:44:41

【问题描述】：

我正在尝试使用 webpack 和 svg-spritemap-webpack-plugin 构建 svg 精灵。虽然它使用常规 svg 构建漂亮的精灵，但它不会渲染带有渐变的 svg，我不明白为什么。

与精灵生成相关的 webpack 配置：

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', 
      output: 
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: true,
        svgo: 
          plugins: [
             inlineStyles:  onlyMatchedOnce: false  ,
             minifyStyles: true ,
             cleanupIDs:  minify: false 
          ]
        
      ,
      sprite: 
        prefix: false
      
    ),

我正在尝试使用的 svg 图标：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-35.2988" y1="646.7559" x2="-35.2988" y2="623.7559" gradientTransform="matrix(22.2609 0 0 -22.2609 1041.7826 14397.3477)">
    <stop  offset="0" style="stop-color:#1AD6FD"/>
    <stop  offset="1" style="stop-color:#1D67F0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M367.304,133.565H11.13c-6.144,0-11.13,4.986-11.13,11.13V500.87
    C0,507.014,4.986,512,11.13,512h356.174c6.144,0,11.13-4.986,11.13-11.13V144.696C378.435,138.552,373.448,133.565,367.304,133.565
     M512,11.13v356.174c0,6.144-4.986,11.13-11.13,11.13h-89.043c-6.144,0-11.13-4.986-11.13-11.13v-244.87
    c0-6.144-5.009-11.13-11.13-11.13h-244.87c-6.144,0-11.13-4.986-11.13-11.13V11.13c0-6.144,4.986-11.13,11.13-11.13H500.87
    C507.014,0,512,4.986,512,11.13"/>
</svg>

似乎它已正确传递给精灵（带有渐变和正确的 id），但当我尝试使用它时，我仍然看到一个盲点而不是图标。

另外，这个问题似乎与 svgo 及其设置无关。如果我从我的配置中删除 svgo 和 svg4everybody，我仍然看不到图标（而其他具有仅填充样式的图标可见）

【参考方案1】：

通过svg4everybody的附加设置解决了这个问题：

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', 
      output: 
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: 
           polyfill: true // this line makes things work
        ,
        svgo: 
          plugins: [
             inlineStyles:  onlyMatchedOnce: false  ,
             minifyStyles: true ,
             cleanupIDs:  minify: false 
          ]
        
      ,
      sprite: 
        prefix: false
      
    ),

【参考方案2】：

我不能真正评论 Webpack，不使用它，但严格来说，您的 linearGradient 标签应该在 defs 标签内，以 100% 符合 SVG 1.1 规范。

您可以尝试的另一件事是使用完整的打开和关闭标签，以便 <.path>... （此处不显示点）而不是简写一个 。验证器通常会被短标记的标签阻塞，因为对于严格的 SVG/XML 解析器来说，这并不是真正合适的层次结构。考虑到这一点，您也可以尝试放弃 xml 标签。