动态svg图片简单制作

一、简介

#topics #no-box-shadow-img { box-shadow: none }

博主头像

svg图片格式不同于其它图片格式，svg图片本质上是一个xml文件，它内部是标记语言，可用文本编辑器打开编辑。

svg除了可以用ai这种制图软件制作以外，我们程序员也可以手写svg代码实现二次开发（从零画图不必要...不至于...）。

二、svg文件简单编辑

svg语法类似于html，且支持css语法，浏览器通过读取css来渲染动画。有趣的是，GitHub的 README.md 文件只支持少数html标签、属性，几乎完全不支持css样式，但是你插入带css的svg图片就没问题。

2.1 嵌套

<g>标签可以用于嵌套，包括嵌套子svg文件，拷贝进去就行。

<g>标签一般使用id属性，而<path> <circle>等标签一般使用class。添加动画的话在<style>标签中使用css即可。

2.2 调整大小

使用以下属性

width="366" height="366" viewBox="0 0 366 366"

前二者好理解，viewBox可有可无，有的话前两位一般是0，后两位最好和width、height保持一致。一般来说，只有<svg>主标签内的viewBox属性比较重要。

2.3 位移

想移动元素在图片中的位置，使用 transform="translate(x y)" 属性。

如你从其它svg中拷贝了一些图形过来，嵌套在<g>标签中，则在<g>标签中使用transform就能调整其位置。

如果xy为0，则图形在最左上角，图形中心的位置是width、height的一半。

2.4 嵌套其它图片格式

如果要在svg中嵌入png、jpg等图片，需要用到<image>标签。

调用远程图片的话，首先确保<svg>主标签内有xmlns:xlink="http://www.w3.org/1999/xlink"，然后可以这样使用

<image xlink:href="url" x="0" y="0" width="200" height="200"/>

注意事项参考：https://cloud.tencent.com/developer/section/1423874

此外，远程调用存在一些问题，比如直接在页面中远程使用此svg图片，其中的<image>能显示。如果是被js渲染出的svg图片，则svg中的<image>就可能不被加载。所以我推荐将图片直接存在svg图片中。

使用base64编码即可：

>>在线图片base64编码工具<<

将编码结果放入 xlink:href=" 这里 " 即可。

就酱 (๑•̀ㅂ•́)و✧