适合转换为 TGS 的 SVG 应当包含真正的矢量图形,并具有明确的画布范围。仅凭文件名几乎无法判断其内容:SVG 也可能包含照片、依赖字体的可编辑文字,以及无法在转换后保留的效果。在添加动画之前,先准备一份单独的导出副本,这样修复问题时就不会破坏可编辑的原稿。
检查文件实际包含的内容
在设计软件中打开 SVG,逐个选中对象检查。由可编辑轮廓构成的标志是良好的起点。放进 SVG 中的照片仍然是位图,即使它在浏览器中显示得完全正常。文字看起来也可能像矢量图形,实际却仍然依赖某种字体。
例如,一枚徽章可能包含三种不同内容:由路径构成的盾牌、可编辑的文字标签,以及嵌入的肖像照片。保留盾牌,将标签文字转为路径,并用简化的矢量插画替换肖像。如果不做这些修改,只是把相同的构图重新保存一次,并不能解决兼容性问题。
将原稿与导出副本分开保存
保留包含可编辑文字、可复用组件和所需效果的原始文档。复制画板或文档,专门用于转换。你可以在这份副本中简化路径、将文字转为轮廓,同时避免给日后修改文字内容带来不必要的麻烦。为两个版本分别取名,让名称清楚表明各自的用途。
从导出副本中删除不再使用的对象,不要只是把它们藏在其他形状后面。需要独立运动的元素应保持分离,但不要把一个完整的视觉形状拆成几十个微小碎片。清晰的元素结构有助于你判断正在为哪些部分添加动画。
替换转换时容易出问题的外观效果
逐一检查阴影、蒙版、纹理填充和其他效果。浏览器能够渲染的 SVG 特性,TGS 导出器不一定能重现。对于尺寸较小的贴纸,一个简单的偏移轮廓形状可能比模糊滤镜更可靠地表现阴影。每次替换后,都要检查图稿的外观。
不要为了保留外观而把整幅图稿栅格化成一张图片。这样做虽然可能让 SVG 预览看起来没有问题,却会丢失 TGS 所需要的矢量结构。
- 将最终确定的文字转为路径。
- 用矢量图稿替换嵌入的图片。
- 用简单形状重新构建必要的效果。
- 保留一张预期外观的截图,用于对照。
为计划中的运动留出空间
根据设计需要明确设置画布,将图稿居中,并检查最外侧的点。静态设计如果几乎贴满画布的每一条边,就没有多少空间可以用来弹跳或旋转。在紧贴图形裁剪画板之前,先初步确定要采用的运动方式。
想象一个围绕中心旋转的正方形徽标。在旋转到中途时,它的角会比边缘保持水平时伸得更远。应缩小图稿,或选择幅度更小的运动;仅仅更改画布的标注并不会移动实际的几何图形。
增加复杂度之前,先对照一次简单导出
在转换器中选择 SVG,并完成 Telegram 登录。选择 SVG 时,服务会收到一份用于诊断的文件副本。先使用静态构图或幅度较小的预设,将预览与参考图对照。在花时间制作细致的运动效果之前,先检查文字、孔洞、颜色和透明区域。
如果这个基础版本已经缺少某些内容,就回到 SVG 中修复对应元素。如果基础版本正确,但动画版本出现问题,则重点检查运动方式、时间设置和边界范围。把两类问题分开处理,可以让每次修改都有明确目的,也能避免无关改动掩盖原本的问题。