必须启用Inkscape动画支持才能导出可嵌入网页的SVG动画；需在【编辑→首选项→渲染→动画】中勾选【启用动画支持】，否则无法生成SMIL/CSS-ready动画代码、导出无动画属性且缺失相关菜单。

要在Inkscape中创建可导出、可嵌入网页的动画效果，必须先启用内置动画渲染支持，并通过路径变形、图层时序或外部代码协同实现——Inkscape本身不提供时间轴式关键帧动画界面，但能生成带SMIL或CSS-ready结构的SVG源码。

开启Inkscape动画渲染功能

这一步是后续所有动画操作的前提，不做此设置，导出的SVG将不含任何动画属性，且节点工具中无法触发与动画相关的上下文菜单。

点击顶部菜单栏【编辑】→【首选项】→左侧导航栏展开【渲染】→点击【动画】→勾选【启用动画支持】。

【启用动画支持】必须勾选，否则后续所有基于SVG原生动画（如标签）的操作均无效，且Inkscape不会在导出选项中显示“保留动画信息”复选框。

用路径变形模拟基础动画

适用于制作文字飘动、图形弹性形变等无需逐帧控制的轻量动画，本质是生成可被CSS或SMIL驱动的SVG路径数据。

方法一：文字波浪变形

输入文字（如“WAVE”）→选中文字→按 Shift+Ctrl+C 转为路径→按 Ctrl+U 取消组合→按 F2 切换到节点工具→按 Ctrl+A 全选节点→按住 Alt 拖动任意一个端点，实时拉出平滑弧线。

注意：拖动时若出现尖锐折角，说明节点类型为“角点”，需双击该节点将其转为“平滑点”再拖。

纯css无限循环渐变曲线动画效果

纯css无限循环渐变曲线动画效果，该特效很适合网页制作，无限循环的动画效果。

下载

方法二：形状脉冲缩放

画一个圆形→复制一份（Ctrl+D）→将副本缩小至原尺寸70%→全选两个圆形→对象→对齐与分布→水平居中+垂直居中→选中大圆→路径→差集→得到环形路径→在此路径上添加 手动写入SVG代码（需用文本编辑器打开.svg文件后插入）。

导出带动画结构的SVG文件

确保你已完成路径变形或手动注入了动画标签，否则导出只是静态图像。

第一步：确认当前文档中至少有一个已转换为路径的对象，且未被群组嵌套过深（建议扁平化至单层）。

第二步：文件→另存为→选择保存类型为【Optimized SVG (*.svg)】→点击【保存】→弹出优化对话框→勾选【启用SVG动画】和【保留编辑能力】→取消勾选【移除元数据】（否则自定义标签可能被删）→点击【确定】。

第三步：用浏览器直接打开该SVG文件，或嵌入HTML中测试动画是否触发。若无反应，检查浏览器是否禁用SMIL（Chrome 100+默认禁用，需改用CSS animation重写）。