动态svg图片简单制做

1、简介

博主头像

svg图片格式不一样于其它图片格式，svg图片本质上是一个xml文件，它内部是标记语言，可用文本编辑器打开编辑。
svg除了能够用ai这种制图软件制做之外，咱们程序员也能够手写svg代码实现二次开发（从零画图没必要要...不至于...）。

2、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=" 这里 " 便可。

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