如何在浏览器里给 SVG 做动画（无需写代码）

读完这篇，你会得到一段在浏览器标签页里做出来的 SVG 动画，导出为 MP4 或 WebM。需要准备的只有一个 KinoViz 账号和一个 .svg 文件。全部步骤在免费版上都能完成，付费套餐的区别只有导出分辨率、帧率和水印。

你需要准备

• 一个体积在套餐导入上限内的 SVG：免费版 10 MB，Creator 50 MB，Pro 100 MB，Studio 1 GB。
• 一个较新的桌面浏览器，不需要安装任何软件。
• 第一次做一段简单的入场动画，大约十分钟。

分步操作

1. 新建项目并选好画布尺寸

在控制台新建项目，按投放位置选画布预设：方形（1080 × 1080）、横版（1920 × 1080）、竖版（1080 × 1920）或自定义。画布就是导出的画面，动手排版前先定好。

2. 把 SVG 放到画布上

把文件从桌面直接拖到画布上，KinoViz 会识别类型并创建图片元素。也可以打开素材库，进入我的素材上传——这样上传的素材会存进账号，所有项目都能取用。

3. 把 SVG 拆成可以分别动的部分

刚导入的 SVG 是一整张图片。想让它的各个部分分别运动，右键选择拆分为路径，文件里的每个形状都会变成独立的路径元素：可选中、可改样式、可打关键帧，也能参与布尔运算。

如果图里有想保持可编辑的文字，改选转换为可编辑，它保留文字元素和几何分组，而不是把一切都压成轮廓。

4. 整理图层顺序并成组

在左侧图层面板里把图层拖成你想要的顺序，越靠上的图层在画布上越靠前。选中若干相关部分按 Ctrl/Cmd+G 成组，组作为一个对象参与动画，组内的路径仍可单独编辑。

5. 切到动画模式打第一个关键帧

拨动顶部栏的设计 / 动画开关，底部出现时间轴，每个图层一条轨道。把播放头停在 0 秒，选中一条路径，给它一个起始状态：不透明度 0、缩小一点，或放到画面之外。播放头停住时改属性会自动记录关键帧。

6. 移动播放头做出运动

把播放头拖到后面的时间点，把属性改成最终值，中间每一帧由引擎补齐。常用的可动画属性：

按 K 可以在播放头位置手动记录关键帧。

7. 用缓动和错位调节奏

右键关键帧选缓动。KinoViz 内置 40 多条预设曲线——各种缓入缓出、bounce、elastic、back、step——每条都带曲线预览图，也支持自定义三次贝塞尔。

想让多个部分依次出现，就在时间上把它们错开：拖动每个图层在时间轴里的片段条，让它比前一个晚 0.05–0.15 秒开始，或者把它的第一个关键帧沿轨道往后拖。

8. 导出

从顶部栏打开导出弹窗。需要广泛兼容选 MP4，需要透明背景选 WebM，只要一张静帧选 PNG。在套餐允许范围内设置分辨率和帧率后开始渲染。渲染在浏览器里进行，导出完成前别关标签页。

小技巧

• 动组，别动几百条路径。 复杂图标可能有上百条子路径，先按视觉元素成组，再给组打关键帧。
• 先做完最后一帧。 把结束画面设计好，再回到 0 秒把东西一样样「拿走」，比正着摸索快得多。
• 能复用就别重做。 同一个徽标会出现在多个项目里的话，做成组件，改主体会同步到所有实例。
• 描边可以「画出来」。 形状变成带描边的路径之后，属性面板里的起点和终点滑块可以打关键帧，做出线条自己画出来的效果。

常见问题

给 SVG 做动画一定要写代码或者用 After Effects 吗？

不用。KinoViz 在浏览器里运行，用关键帧时间轴给 SVG 做动画，不需要安装软件，也不用接 JavaScript、CSS 或 Lottie 运行时。

能只让一个 SVG 文件里的某个形状动起来吗？

可以。右键点击导入的 SVG 选拆分为路径，每个形状都会变成独立的路径元素，有自己的图层、关键帧和样式。文件里有想保留成可编辑文字的内容时，改选转换为可编辑。

放大以后画质会不会变糊？

不会。SVG 导入后在画布上仍然是矢量，放大不会让边缘变毛。最终输出是位图视频或 PNG，分辨率上限由套餐决定：免费版短边 540p，Creator 1080p，Pro 与 Studio 短边 1920px。

免费版能做 SVG 动画吗？

可以。导入 SVG、拆分为路径、打关键帧、调缓动，以及导出 MP4、WebM 和 PNG，免费版都能用。免费版导出带水印，上限 540p / 24 fps。导出 .kino 工程文件需要 Creator 及以上。

相关内容

• 如何制作 Logo 揭示动画
• 如何导出透明 PNG
• 设计模式 — 布局、布尔运算与样式
• 动画与时间轴 — 关键帧、缓动与片段时长
• 导出格式 — 各套餐能导出什么
• 术语表
• 价格