动态svg图片简单制作

一、简介

博主头像

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=" 这里 " 即可。

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

(0)

相关推荐