导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

转载自：https://www.yuque.com/gmyoon/dfy2l5/vmamwl

一、SVG 的几种使用方式

1. SVG as Img

首先，SVG 可以像 JPG，PNG，GIF 一样，作为图片文件去使用。

<img src="../../assets/branch.svg" alt="">

background-image: url("./assets/branch.svg")

不管是将它作为背景图片，或者是作为<img/>的src属性都可以。

2. SVG as Sprite

为了减少图片资源请求数量，会将大多数的小图标合并成雪碧图。

1、传统的做法

使用AI或者合并SVG图像，然后用background-postion。打开AI，新建一个30 * 60(px)的画布，设置好网格和参考线.。用AI打开svg文件，然后复制路径到画布上调整大小。

Untitled

其他就和css-sprite没有差异了。

.icon-bg {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
    vertical-align: middle;
}
.icon-facebook-logo {
    background-position: 0 0;
}
.icon-earth {
    background-position: 0 -30px;
}
.icon-like {
    background-position: 0 -60px;
}

html 中使用。

<p class="btn-group">
    <a href="#" class="btn btn-default"><span class="icon-bg icon-facebook-logo"></span></a>
    <a href="#" class="btn btn-default"><span class="icon-bg icon-earth"></span></a>
    <a href="#" class="btn btn-success"><span class="icon-bg icon-like2"></span></a>
</p>

效果如下，反正是不喜欢这样用

Untitled

2、Iconfont方式

https://cdn.nlark.com/yuque/0/2021/webp/21910163/1633763764498-b161c081-b455-4da1-b5cb-19703fe83317.webp

需要将你的 SVG 文件上传到iconfont，然后点击下载，就能得到合并好雪碧图。基本上现在只需要基于浏览器兼容性，推荐Symbol使用。

方案 Unicode Font class Symbol
兼容性 IE6+ IE8+ IE9+
特点 渲染效果不及后两种 上手容易，书写直观 面向未来

3. SVG in HTML

SVG 本身是 XML 格式的，这个和 HTML 天然类似，所以可以直接将 SVG 内联到 HTML 中。

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="<http://www.w3.org/2000/svg>">
  <rect width="50" height="50" fill="#ff0000"/>
</svg>

比如你想画长宽都是50px 的正方形，你只需要将上面的代码粘贴到 HTML 即可。想要改变颜色，或者尺寸只需要修改对应属性即可，非常的直观和方便。这也是 SVG 相对于其它图片格式，除开矢量特性之外的另一个不可替代的优势。

可是我们的图标往往不是只使用一次，可以使用HTML模版引擎。

<svg width="{{ size }}" height="{{ size }}" viewBox="0 0 50 50" xmlns="<http://www.w3.org/2000/svg>">
	<rect width="50" height="50" fill="{{ color }}"/>
</svg>

定义好组件之后，我们只需要在使用的地方import一下，调用即可。

4.SVG in CSS

SVG 内联到 CSS 当中，转成 base64 的代码内联到 CSS 中。

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9InJlZCIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PC9zdmc+");

5. SVG In JS

逻辑其实和利用模版引擎将 SVG 内联进 HTML 原理一样。只是我们换了一个更高级的模版引擎，这里以 React 中的 JSX 为例。

<div id="app">
  <svg width={{size}} height={{size}} viewBox="0 0 100 100" xmlns="<http://www.w3.org/2000/svg>">
    <rect width="100" height="100" fill={{color}} />
  </svg>
</div>
<script>
  import Vue from "vue";
  var app = new Vue({
    el: '#app',
    name: 'ISquare',
    data: {
      size： '16',
      color: 'red'
    }
  })
</script>

<template>
  <li><ISquare /> 蓝色大小为 24 的正方形</li>
	<li><ISquare size="24" color="yellow" />黄色大小为 24 的正方形</li>
</template>

可以看到这里我们定义了一个拥有颜色和大小两个属性的图标组件<ISquare/>。 定义好组件之后，就可以直接使用就可以了，如果你想要这个图标被其它页面使用，只需要将这个组件独立出去即可。

6. SVG In mask-image

mask-image指遮罩使用的图片资源，这两个单词翻译过来就是，面具 图片，就像是给元素带上一个面具一样。默认值是none，也就是无遮罩图片。

mask-image遮罩所支持的图片类型非常的广泛，可以是url()静态图片资源，格式包括JPG，PNG以及SVG等都是支持的；也可以是动态生成的图片。

<svg>
    <defs>
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化边缘 -->
            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
            <!-- 主体遮罩 -->
            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
        </mask>
    </defs>
</svg>

<svg width="250" height="186">
    <image xlink:href="@/assets/404-images/la.jpg" class="mask-image" width="250" height="186"></image>
</svg>
<img src="@/assets/404-images/la.jpg" width="250" height="186" />

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(#mask);
    mask: url(#mask);
    mask-image: url(#mask);
    /* Firefox外链也支持 */
    /* mask-image: url(ellipse-rect.svg#mask); */
}

Untitled