![制作一个独一无二的动态 svg 头像](https://img2022.cnblogs.com/blog/2894189/202206/2894189-20220616182319558-63006885.png)
制作一个炫酷的 svg 动态头像,闪瞎技术人的双眼吧
🎈 头像预览
- 看一下博主的动态图像,是不是很炫酷,想不想拥有一个?
- 这是一个
svg
图片,svg
图片不仅可以通过制图软件制作外,其实也可以通过代码进行开发
- 因为
svg
本质上是一个 xml
文件,是一种标记语言,可以使用编辑器编辑
🎈 SVG语法
svg
语法类似于 html
,并且支持 css
,浏览器通过读取 css
来渲染动画
svg
主标签内要有 xmlns:xlink="http://www.w3.org/1999/xlink"
svg
标签中的 width/height
来标识画布的大小
viewBox
标签可有可无,有的话前两位一般是0,后两位一般与 width、height
保持一致
g
标签可以用于嵌套,包括嵌套子 svg
文件
- 添加动画的话在
style
标签中写 css
即可
- 使用
transform="translate(x y)"
属性,可以移动元素在图片中的位置
image
标签是用来嵌入 png、jpg
等格式类型的图片
<svg width="366" height="366" viewBox="0 0 366 366" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="none" fill-rule="evenodd" width="258" height="258" viewBox="0 0 258 258" transform="translate(54 54)">
<image xlink:href="url" x="0" y="0" width="200" height="200"/>
</g>
</svg>
🎈 头像制作
- 这里交大家如何制作博主同款头像
- 首先将博主的头像
svg
下载下来,用编辑器打开,大概能看到如下内容
- 可以看到在
image
标签中有一个 base64
格式的图片
- 其实只要将自己的头像图片转码成
base64
格式,替换博主的内容即可
🎈 制作圆形透明头像
- 一般头像都是正方形非透明的,直接转成
base64
格式,嵌入其中会很丑的
- 我们需要将图片处理一下,变成圆形背景透明的头像
- 这里我们就需要借助专业的软件了,比如
photoshop
等
🎈 图片base64格式
- 将图片处理完成之后,我们需要将图片转码成
base64
格式
- 可以找一些在线转码工具,这里使用的是:base64转码工具
- 转码成功后,将其复制到
image
标签中即可