SVG 绘图工作室

面向的问题

生成海报、信息图、流程图、架构图、图表和图标时，多模态生图模型常出现文字错字、数字失真、比例不稳、后续不可编辑的问题；纯手写 SVG 又容易在文本换行、渐变、滤镜、坐标系和渲染兼容性上翻车。SVG Studio 解决的是：用可控代码绘制图形，再把结果导出为位图或动图，同时保留矢量源文件。

工作方式

核心流程是：

• 定画布：根据 16:9、1:1、9:16、OG 等比例选择 viewBox，用 --scale 或 --width 控制输出清晰度。
• 写 SVG：先铺背景 rect，文本用多个 <text> 控制换行，渐变/滤镜放在 <defs> 中通过 url(#id) 引用；图表需要将数据坐标映射到像素坐标，并注意 SVG y 轴向下。
• 渲染 PNG：通过 scripts/render.py 优先使用 Chrome，降级到 resvg 或 cairosvg，支持透明背景、强制尺寸和引擎选择。
• 做动图：网页内播放可直接写 SMIL 或 CSS 动画；需要 GIF、APNG、WebP、MP4 文件时，用 scripts/animate.py 从多帧 SVG 合成。
• 验证交付：渲染后用图片读取检查文字截断、背景、中文字体和动效帧，再交付 .svg 源文件与位图或动图。

适用边界

它适合矢量、精确、可编辑的图形：信息图、SaaS 功能长图、流程图、数据图、图标、loading 动画。若要照片级写实人物、风景、水彩或拟物质感，SVG 不占优，应交给多模态生图工具；手绘便签风可使用技能提供的滤镜配方，但真实材质仍超出其稳定边界。