实时预览SVG滤镜效果，支持多滤镜组合与代码导出
零依赖·可离线使用🖼️ 预览
🔧 滤镜链
⚙️ 参数
📋 代码输出
📖 SVG滤镜编辑器能做什么？
SVG滤镜编辑器是一个在线可视化工具，帮助设计师和开发者实时预览和调试SVG滤镜效果。无需手写复杂的SVG滤镜代码，通过直观的参数调节即可创建模糊、投影、色彩变换、噪声纹理、位移映射等视觉效果，并一键导出SVG代码或CSS引用代码。
核心功能
- 实时预览：调整参数即时看到效果变化，所见即所得
- 多滤镜组合：支持链式添加多个滤镜，组合出复杂效果
- 6大滤镜类型：高斯模糊、投影、色彩矩阵、噪声纹理、位移映射、形态学
- 自定义图片：上传自己的图片预览滤镜效果
- 代码导出：一键生成SVG滤镜代码和CSS引用代码
使用教程
- 从下拉菜单选择要添加的滤镜类型，点击"添加"
- 在参数面板中调整滤镜参数，预览区实时更新
- 可继续添加多个滤镜，形成滤镜链
- 点击"SVG代码"或"CSS引用"查看生成的代码
- 点击"复制"将代码复制到剪贴板，粘贴到项目中使用
应用场景
场景1：网页设计师
为网页元素添加独特的视觉效果，如毛玻璃、霓虹光晕、水彩画风格等，无需依赖图片素材。
场景2：前端开发者
快速调试SVG滤镜参数，避免反复修改代码刷新页面，提高开发效率。
场景3：创意设计
探索SVG滤镜的艺术可能性，组合不同滤镜创造独特的视觉风格。
扩展知识
SVG滤镜基于SVG 1.1规范中的filter元素，通过fe*（filter effect）原语组合实现图像处理。每个滤镜原语接收输入图像（in属性），处理后输出结果（result属性），下一个滤镜可通过in属性引用前一个结果，形成处理链。SVG滤镜比CSS filter属性更强大，可以实现CSS无法实现的效果，如Perlin噪声、自定义色彩矩阵变换等。
📖 常见问题
什么是SVG滤镜？
SVG滤镜是SVG规范中定义的图像处理效果，包括模糊、阴影、色彩变换、扭曲、光照等。通过filter元素和fe*子元素组合，可以实现复杂的视觉效果。SVG滤镜可通过CSS的filter属性应用到任何HTML元素上。
支持哪些SVG滤镜类型？
本工具支持常用的SVG滤镜：feGaussianBlur（高斯模糊）、feDropShadow（投影）、feColorMatrix（色彩矩阵）、feTurbulence（噪声纹理）、feDisplacementMap（位移映射）、feMorphology（形态学）等。支持多滤镜链式组合。
如何将SVG滤镜应用到网页中？
有两种方式：1) 内联方式：在HTML中定义SVG滤镜元素，通过CSS的filter: url(#filterId)引用；2) 外部引用：将SVG滤镜保存为独立文件，通过filter: url(filters.svg#filterId)引用。本工具生成的代码可直接复制到项目中使用。
SVG滤镜和CSS滤镜有什么区别？
CSS滤镜（blur、brightness、contrast等）是预定义的简单效果，使用方便但功能有限。SVG滤镜是底层滤镜原语的组合，功能更强大，可以实现CSS滤镜无法实现的效果（如噪声纹理、位移映射、自定义色彩矩阵等）。SVG滤镜是CSS滤镜的超集。
SVG滤镜会影响页面性能吗？
SVG滤镜确实比CSS滤镜消耗更多GPU资源，特别是feTurbulence和feDisplacementMap。建议：1) 避免对大面积元素应用复杂滤镜；2) 使用will-change: filter提示浏览器优化；3) 动画中优先使用CSS滤镜；4) 移动端谨慎使用复杂SVG滤镜链。