Skip to content

SVG高清图像解决方案

Jump to bottom
Furic Zhao edited this page Jan 26, 2018 · 3 revisions

FEZ使用阿里IconFont平台推荐的Symbol方式在项目中使用SVG，这是一种全新的使用方式，是未来的主流，也是业界目前推荐的用法。Symbol具有如下特点：

  • 支持多色图标，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  • 但是兼容性较差，支持 ie9+,及现代浏览器。

在FEZ中开始使用

  • 在src/static/目录下创建svg目录
  • 将设计师导出的所有svg文件存放在src/static/svg/目录下
src
└── static
    └── svg
        ├── business.svg
        ├── camera.svg
        ├── filter.svg
        ├── graphics.svg
        └── machine.svg
  • 在项目的fez.config.js中开启svgSymbol配置
export default {
  svgSymbol: {
    available: true, //启用svg图标自动化symbol合并
    autoInject: true, //启用将合并后的symbol.svg自动化注入到html页面
  }
}
  • 在公共样式中添加如下样式：
.icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 normalize.css 中也包含这行 */
  overflow: hidden;
}
  • 执行gulp或gulp dist，FEZ会使用Symbol方式自动合并src/static/svg/目录下所有图标并自动插入到所有的html页面中
//所有html页面的body都会被插入Symbol后的svg内容
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="fez-business" viewBox="0 0 34 32"> <title>business2</title> <path fill="#9ef0de" d="M4.923 0h28.308v27.077h-28.308v-27.077z"/> <path fill="#20b997" d="M33.231 29.882h-3.084c-0.51 0-0.923 0.413-0.923 0.923s0.413 0.923 0.923 0.923h3.084c0.51 0 0.923-0.413 0.923-0.923s-0.413-0.923-0.923-0.923zM2.154 1.231v28.651h23.457c0.51 0 0.923 0.413 0.923 0.923s-0.413 0.923-0.923 0.923h-24.38c-0.51 0-0.923-0.413-0.923-0.923v-29.575c0-0.51 0.413-0.923 0.923-0.923s0.923 0.413 0.923 0.923zM19.077 27.222h-1.231v-13.068h1.231v13.068zM11.692 27.222h-1.231v-19.847h1.231v19.847zM26.462 27.222h-1.231v-24.768h1.231v24.768z"/> </symbol>
<symbol id="fez-camera" viewBox="0 0 34 29"> <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch --> <title>Group</title> <desc>Created with Sketch.</desc>  <g id="moto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="&#x573A;&#x666F;&#x9009;&#x62E9;" transform="translate(-34.000000, -180.000000)"> <g id="Group" transform="translate(35.000000, 181.000000)"> <path d="M10.1168607,4 L10.6536296,1.56881458 L10.6536296,1.56881458 C10.8559469,0.652459398 11.6681726,6.16474855e-16 12.6065963,4.4408921e-16 L12.6065963,0 L22.3934037,0 L22.3934037,4.4408921e-16 C23.3318274,2.71703565e-16 24.1440531,0.652459398 24.3463704,1.56881458 L24.8831393,4 L30,4 L30,4 C31.6568542,4 33,5.34314575 33,7 L33,24 C33,25.6568542 31.6568542,27 30,27 L5,27 C3.34314575,27 2,25.6568542 2,24 L2,7 L2,7 C2,5.34314575 3.34314575,4 5,4 L5,4 L10.1168607,4 Z M17.5,22 C21.6421356,22 25,18.6421356 25,14.5 C25,10.3578644 21.6421356,7 17.5,7 C13.3578644,7 10,10.3578644 10,14.5 C10,18.6421356 13.3578644,22 17.5,22 Z" id="Combined-Shape" fill="#FFDDA4"/> <path d="M30.4259259,15.4823495 L30.4259259,7.24074074 C30.4259259,5.64525146 29.1325263,4.35185185 27.537037,4.35185185 L22.6096897,4.35185185 L22.0928012,2.01071034 C21.8979771,1.12829424 21.1158338,0.5 20.2121665,0.5 L10.7878335,0.5 C9.88416617,0.5 9.10202291,1.12829424 8.90719883,2.01071034 L8.39031032,4.35185185 L3.46296296,4.35185185 C1.86747369,4.35185185 0.574074074,5.64525146 0.574074074,7.24074074 L0.574074074,23.6111111 C0.574074074,25.2066004 1.86747369,26.5 3.46296296,26.5 L27.537037,26.5 C29.1325263,26.5 30.4259259,25.2066004 30.4259259,23.6111111 L30.4259259,20.2924624" id="Combined-Shape" stroke="#F5A623" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <circle id="Oval" stroke="#F5A623" stroke-width="1.5" cx="15.5" cy="14.5" r="6.75"/> <circle id="Oval-2" fill="#F5A623" cx="24" cy="8" r="1"/> <path d="M12.6477536,17.9807881 C13.1164615,18.3653111 13.6642269,18.6570215 14.2629677,18.8278374 M15.5,10 C13.0147186,10 11,12.0147186 11,14.5 C11,15.1821861 11.151799,15.8289177 11.4234617,16.4082592" id="Oval" stroke="#F5A623" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </g> </symbol>
<symbol id="fez-filter" viewBox="0 0 32 32"> <title>filter</title> <path fill="#f23030" d="M31.259 3.123c0.399-0.426 0.097-1.123-0.486-1.123h-28.106c-0.583 0-0.885 0.696-0.487 1.122l11.816 12.638-0.059 13.57c-0.002 0.368 0.296 0.668 0.664 0.67s0.668-0.296 0.67-0.664l0.060-13.835-0.18-0.458-10.948-11.71h25.031l-10.973 11.709-0.18 0.456v13.835c0 0.368 0.298 0.667 0.667 0.667s0.667-0.298 0.667-0.667v-13.571l11.844-12.639z"/> </symbol>
<symbol id="fez-graphics" viewBox="0 0 34 32"> <title>graphics</title> <path fill="#ffd1eb" d="M17.974 10.967l9.9-9.9 6.034 6.034-9.972 9.972 7.199 7.371 1.529 5.648-5.987-1.556-20.992-20.992c-1.248-1.248-1.245-3.276 0.003-4.523 1.25-1.25 3.277-1.248 4.525-0.001l7.761 7.946zM17.933 23.076l-7.719 7.719-6.034-6.034 7.76-7.76 5.993 6.075z"/> <path fill="#ff54b2" d="M15.432 21.622l-5.28-5.28-1.861 1.861 2.596 2.596-0.754 0.754-2.596-2.596-2.446 2.446 2.596 2.596-0.754 0.754-2.596-2.596-2.603 2.603 5.28 5.28 8.418-8.418zM16.186 22.376l-8.795 8.795c-0.208 0.208-0.546 0.208-0.754 0l-6.034-6.034c-0.208-0.208-0.208-0.546 0-0.754l8.795-8.795-7.478-7.478c-1.56-1.56-1.558-4.094 0.003-5.654 1.561-1.561 4.096-1.561 5.659 0.002l7.44 7.508 9.276-9.276c0.208-0.208 0.546-0.208 0.754 0l3.611 3.611c0.208 0.208 0.208 0.546 0 0.754s-0.546 0.208-0.754 0l-3.234-3.234-2.516 2.516 2.596 2.596-0.754 0.754-2.596-2.596-2.446 2.446 2.596 2.596-0.754 0.754-2.596-2.596-2.432 2.432 5.256 5.304 9.303-9.303c0.208-0.208 0.546-0.208 0.754 0s0.208 0.546 0 0.754l-9.307 9.307 4.356 4.396c0.31 0.313 0.309 0.819-0.004 1.13l-2.522 2.513c-0.313 0.312-0.82 0.311-1.131-0.002s-0.311-0.82 0.002-1.131l1.957-1.95-17.989-18.153c-0.936-0.936-2.457-0.936-3.393 0.001s-0.937 2.457-0.003 3.391l20.838 20.838 4.486 1.166-0.769-3.2c-0.103-0.43 0.161-0.862 0.591-0.965s0.862 0.161 0.965 0.591l1.081 4.497c0.141 0.587-0.395 1.113-0.979 0.961l-5.987-1.556c-0.138-0.036-0.264-0.108-0.364-0.209l-6.726-6.726z"/> </symbol>
<symbol id="fez-machine" viewBox="0 0 36 32"> <title>machine</title> <path fill="#c6f29a" d="M28.69 10.38v16.103l-16.233-7.724h-5.271c-1.216 0-2.201-0.978-2.201-2.205v-4.418c0-1.218 0.982-2.205 2.201-2.205h5.553l15.95-7.724v8.173zM13.241 19.859v11.112h-4.414v-12.213l4.414 1.101z"/> <path fill="#71c812" d="M22.014 22.861l2.538 1.208v-14.793c0-0.457 0.371-0.828 0.828-0.828s0.828 0.371 0.828 0.828v16.103c0 0.608-0.634 1.009-1.183 0.747l-13.162-6.263v10.004c0 0.457-0.371 0.828-0.828 0.828h-4.414c-0.457 0-0.828-0.371-0.828-0.828v-11.385h-1.917c-1.676 0-3.029-1.352-3.029-3.032v-4.418c0-1.675 1.353-3.032 3.029-3.032h5.363l15.78-7.641c0.55-0.266 1.188 0.134 1.188 0.745v4.038c0 0.457-0.371 0.828-0.828 0.828s-0.828-0.371-0.828-0.828v-2.718l-2.526 1.223c0.028 0.066 0.043 0.139 0.043 0.215v11.565c0 0.305-0.247 0.552-0.552 0.552s-0.552-0.247-0.552-0.552v-11.266l-11.176 5.412c-0.112 0.054-0.236 0.083-0.361 0.083h-5.553c-0.76 0-1.374 0.615-1.374 1.377v4.418c0 0.766 0.612 1.377 1.374 1.377h5.271c0.123 0 0.245 0.027 0.356 0.080l11.463 5.455v-3.842c0-0.305 0.247-0.552 0.552-0.552s0.552 0.247 0.552 0.552v4.1c0 0.086-0.020 0.168-0.055 0.241zM10.207 19.076l-1.247-0.593h-1.511v10.558h2.759v-9.964zM32.987 21.25c-0.323 0.323-0.847 0.323-1.17 0s-0.323-0.847 0-1.17c3.555-3.555 3.555-9.319 0-12.874-0.323-0.323-0.323-0.847 0-1.17s0.847-0.323 1.17 0c4.202 4.201 4.202 11.014 0 15.215zM29.866 18.129c-0.323 0.323-0.847 0.323-1.17 0s-0.323-0.847 0-1.17c1.831-1.831 1.831-4.801 0-6.632-0.323-0.323-0.323-0.847 0-1.17s0.847-0.323 1.17 0c2.478 2.478 2.478 6.495 0 8.973z"/> </symbol>
</svg>
</body>
  • 在页面中直接使用SVG
<svg class="icon" aria-hidden="true">
  <use xlink:href="#fez-business"></use>
</svg>

样式中通过'font-size'和'color'来改变svg图像的大小及颜色。FEZ默认为添加fez-前缀，页面中使用图标时需要加上fez-前缀，可在高级配置中设置前缀。

高级配置

//fez.config.js
export default {
   /**
   * Svg图标symblo形式使用配置
   */
  svgSymbol: {
    available: true, //启用svg图标自动化symbol合并
    autoInject: true, //启用将合并后的symbol.svg自动化注入到页面

    /**
     * symblo配置参考：
     * https://github.com/Hiswe/gulp-svg-symbols#options
     */
    options: {
      id: 'fez-%f',
      class: '.fez-%f'
    }
  }
}
Clone this wiki locally