如何制作一个单svg动画签名引入在看完 https://yfi.moe/post/animated-signature-svg 这篇文章后,我也跟着做了一个签名,但是由于它依赖CSS控制其动画导致无法单独使用或放进Github的README文档并且这样的签名笔画粗细太单一,没有“真正”签名的观感于是有了以下折腾过程,参考 GitHubInnei 的签名自己总结了制作方法制作过程1.获取签名svg文件两种途径生成的签名最好都能一笔写完,且笔画重叠的地方较少途径一:字体转svg如果图简单可以直接在此处,输入名字并选择用一个喜欢的字体,直接复制字体svg文件途径二:AI生成或手绘可以自己用数位板签名,注意导出为图片时要纯色背景也可以使用Chatgpt image 2 生图,纯色背景,效果也很好,不需要处理背景也能直接抠出轮廓来然后把图片转换为svg格式PNG转SVG——在线矢量化 — Convertio使用Convertio免费将PNG转换为SVG。将基于像素的PNG图形转为可缩放的SVG矢量——适合标志、图标和网页设计。convertio.co如图:2.添加动画仔细观察Innei的签名及源文件Loading GitHub File Preview...注意到动画的原理是笔迹遮罩在上方背景,从左到右填充直接交给gpt照葫芦画瓢的话:这是我生成的svg签名文件: <svg>......<svg>长的一笔是是主体,短的一笔是字母i上的点,现在我想参考下面这个动画版的签名svg,把我的签名也改为动态,请你帮我完成参考的动态svg签名:https://raw.githubusercontent.com/Innei/Innei/master/innei-signature.svg可以看到由于我的签名整体向右上方倾斜,导致从左到右填充背景时,会出现一些地方会两笔同时画,不太符合“一笔签名”的直觉当然,若你的签名正好整体是从左往右书写的,那观感应该会很好,只需要调整背景填充的速度,让它看起来更自然就能做完了如果你的签名也有相似的问题,可以继续往下看参考我的解决方法3.导入Figma勾勒笔迹将svg文件导入FigmaFigma: The Collaborative Interface Design ToolFigma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.Figma使用钢笔工具选择一个合适的笔刷大小,沿着签名书写的方向勾勒笔画,注意:每个地方都能恰好覆盖钢笔轨迹不能断开,不能在同一点交叉(即除了首尾,每个点只能被两条线相连)可以发现在笔迹交叉的地方,更粗的背景笔迹会导致另一侧的笔画线出现一小部分:示意图实际表现不过通过调整书写的速度,基本不会对观感造成影响,也能有很好的效果。在右侧面板把背景填充轨迹单独导出为svg4.添加轨迹动画发送给gpt处理:我的新方案是:用 Figma 描的中心线作为 mask 动画,原始签名轮廓作为真实显示层。使用SMIL 动画。请改为按照特定的轨迹填充背景这是勾勒的背景svg轨迹<svg>......<svg>,当它的宽度为20时正好能超出每处的边缘,请你帮我完成最终的svg最终输出的svg:Loading GitHub File Preview...完整参数解析(AI GEN):嵌套文档展开›一、文件声明与根元素 <svg> SVG<?xml version="1.0" encoding="UTF-8"?> 这是 XML 声明。 参数含义`version="1.0"`表示这是 XML 1.0 文档`encoding="UTF-8"`使用 UTF-8 编码,保证英文、中文、符号等字符正常解析1. <svg> 根元素 5.优化动画重点需要调整的参数是<animate>中的:dur: 表示一个完整动画周期持续时间keyTimes: 控制应用每个values值对应的时间点keySplines: 定义每两个关键时间点之间的缓动曲线,调大 x1 x2 y1 y2中的 x1和 y1值可以让书写动画更“快速进入、平滑完成”。我也是通过调大此值来让开头笔画有交叉的部分更快播放,这样观感更佳。
引入
在看完 https://yfi.moe/post/animated-signature-svg 这篇文章后,我也跟着做了一个签名,但是由于它依赖CSS控制其动画导致无法单独使用或放进Github的README文档
并且这样的签名笔画粗细太单一,没有“真正”签名的观感
于是有了以下折腾过程,参考 Innei 的签名自己总结了制作方法
制作过程
1.获取签名svg文件
两种途径生成的签名最好都能一笔写完,且笔画重叠的地方较少
途径一:字体转svg
如果图简单可以直接在此处,输入名字并选择用一个喜欢的字体,直接复制字体svg文件
途径二:AI生成或手绘
可以自己用数位板签名,注意导出为图片时要纯色背景
也可以使用Chatgpt image 2 生图,纯色背景,效果也很好,不需要处理背景也能直接抠出轮廓来
然后把图片转换为svg格式
如图:
2.添加动画
仔细观察Innei的签名及源文件
注意到动画的原理是笔迹遮罩在上方背景,从左到右填充
直接交给gpt照葫芦画瓢的话:
可以看到由于我的签名整体向右上方倾斜,导致从左到右填充背景时,会出现一些地方会两笔同时画,不太符合“一笔签名”的直觉
当然,若你的签名正好整体是从左往右书写的,那观感应该会很好,只需要调整背景填充的速度,让它看起来更自然就能做完了
如果你的签名也有相似的问题,可以继续往下看参考我的解决方法
3.导入Figma勾勒笔迹
将svg文件导入Figma
使用钢笔工具选择一个合适的笔刷大小,沿着签名书写的方向勾勒笔画,注意:
可以发现在笔迹交叉的地方,更粗的背景笔迹会导致另一侧的笔画线出现一小部分:
示意图
实际表现
不过通过调整书写的速度,基本不会对观感造成影响,也能有很好的效果。
在右侧面板把背景填充轨迹单独导出为svg
4.添加轨迹动画
发送给gpt处理:
最终输出的svg:
完整参数解析(AI GEN):
一、文件声明与根元素 <svg>
这是 XML 声明。
参数
含义
`version="1.0"`
表示这是 XML 1.0 文档
`encoding="UTF-8"`
使用 UTF-8 编码,保证英文、中文、符号等字符正常解析
1. <svg> 根元素
5.优化动画
重点需要调整的参数是<animate>中的: