目录
🎈 头像预览
🎈 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 下载下来，用编辑器打开，大概能看到如下内容
可以看到在 image 标签中有一个 base64 格式的图片
其实只要将自己的头像图片转码成 base64 格式，替换博主的内容即可
🎈 制作圆形透明头像
一般头像都是正方形非透明的，直接转成 base64 格式，嵌入其中会很丑的
我们需要将图片处理一下，变成圆形背景透明的头像
这里我们就需要借助专业的软件了，比如 photoshop 等
🎈 图片base64格式
将图片处理完成之后，我们需要将图片转码成 base64 格式
可以找一些在线转码工具，这里使用的是：base64转码工具
转码成功后，将其复制到 image 标签中即可
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/122903.html