svg-logo-maker

SVG Logo Maker

使用 svg.js 进行程序化构建、通过 基于浏览器的视觉验证，并自动导出 SVG，生成世界级的极简主义 SVG 徽标。

为什么选择 svg.js？ 对 AI 来说，编写原始 SVG 路径数据极易出错。svg.js 提供了高级形状方法（rect()、circle()、polygon()、group()、gradient()、mask()、transform()），可自然映射为函数调用——而这正是 AI 擅长的。浏览器会渲染结果，便于进行视觉迭代。

有效徽标设计的五项原则

这些原则指导整个工作流中的每一项决策。请依据这些原则评估所有设计。

原则	含义	检验方法
简洁	用清晰、必要的元素传达信息。每一条线都必须有存在的理由。	能用一句话描述这个徽标吗？
历久弥新	设计应植根于持久的品牌价值，而非潮流。	10 年后看起来会过时吗？
独特	以原创的选择脱颖而出。避免陈词滥调的符号（如代表创意的灯泡、代表“全球”的地球）。	竞争对手也能采用相同的概念吗？
相关	与受众、行业和品牌个性相契合。儿童应用与律师事务所需要的风格截然不同。	它符合目标受众的期待吗？
易读	文本在任何尺寸下都必须清晰。图形在 32×32px 下也必须易于辨认。	想象把它缩小成网站图标——还能看清吗？

参考库

此技能包含 assets/，其中收录了全球领先品牌的徽标，提供 两种格式：

格式	文件	用途
PNG（*.png）	视觉参考图	请先查看这些文件——AI 可以直接解析 PNG 图像，了解形状、比例、色彩、负空间和整体设计质量。请将 PNG 文件作为主要设计灵感来源。
SVG（*.svg）	矢量源代码	查看这些文件，了解真实世界中的 SVG 结构、路径构造、优化技巧，以及专业徽标如何通过代码构建。

收录的品牌：Apple、OpenAI、Anthropic、Claude、Claude Code、Cursor、Google、Figma、Meta、Midjourney、Grok、DeepSeek、Doubao、Moonshot、Ollama、Cloudflare、Microsoft、AWS、IBM、Gemini、Antigravity。

参考徽标位于：{SKILL_DIR}/assets/

如何使用参考库

1. 视觉研究（PNG）：开始设计前，使用 Read 工具查看 3–5 个与目标行业或风格相关的 PNG 文件。AI 可以观察渲染后的徽标、分析其视觉结构，并掌握仅凭 SVG 代码无法学到的设计规律。
2. 技术研究（SVG）：完成视觉研究后，查看对应的 SVG 文件，了解如何通过代码实现视觉效果——包括路径构造、组的使用、变换、渐变和蒙版。
3. 交叉参考：务必同时研究同一徽标的两种格式。PNG 展示了要实现的 效果；SVG 展示了如何构建。

---

工作流

阶段 1 — 品牌形象与需求收集

徽标将完整的品牌形象浓缩为一个标记。请在此阶段投入充分精力——基于浅层理解打造的徽标会显得平庸。

1a. 品牌身份深入分析

从用户的请求中提取或推断以下信息。对于输入较少的情况，请推断合理的默认值，并明确说明假设。

维度	需要收集的内容	重要性
品牌名称	准确文本（用于字标／字母标／字母组合标）	决定字形需求
目标受众	人口统计特征、共同兴趣、专业程度	决定视觉调性（活泼还是权威）
核心使命	用一句话描述品牌的宗旨	奠定视觉隐喻的基础
品牌形容词	用 3–5 个词描述品牌个性（例如“大胆、值得信赖、创新”）	指导形式语言和配色
核心价值观	品牌所代表的 2–3 个关键词（例如“信任”“速度”“创新”）	为象征元素和形状选择提供依据
行业／领域	科技、金融、健康、食品、教育、创意等	提供风格切入点

1b. Logo 要求

维度	需要收集的内容
Logo 类型	标志图形、字母形、字母组合标、字标、抽象标志、组合标志或徽章（参见下方的 Logo 类型指南）
颜色偏好	具体的十六进制值，或基于氛围的描述（“暖色调”“企业蓝”“单色”）
风格线索	几何／有机／棱角分明／圆润／抽象／具象
使用场景	应用图标、网站页眉、网站图标、印刷品、通用
负空间	是否要求巧妙利用负空间

Logo 类型指南

选择最符合品牌需求的类型：

类型	描述	适用对象	示例
字标	完整的公司名称，以字体设计为主	简短、独特的名称	Coca-Cola、Google、FedEx
字母形	单个字母	想要打造醒目、紧凑品牌形象的知名公司	Facebook（F）、Pinterest（P）
字母组合标	品牌名称的首字母	名称较长的成熟品牌	CNN、H&M、IBM
抽象标志	不含文字的抽象形状和符号	想要现代、通用标志的品牌	Pepsi、Audi、Nike 勾形标志
标志图形	代表品牌的具象符号	拥有鲜明视觉隐喻的品牌	Apple、Twitter 小鸟
组合标志	文字与符号组合	希望同时运用文字和符号的品牌	Airbnb、Dropbox、Doritos
徽章	文字／符号置于某种形状中（徽章、盾徽、印章）	传统、权威的品牌	Starbucks、BMW、Harley-Davidson

阶段 2 — 参考 Logo 的视觉研究

设计前必须完成此步骤。 阅读 PNG 格式的参考 Logo，培养视觉判断力。

1. 从 {SKILL_DIR}/assets/ 中选择 3–5 个与目标品牌的行业、风格或 Logo 类型最相关的参考 Logo。使用 Read 工具查看 PNG 文件——AI 可以对这些图像进行视觉解析。
2. 阅读所选 Logo 对应的 SVG 文件，了解其构建技巧。
3. 记录观察结果——对于研究过的每个参考 Logo，记下：
   • 设计有效的原因（形状语言、负空间、平衡）
   • 使用的构建技巧（几何图元、路径、蒙版）
   • 可为当前项目借鉴或改编的内容

这项视觉研究将直接指导设计方案。说明设计决策的理由时，请具体提及相关参考 Logo。

阶段 3 — 设计方案

编写任何代码之前，先制定结构化的设计方案。继续之前，请提交给用户确认。

设计方案模板

## Logo Design Plan: [Brand Name]

### 1. Design Concept
- **Core metaphor**: [What real-world object/shape/idea the logo abstracts]
- **Visual narrative**: [One sentence describing what the viewer should "read" from the logo]
- **Inspiration sources**: [Which reference logos (from Phase 2 visual study) inform this direction and why — cite specific PNG files studied]
- **Uniqueness check**: [How this design avoids clichéd symbols and stands apart from competitors]

### 2. Form Language
- **Geometry**: [Geometric primitives used — circles, rectangles, triangles, curves]
- **Shape semantics**: [Why these shapes were chosen — see Shape Psychology reference]
- **Proportions**: [Grid system, golden ratio, modular scale, or freeform]
- **Negative space**: [How white space participates in the design — any hidden forms or clever reveals]
- **Optical balance**: [Weight distribution and visual center of gravity]
- **Visual hierarchy**: [Which element draws the eye first, second, third]

### 3. Typography (if applicable)
- **Font personality**: [Display / Serif / Sans-serif / Monospace / Slab serif / Script — see Typography Guide]
- **Letterform treatment**: [Custom geometric construction, modified typeface, or hand-drawn feel]
- **Weight and spacing**: [Stroke width rationale, letter-spacing logic]
- **Readability at scale**: [How it reads at favicon size vs. billboard]

### 4. Color Strategy
- **Design approach**: Monochrome first, color second
- **Monochrome version**: [How the logo works in pure black on white]
- **Primary palette**: [Hex values with rationale — see Color Psychology reference]
- **Color scheme type**: [Complementary / Analogous / Triadic / Monochromatic — see Color Theory reference]
- **Color meaning**: [Psychological and cultural associations of chosen colors]
- **Contrast check**: [Sufficient contrast between elements for readability]

### 5. Construction Plan
- **svg.js strategy**: [Which shapes, groups, transforms, masks to use]
- **viewBox**: [Dimensions, typically 0 0 512 512]
- **Scalability target**: [Favicon to billboard]
- **Variants planned**: [Primary logo, compact/icon variant, monochrome variant]

阶段 4 — 使用 svg.js 构建 SVG

不要编写原始 SVG 标记。使用 svg.js 以编程方式构建 Logo。

关键规则：先做单色版本

始终先以单色（白底黑色）构建 Logo。 这样可以确保设计仅凭形式本身也能成立，而不依赖颜色作为掩饰。只有单色版本通过视觉审核后，才能添加颜色。

步骤 1：创建 HTML 工作区

在输出目录中创建名为 _logo-workspace.html 的文件，并使用以下框架：

<!DOCTYPE html>
<html>
<head>
  <title>Logo Workspace</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 48px 24px;
      min-height: 100vh;
      background: #e8e8e8;
      font-family: system-ui, sans-serif;
    }
    .preview {
      background: white;
      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    }
    .label {
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .size-row {
      display: flex;
      gap: 24px;
      align-items: end;
    }
    .size-item { text-align: center; }
    textarea#svg-output {
      position: fixed;
      bottom: 0; left: 0;
      width: 1px; height: 1px;
      opacity: 0;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div>
    <div class="label">Primary — 512×512</div>
    <div id="canvas" class="preview"></div>
  </div>
  <div>
    <div class="label">Scale test</div>
    <div class="size-row">
      <div class="size-item">
        <div class="label">128px</div>
        <div id="preview-128" class="preview"></div>
      </div>
      <div class="size-item">
        <div class="label">64px</div>
        <div id="preview-64" class="preview"></div>
      </div>
      <div class="size-item">
        <div class="label">32px</div>
        <div id="preview-32" class="preview"></div>
      </div>
    </div>
  </div>
  <textarea id="svg-output"></textarea>
  <script>
    var draw = SVG().addTo('#canvas').size(512, 512).viewbox(0, 0, 512, 512);

    // ========== LOGO DRAWING CODE (MONOCHROME FIRST) ==========

    // [AI writes svg.js code here — BLACK ON WHITE ONLY in first pass]

    // ========== END LOGO CODE ==========

    // --- Scale previews ---
    var svgMarkup = draw.node.outerHTML;
    [128, 64, 32].forEach(function(s) {
      var el = document.getElementById('preview-' + s);
      el.innerHTML = svgMarkup;
      var svg = el.querySelector('svg');
      svg.setAttribute('width', s);
      svg.setAttribute('height', s);
    });

    // --- Export ---
    var svgEl = draw.node;
    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    var output = svgEl.outerHTML;
    output = output.replace(/\s*svgjs:data="[^"]*"/g, '');
    output = output.replace(/\s*class="[^"]*"/g, '');
    document.getElementById('svg-output').value = output;
  </script>
</body>
</html>

相比单画布的关键改进：除了主要的 512px 画布，工作区现在还会显示 128px、64px 和 32px 的缩放预览。这可以直接检验可读性原则——如果徽标在 32px 下难以辨认，应先简化，再添加颜色。

重要：<textarea id="svg-output"> 用于存储导出的 SVG，以便提取。请勿移除它。

步骤 2：编写绘图代码（单色）

在 LOGO DRAWING CODE 标记之间放置 svg.js 代码。**第一轮仅使用黑色（#000 或 #1a1a1a）填充。**优先使用高级形状方法，而不是原始路径数据。

svg.js API 参考（与徽标相关的子集）

形状：

draw.rect(width, height)              // Rectangle
draw.rect(w, h).radius(r)             // Rounded rectangle
draw.circle(diameter)                  // Circle
draw.ellipse(width, height)           // Ellipse
draw.line(x1, y1, x2, y2)            // Line
draw.polygon('x1,y1 x2,y2 x3,y3')   // Polygon (auto-closed)
draw.polyline('x1,y1 x2,y2 x3,y3')  // Polyline (open)
draw.path('M0 0 L100 50 ...')         // SVG path (complex curves only)

定位与尺寸：

.move(x, y)          // Absolute position (top-left corner)
.center(x, y)        // Center element at position
.size(w, h)          // Resize element
.dx(offset)          // Relative horizontal shift
.dy(offset)          // Relative vertical shift

样式：

.fill(color)                                    // '#f06', 'none', 'currentColor'
.fill({ color: '#f06', opacity: 0.8 })          // With opacity
.stroke({ width: 2, color: '#333' })            // Stroke
.stroke({ width: 2, color: '#333', linecap: 'round', linejoin: 'round' })
.opacity(0.5)                                    // Element-level opacity

变换：

.transform({ rotate: 45 })                          // Rotate degrees
.transform({ rotate: 45, origin: [256, 256] })      // Rotate around point
.transform({ scale: 2 })                            // Uniform scale
.transform({ translateX: 10, translateY: 20 })       // Translate
.transform({ rotate: 30 }, true)                     // Additive transform

分组（复杂徽标必不可少）：

var g = draw.group()
g.rect(100, 100).fill('#f06')
g.circle(80).fill('#0f9').center(50, 50)
g.move(100, 100)              // Move entire group
g.transform({ rotate: 45 })   // Transform entire group

渐变：

var grad = draw.gradient('linear', function(add) {
  add.stop(0, '#f06')
  add.stop(0.5, '#ff0')
  add.stop(1, '#0f9')
})
grad.from(0, 0).to(1, 1)  // Diagonal direction
draw.rect(100, 100).fill(grad)

var radial = draw.gradient('radial', function(add) {
  add.stop(0, '#fff')
  add.stop(1, '#000')
})
draw.circle(100).fill(radial)

文本（文字徽标／字母徽标）：

draw.text('BRAND').font({
  family: 'Helvetica, Arial, sans-serif',
  size: 72,
  anchor: 'middle',
  weight: 'bold'
}).center(256, 256).fill('#333')

蒙版（负空间效果）：

var mask = draw.mask()
mask.rect(512, 512).fill('#fff')                    // White = fully visible
mask.circle(100).center(256, 256).fill('#000')      // Black = hidden

draw.rect(512, 512).fill('#f06').maskWith(mask)     // Circle punched out

裁剪：

var clip = draw.clip()
clip.circle(200).center(256, 256)

draw.rect(512, 512).fill('#f06').clipWith(clip)     // Only circle area visible

构建策略

几何徽标：使用 rect()、circle()、polygon() 构建。使用带变换的分组实现对称——绘制一个部分，然后克隆并旋转：

for (var i = 0; i < 6; i++) {
  draw.rect(20, 80).center(256, 200).fill('#333')
    .transform({ rotate: i * 60, origin: [256, 256] })
}

字母徽标／字母组合徽标：直线笔画使用 rect() 构建，曲线使用 path() 构建。也可以使用 text() 搭配适合 Web 的几何字体进行原型设计，然后在浏览器中验证。

抽象图形：叠加使用不同填充的形状。使用 mask() 执行类似布尔运算的操作（相减、相交）。将相关形状分组，以便统一变换。

负空间徽标：使用 mask()——白色区域显示，黑色区域隐藏。先绘制正形，再挖去负形。

徽章徽标：创建一个外部边界形状（圆形、盾形、徽章形），然后在内部放置文本／符号。使用 clip() 将元素限制在边界内。

对称图案：在一个分组中绘制一个单元，然后循环应用旋转变换：

var unit = draw.group()
unit.ellipse(40, 120).center(256, 190).fill('#f06')

for (var i = 1; i < 8; i++) {
  unit.clone().transform({ rotate: i * 45, origin: [256, 256] }).addTo(draw)
}

阶段 5 — 浏览器预览与迭代

这是关键优势：通过结构化评估实现视觉反馈循环。

步骤 1：预览

1. 在浏览器中打开工作区：

   browser_navigate → file:///absolute/path/to/_logo-workspace.html
   

2. 锁定浏览器以便交互：

   browser_lock
   

3. 截取屏幕截图，捕捉渲染后的徽标：

   browser_take_screenshot
   

步骤 2：结构化评估（单色阶段）

根据以下标准评估单色版本：

标准	问题	未通过时的处理
简洁性	我能用一句话描述它吗？有没有可以删除且不影响含义的元素？	去除不必要的形状。
可读性	32px 预览是否仍然清晰易辨？	简化或加粗元素。
独特性	竞争对手能否使用相同的基本概念？它是不是陈词滥调的符号？	重新思考隐喻。
相关性	形式语言是否符合品牌个性和受众？	重新审视品牌形容词。
视觉平衡	它看起来是否居中？视觉重量是否均匀分布？	调整位置；不要只依赖坐标。
负空间	留白是否经过刻意设计？是否有意外形成的封闭空间？	清理形状之间的间隙。
比例	笔画粗细是否一致？各元素之间是否协调？	统一宽度和间距。

步骤 3：迭代（单色）

如果单色设计未通过评估：

• 解锁浏览器：browser_unlock
• 编辑 _logo-workspace.html 中的 JavaScript
• 重新锁定并访问同一 URL，以重新加载
• 再截取一张屏幕截图
• 重复上述步骤，直到单色设计足够完善

步骤 4：添加颜色

单色版本获批后：

• 更新绘图代码，将黑色填充替换为规划好的调色板
• 截取一张新的屏幕截图
• 确认颜色增强了（而非取代了）设计效果
• 检查彩色版本是否仍符合所有评估标准

步骤 5：最终评审（颜色调整）

标准	问题
色彩协调	色彩搭配是否协调？配色方案（互补色／类似色／三角色）是否连贯？
色彩寓意	所选颜色是否强化了品牌个性和价值观？
对比度	相邻元素之间的对比度是否足够？
单色适应性	如果降低饱和度，标志是否依然有效？（应该如此——你首先设计的是单色版本。）
永恒性	配色是经典还是潮流？避免使用很快就会过时的霓虹渐变。

总共以 2–4 轮迭代为目标（单色 + 彩色）。如果需要更多轮，请重新考虑设计方法。

阶段 6 — 导出 SVG 和变体

在浏览器中确认标志效果正确后：

1. 截取快照以查找文本区域：

   browser_snapshot → find ref for textarea#svg-output
   

2. 提取 SVG 字符串：

   browser_get_input_value → ref of textarea#svg-output
   

3. 后处理 SVG：

   • 确保根 <svg> 上包含 xmlns="http://www.w3.org/2000/svg"
   • 如果尚未存在，添加 <title>[Brand Name]</title> 作为第一个子元素
   • 删除所有剩余的 svg.js 产物（svgjs:data、生成的 id 属性、class 属性）
   • 确保设置了 viewBox="0 0 512 512" 和 width="512" height="512"
   • 对于单色标志，可以考虑将颜色填充替换为 currentColor

4. 解锁浏览器：

   browser_unlock
   

5. 保存标志变体：

   • 主版本：{brand-name}-logo.svg — 全彩版本
   • 单色版：{brand-name}-logo-mono.svg — 纯黑版本（将所有填充替换为 #000 或 currentColor）
   • 紧凑版／图标版（如适用）：{brand-name}-icon.svg — 仅包含符号，不含文字，针对小尺寸使用进行优化

6. 删除工作区 — 使用 Delete 工具移除 _logo-workspace.html。

7. 确认 — “标志已保存到 {path}。在浏览器或 SVG 编辑器中打开预览。”

---

设计参考指南

形状心理学

形状承载着情感分量。选择能够强化品牌个性的形状。

形状	情感联想	最适合
圆形	团结、社群、完整、和谐、保护	社交平台、全球品牌、包容性品牌
正方形／矩形	稳定、可靠、有序、专业、安全	金融、企业、建筑、物流
三角形	方向、活力、力量、创新、抱负	科技、健身、领导力品牌
有机形状／曲线	动感、流畅、友好、自然生长	健康、养生、食品、创意机构
棱角／锐利形状	精确、前沿、大胆、颠覆	科技初创公司、游戏、工程
六边形	平衡、效率、互联（蜂巢隐喻）	科技、科学、网络

色彩理论

运用成熟的色彩关系，打造协调的配色方案：

配色方案	原理	效果
单色	同一色相的明暗色调	简洁、精致、统一
互补色	色轮上相对的色相	高对比度、充满活力
类似色	色轮上相邻的色相	协调、自然、平和
三角色	三种间隔均匀的色相	鲜明、平衡、灵动
分裂互补色	一种色相 + 其互补色两侧相邻的两种色相	保持对比，同时减轻冲突

色彩心理学

颜色	联想	使用该颜色的行业
蓝色	信任、可靠、平静、专业	金融、科技、医疗保健、企业
红色	活力、紧迫感、热情、兴奋	食品、娱乐、零售、体育
绿色	成长、健康、自然、清新、财富	健康与养生、可持续发展、金融
黄色 / 金色	乐观、温暖、清晰、声望	食品、奢侈品、儿童品牌
橙色	创意、热忱、友善	电子商务、娱乐、年轻化品牌
紫色	奢华、创意、智慧、灵性	美妆、高端品牌、教育
黑色	精致、力量、优雅、权威	奢侈品、时尚、科技
白色	纯粹、简约、极简、空间感	科技、医疗保健、现代品牌
棕色	可靠、质朴、温暖、安全	物流（UPS）、有机产品、户外品牌
蓝绿色 / 青色	创新、清晰、平衡	AI / 科技、健康与养生、现代企业

字体指南（适用于字标、字母标、字母组合标）

字体类型	个性	适用场景
展示字体	装饰性强、独特、引人注目	品牌风格大胆且鲜明
衬线字体	历久弥新、专业、权威	传统、奢侈品、编辑类品牌
无衬线字体	现代、简约、易读	科技、初创公司、风格简洁的品牌形象
等宽字体	技术感、复古、面向开发者	开发工具、科技品牌、游戏
粗衬线字体	强劲、权威、有冲击力	希望吸引关注的品牌
手写字体	优雅、富有创意、个性化	美妆、婚礼、手工品牌

使用 svg.js 以程序化方式构建字母形状时，最终徽标应优先采用几何构造（使用 rect()、circle()、path() 绘制字母），而不是使用 text()——这样可避免导出的 SVG 出现字体依赖问题。

---

设计原则——向优秀作品学习

生成前，请先研究 assets/ 中的参考徽标。**查看 PNG 文件以直观了解每个徽标；查看 SVG 文件以理解其构造方式。**主要规律：

Apple——单一、标志性的轮廓。一个路径，一种形状，广为人知。缺口营造出不对称感与记忆点。

OpenAI——通过几何对称实现数学般的精准。六边形结构，由相互交错的路径构成。

Anthropic——将字母标简化为纯粹的几何形状。大胆、结构鲜明，无论尺寸大小都令人过目不忘。

Cursor——将三维棱镜以平面形式呈现。明暗分界让单一形状产生纵深错觉。

Figma——由模块化积木组成。圆角矩形排列成网格，每个形状使用不同颜色。简单的部件，复杂的整体。

Google——用四段简单弧线构成字母“G”。纯粹的几何形状通过色彩分区形成辨识度。

FedEx——“E”和“x”之间的负空间中隐藏着箭头——这一巧妙的发现强化了品牌承诺。

Nike——抽象的勾形标志传递动感与活力。无需文字。极致简约。

Starbucks——圆形边界内包含细致插画的徽章。它表明，徽章可以在简洁的框架内呈现复杂细节。

质量检查清单

定稿前，请根据以下五项原则逐一核验：

简洁：

• 能用一句话描述这个标志
• 没有不必要的元素——每个形状都有意义
• 最终设计中形状组不超过 5 个
• 文件大小低于 5KB（理想情况下低于 2KB）

历久弥新：

• 避免使用流行的渐变、纹理或特效
• 10 年后看起来依然合适
• 设计立足于品牌价值，而非当下的审美潮流

独特：

• 不使用陈词滥调的符号（灯泡、地球、通用飘带）
• 与同一行业的竞争对手有明显区别
• 包含令人印象深刻的细节或隐藏含义

相关性：

• 造型语言与品牌个性（第一阶段的形容词）相符
• 配色符合行业和受众的预期
• 语气得当（活泼、专业或奢华）

可读性：

• 浏览器截图中的标志简洁、专业
• 32px 预览仍清晰易辨
• 文字元素（如有）在各种尺寸下都清晰锐利
• 元素之间对比度充足
• 在 viewBox 中视觉居中，边距为 8–12%

技术质量：

• 单色版本可独立使用
• 没有形状重叠造成的意外瑕疵
• 最终的 .svg 文件整洁——没有 svg.js 生成的残留内容，也没有不必要的 ID 或类
• SVG 格式有效，可由任何浏览器解析
• 已交付标志的不同版本（主版本、单色版本，以及适用时的紧凑版／图标版）

常见误区

• 跳过品牌身份的深入调研：以“做点酷的东西”为目标设计的标志会很普通。请投入时间完成第一阶段。
• 过早使用颜色：先设计单色版本。颜色应起到增强作用，而不是挽救薄弱的造型。
• 过度复杂：极简标志中有 5 个以上形状组就太复杂了。请简化。
• 细节过小、缩放后消失：如果在 32×32 下看不见，就删掉。在工作区进行缩放测试即可发现这个问题。
• 造型过于普通：每个形状都必须承载与品牌相关的特定含义。避免设计成“抽象色块”。
• 符号陈词滥调：用灯泡表示创意、用地球表示全球化、用齿轮表示工程——请寻找更新颖的隐喻。
• 视觉居中效果不佳：使用截图进行视觉核验——不要只相信坐标。
• 描边粗细不一致：保持各元素的视觉重量一致。
• 原始路径数据：只有在曲线无法通过基本图形构建时，才使用 draw.path()。优先使用 rect()、circle()、polygon()、group() + 变换。
• 跳过迭代：务必在浏览器中预览。未经视觉核验，绝不要交付标志。
• 只交付单一版本：至少始终交付彩色版和单色版。

各行业的风格方向

行业	常见造型语言	配色方向	形状倾向
科技／AI	几何、棱角分明、节点互联	蓝色、渐变、单色	六边形、三角形、锐角
金融	稳健、对称、横向线条有力	藏青色、金色、深绿色	正方形、矩形、盾牌
健康	有机曲线、圆润、流畅	绿色、蓝绿色、暖白色	圆形、曲线、有机造型
食品与饮料	温暖、手工感、圆润	大地色系、红色、橙色	圆形、有机形状
教育	开放、向上、书本／光线隐喻	蓝色、绿色、暖黄色	向上的三角形、打开的书本
创意／设计	不对称、大胆、不拘一格	鲜艳、多色、黑色	混合造型、打破常规
电子商务	动感、向前、箭头元素	橙色、蓝色、纯白色	箭头、动感斜角
游戏	锐利、棱角分明、充满活力	霓虹色、深色背景、高对比度	锐角、大胆的几何造型
奢侈品	精致、简约、高对比度	黑色、金色、深宝石色	细线、衬线字形
儿童／教育	圆润、活泼、友好	明亮的原色、柔和的浅色	圆形、柔和圆润的形状

这些只是起点，并非规则。品牌需要时，可以打破常规。