svg-design

SVG 创建与编辑

**核心原则：**SVG 是代码。像编写任何标记语言一样手动编写 SVG：整洁、精简且语义明确。每个元素和属性都应有其存在的价值。

主题路由

任务	加载参考资料
弧线标志组合、常见路径形状	references/path-patterns.md
Logo 设计、字体排版、负空间	references/logo-techniques.md
图标设计、网格系统、像素对齐	references/icon-design.md
渐变、遮罩、裁剪、滤镜、变换（设计决策）	references/advanced-techniques.md
动画（CSS 关键帧、错峰、GPU、缓动、SVG 专属）	references/animation.md
优化、精灵图、SVGO 配置	references/optimization.md
无障碍、浏览器问题	references/accessibility-and-pitfalls.md
编辑工作流、布尔运算、合并 SVG	references/editing-workflow.md

SVG 基本框架

始终从以下结构开始：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  
</svg>

调整 viewBox 以匹配设计画布。省略 width/height 属性，让 SVG 随容器缩放（只有在需要固定尺寸时才添加）。

画布尺寸惯例

尺寸	用途	备注
0 0 16 16	微型图标、网站图标	Heroicons micro、GitHub Octicons
0 0 20 20	小型 UI 图标、表单元素	Heroicons mini
0 0 24 24	标准图标（最常见）	Lucide、Heroicons outline、Material
0 0 32 32	中型图标、导航	Phosphor 内部使用 256x256
0 0 48 48	大型展示图标	应用图标、插画
自定义	Logo、插画	匹配自然宽高比

除非有特殊原因，否则默认使用 24x24。这是行业标准。

形状与路径的选择

适合使用基本形状的情况……	适合使用 <path> 的情况……
形状是基本几何图形	形状带有曲线或复杂轮廓
可读性很重要（圆形应写作 <circle>）	需要尽量减少元素数量
需要为单独属性设置动画（r、cx、cy）	将多个形状合并到一个元素中
形状将通过程序修改	从设计工具导出（路径具有通用性）

样式默认值

在根 <svg> 元素上设置以下属性，以避免在子元素上重复设置：

属性	图标默认值	Logo 默认值	原因
fill	none	不固定	图标通常使用描边，Logo 通常使用填充
stroke	currentColor	none 或 currentColor	从父元素继承文本颜色
stroke-width	2（在 24x24 画布上）	不固定	确保图标粗细一致
stroke-linecap	round	round 或 butt	圆头在小尺寸下看起来更整洁
stroke-linejoin	round	round 或 miter	避免连接处出现尖刺

**currentColor 非常实用。**它让 SVG 继承父元素的颜色，无需额外 CSS 即可让图标适配主题。

相对于 viewBox 的描边宽度

stroke-width 的单位是 viewBox 单位，而不是像素。始终根据画布尺寸设置描边宽度：

viewBox	典型 stroke-width	视觉效果
16x16	1.5	约占画布的 9.4%
24x24	2	约占画布的 8.3%
32x32	2-2.5	约占画布的 6.3-7.8%
48x48	3	约占画布的 6.3%
256x256	16	约占画布的 6.3%

何时将形状转换为路径

在以下情况下转换：

• 将多个形状合并为一个复合路径（布尔运算）
• 需要将形状作为更大路径组合的一部分
• 要分发到仅支持 <path> 的环境
• 要优化以尽量减少 DOM 元素

在以下情况下保留为形状：

• 代码可读性很重要（<circle> 能直观地说明自身用途）
• 需要为特定属性制作动画（为圆形的 r 制作动画，比为路径数据制作动画更简洁）
• SVG 将通过编程方式修改

圆角矩形转路径模板

这里的弧线参数很容易计算出错。请将此作为参考：

<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule：evenodd 与 nonzero

如果有带孔洞的复合形状，请使用 evenodd。它更简单，因为不需要考虑绕行方向：

<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

使用 nonzero（默认值）时，内圆必须采用相反的绕行方向才能形成孔洞。

Logo 设计流程

创建 Logo（而非图标）时，请遵循以下流程：

0. 创建 Logo 前，务必先明确设计方向。 在编写任何 SVG 代码之前，使用 AskUserQuestion 提供精心挑选的设计方向选项。所有 Logo 项目都必须执行此步骤。即使用户提供了一些方向（例如“现代”或“YC 风格”），这些也只是感觉，而非设计简报。即便是设计师，也会先提供选项来缩小方向范围，然后再投入精力设计 5-15 个方案。

   像设计师展示情绪板那样提供选项。不要提出开放式问题。请根据用户所在领域定制选项：

   AskUserQuestion({
     questions: [
       {
         question: "哪种视觉个性适合你的品牌？",
         header: "风格",
         multiSelect: false,
         options: [
           { label: "大胆且几何", description: "简洁的形状、醒目的线条、自信的风格。可参考 Stripe、Figma。" },
           { label: "自然且匠心", description: "手绘质感、自然曲线、温暖亲切。可参考 Mailchimp、Basecamp。" },
           { label: "极简且注重字体", description: "以文字标识为主、克制而精致。可参考 Glossier、Everlane。" },
           { label: "活泼且动感", description: "充满活力、色彩丰富、富有动感。可参考 Slack、Discord。" }
         ]
       },
       {
         question: "Logo 应突出什么？",
         header: "重点",
         multiSelect: false,
         options: [
           { label: "我们做什么", description: "与产品核心功能相关的视觉隐喻" },
           { label: "给人的感受", description: "传递情绪或活力的抽象图形" },
           { label: "我们是谁", description: "由品牌名称构成的字母形或文字标识" }
         ]
       },
       {
         question: "你所在领域中，哪个 Logo 最能引起你的共鸣？",
         header: "灵感",
         multiSelect: false,
         options: [
           // 重要：选择 3-4 个用户所在特定行业或领域中
           // 或相关领域内真实且知名的品牌。
           // 下方示例适用于 AI 初创公司——其他领域
           // 请完全替换这些示例。
           { label: "Linear", description: "精准的几何图标、紫色渐变、高级质感" },
           { label: "Stripe", description: "简洁醒目的文字标识、单一强调色、自信而克制" },
           { label: "Notion", description: "富有个性的亲切图标、平易近人、略带俏皮" },
           { label: "Vercel", description: "抽象极简三角形、鲜明的黑白配色、面向开发者" }
         ]
       }
     ]
   })
   

   根据领域量身定制问题至关重要。 心情选项、关注点选项，尤其是灵感品牌标志，都必须贴合用户所在的行业。咖啡品牌可以选择 Blue Bottle、Stumptown、Intelligentsia、Counter Culture 作为灵感选项。金融科技初创公司可以选择 Stripe、Plaid、Mercury、Ramp。健身应用可以选择 Peloton、Strava、Nike Run Club、Whoop。挑选用户一眼就能认出、并且能发表看法的品牌。灵感问题在这里最为关键，因为它能以具体事物为锚点，确定整体美学方向。

   唯一例外：如果用户已经指定了明确的视觉风格和具体图像元素（例如“使用海军蓝山脉剪影的极简几何徽标”），则跳过此步骤。

1. 探索多种隐喻，而非同一隐喻的多种布局。 概念多样性比布局变化更重要。遵循 references/logo-techniques.md 中的完整构思流程，其中介绍了针对特定领域的头脑风暴、类别多样性要求，以及避免陈词滥调的方法。

2. 确保结构多样。 每组徽标都必须涵盖多种类别的设计思路，而不只是同一种风格中的多种隐喻。提供 5 个或更多选项时，每一列至少包含一种：字体／字标设计、象征性图标、抽象几何标记，以及字母形态与隐喻相结合的混合设计。参见 references/logo-techniques.md 中的类别多样性表。

3. 立即设置预览，然后逐步填充内容。 不要先设计完所有徽标再展示。用户应该能在徽标制作过程中看到成果：

   1. 使用 cp 将此技能的 assets/preview.html 复制到项目目录，并使用加载此技能时的绝对路径（不要读取或修改该文件）。
   2. 设计第一个徽标并写入其 SVG 文件。
   3. 写入 variants.js，其中只包含第一个变体（格式见 references/editing-workflow.md）。
   4. 使用 open preview.html（macOS）或 xdg-open preview.html（Linux）打开预览。此时用户就能看到第一个徽标，而你可以继续工作。
   5. 对于之后的每个徽标：先写入 SVG 文件，再更新 variants.js 将其添加进去。预览每 3 秒会自动重新加载这两个文件，因此新徽标完成后就会显示在浏览器中。

   这样，第一个徽标准备好后，用户几秒内就能看到视觉反馈，而不是等所有徽标设计完成后才看到结果。

4. 彩色徽标始终要创建 -dark.svg 变体。 在白色背景上效果出色的深海军蓝边缘（#1E3A5F），在深色背景上会消失。深色变体需要使用更浅的边缘（#4B8BBE）、更浅的圆环（#3B6B8A）和灰白色中心（#E2E8F0）。

5. 绘制前规划垂直空间。 在包含 3 个堆叠元素的 32x32 画布上，可用空间约为 30 个单位。先勾勒垂直方向的分配（例如：方框=12、间隙=2、图层=5、间隙=2、图层=5），避免内容超出 viewBox 边缘。

反模式

不要这样做	应改为这样做
不设置 viewBox，直接硬编码 width="24" height="24"	始终使用 viewBox；仅在需要时添加 width/height
在 <g> 组上设置 fill="none"	在各个元素或根 <svg> 上设置 fill
在 SVG 中使用 px 单位	SVG 坐标不带单位；它们会映射到 viewBox
包含编辑器元数据（<sodipodi:*>、<inkscape:*>）	删除所有编辑器残留内容
在分发的 SVG 字标中使用 <text>	将文本转换为路径，以确保可移植性
嵌套三层 transform	将 transform 展平到路径坐标中
使用 xlink:href	使用 href（xlink 已弃用）
独立 SVG 文件中遗漏 xmlns	始终包含 xmlns="http://www.w3.org/2000/svg"
图标的小数精度超过 2 至 3 位	图标精确到小数点后 2 位，复杂图稿最多 3 位

交叉引用

• 设计美学：如果已安装 ce 插件，Skill(ce:design) 涵盖更广泛的视觉设计决策
• Mermaid 图表：如果已安装 ce 插件，Skill(ce:visualizing-with-mermaid) 涵盖特定于图表的可视化（非 SVG）