mcpField
S
svg-logo-creator

svg-logo-creator

github.com/kbravh设计与 UI098 次安装1 周前更新
代码仓库

关于 svg-logo-creator

svg-logo-creator 是一项根据概念简报或描述创建可缩放 SVG 标志的技能。它涵盖需求收集、设计规划、多种标志变体制作，以及无障碍性和代码质量检查。

主要功能

  1. 01收集品牌与视觉需求
  2. 02规划 SVG 结构和配色
  3. 03制作多种标志变体
  4. 04采用可缩放 SVG 做法
  5. 05添加无障碍标签
  6. 06优化 SVG 代码

适用场景

  1. 01根据概念简报创建标志
  2. 02准备横向与竖向变体
  3. 03生成图标和字标文件
  4. 04检查 SVG 无障碍性与缩放效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/kbravh/skills --skill svg-logo-creator

安装后在 Claude Code 中输入/svg-logo-creator确认已加载。

详细介绍

SVG Logo Creator

根据概念简介或描述，创建专业、可缩放的 SVG 标志。

输入要求

开始创建前，收集或确认以下信息：

  • 文本：准确的公司／品牌名称及任何标语
  • 标志类型：文字标志、字母标志、象形标志、抽象标志、组合标志或徽章标志
  • 视觉概念：核心意象、隐喻或风格方向
  • 颜色：主色和辅助色（建议使用十六进制值）
  • 字体方向：现代／经典、几何／人文主义、粗体／细体

如果基于标志构思概念简介开展工作，这些细节应已明确。

创建工作流

1. 规划设计

编写 SVG 代码前：

  • 在脑海中勾勒基本形状
  • 找出可复用元素（定义一次，再通过 <use> 引用）
  • 规划 viewBox 尺寸（通常为 100x100 或按比例设置）
  • 将调色板定义为 CSS 自定义属性
2. 创建主标志

编写简洁、语义清晰的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60" role="img" aria-label="Company Name logo">
  <style>
    :root {
      --primary: #2563eb;
      --secondary: #1e40af;
      --text: #0f172a;
    }
  </style>
  <defs>
    
  </defs>
  
</svg>
3. 生成变体

创建以下标准变体：

变体使用场景备注
主版／横版默认场景、宽阔空间图标和文本并排的完整标志
堆叠版／竖版方形空间、移动设备图标置于文本上方
纯图标版网站图标、应用图标、小空间不带文本的符号
纯文字标志已明确图标所指内容时不带符号的文本
单色版单色场景黑色或白色版本
反转版深色背景适用于深色背景的浅色
4. 保存文件

使用统一的命名方式：

logo-primary.svg
logo-stacked.svg
logo-icon.svg
logo-wordmark.svg
logo-mono-black.svg
logo-mono-white.svg
logo-inverted.svg

SVG 最佳实践

结构
  • 使用 viewBox 实现可缩放性，切勿使用固定的 width/height
  • 在 <style> 中将颜色定义为 CSS 自定义属性
  • 使用 <g> 对相关元素分组，并添加描述性 id 属性
  • 将可复用形状放入 <defs>，并通过 <use> 引用
优化
  • 移除不必要的属性（编辑器元数据、默认值）
  • 在效果相同时，优先使用简单路径而非复杂形状
  • 尽可能合并颜色相同且相邻的路径
  • 将坐标四舍五入到小数点后 1-2 位
  • 移除空分组和未使用的定义
无障碍性
  • 为根 <svg> 元素添加 role="img"
  • 添加描述性文本作为 aria-label
  • 或将 <title> 作为首个子元素，提供无障碍名称
SVG 中的字体排印

对于标志中的文本，优先选择：

  1. 转换为路径：在不同系统间兼容性最高
  2. 网页安全字体：文本必须保持可编辑时使用
  3. 嵌入字体：仅在绝对必要时使用（会增加文件大小）

文本转路径工作流示例：


<path d="M10 20 L10 40 L20 40..." />

示例：组合标志

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" role="img" aria-label="Acme Inc logo">
  <style>
    .icon { fill: #2563eb; }
    .text { fill: #0f172a; }
  </style>
  <defs>
    <g id="icon">
      <circle cx="20" cy="25" r="15" />
      <path d="M12 25 L20 18 L28 25 L20 32 Z" fill="#fff" />
    </g>
  </defs>

  
  <use href="#icon" class="icon" />

  
  <g class="text" transform="translate(45, 20)">
    
  </g>
</svg>

交付检查清单

完成前：

  • 已创建所有变体
  • 颜色符合规范
  • 可从 16px 正常缩放至 1000px 以上
  • 已包含无障碍标签
  • 代码简洁且经过优化
  • 命名规范统一
  • 已在浅色和深色背景上测试

使用指南输出

创建标志后，提供简要的使用指南：

## Logo Usage

**Clear space**: Maintain padding equal to the height of the icon
**Minimum size**: 24px for icon, 80px for full logo
**Backgrounds**: Use primary on light, reversed on dark
**Don't**: Stretch, rotate, change colors, add effects

评论

支持 Markdown