制作一个独一无二的动态 svg 头像

目录

• 🎈 头像预览
• 🎈 SVG语法
• 🎈 头像制作
• 🎈 制作圆形透明头像
• 🎈 图片base64格式

🎈 头像预览#

• 看一下博主的动态图像，是不是很炫酷，想不想拥有一个？
• 这是一个 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 标签中即可