svg-logo-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVG Logo Creator

SVG标志生成器

Create professional, scalable SVG logos from concept briefs or descriptions.

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

Input Requirements

输入要求

Before creating, gather or confirm:

Text: Exact company/brand name and any tagline
Logo type: Wordmark, lettermark, pictorial, abstract, combination, or emblem
Visual concept: Core imagery, metaphor, or style direction
Colors: Primary and secondary colors (hex values preferred)
Typography direction: Modern/classic, geometric/humanist, bold/light

If working from a logo-ideation concept brief, these details should already be specified.

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

文本内容：准确的公司/品牌名称及任何标语
标志类型：文字标志、字母标志、图形标志、抽象标志、组合标志或徽章式标志
视觉概念：核心意象、隐喻或风格方向
色彩：主色和辅助色（优先提供十六进制色值）
排版方向：现代/经典、几何/人文、粗体/细体

如果是基于logo构思环节的概念简报进行创作，这些细节应已明确。

Creation Workflow

创建流程

1. Plan the Design

1. 设计规划

Before writing SVG code:

Sketch the basic shapes mentally
Identify reusable elements (define once, reference with
```
<use>
```
)
Plan the viewBox dimensions (typically 100x100 or proportional)
Determine color palette as CSS custom properties

编写SVG代码前：

在脑海中勾勒基础形状
识别可复用元素（定义一次，通过
```
<use>
```
引用）
规划viewBox尺寸（通常为100x100或成比例）
将调色板定义为CSS自定义属性

2. Create Primary Logo

2. 创建主标志

Write clean, semantic SVG:

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>
    <!-- Reusable elements here -->
  </defs>
  <!-- Logo content -->
</svg>

编写简洁、语义化的SVG代码：

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>
    <!-- Reusable elements here -->
  </defs>
  <!-- Logo content -->
</svg>

3. Generate Variations

3. 生成变体

Create these standard variations:

Variation	Use case	Notes
Primary/horizontal	Default, wide spaces	Full logo with icon and text side-by-side
Stacked/vertical	Square spaces, mobile	Icon above text
Icon-only	Favicons, app icons, small spaces	Symbol without text
Wordmark-only	When icon context is established	Text without symbol
Monochrome	Single-color contexts	Black or white version
Inverted	Dark backgrounds	Light colors for dark bg

创建以下标准变体：

变体类型	使用场景	说明
主标志/横向版	默认场景、宽空间	包含图标和文字的完整标志，左右排列
堆叠/纵向版	方形空间、移动端	图标位于文字上方
仅图标版	网站图标、应用图标、小空间	无文字的标志符号
仅文字版	图标语境已明确的场景	无符号的文字标志
单色版	单色彩场景	黑色或白色版本
反色版	深色背景	适配深色背景的浅色版本

4. Save Files

4. 文件保存

Use consistent naming:

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

使用统一的命名规则：

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

SVG Best Practices

SVG最佳实践

Structure

结构规范

Use
```
viewBox
```
for scalability, never fixed width/height
Define colors as CSS custom properties in
```
<style>
```
Group related elements with
```
<g>
```
and descriptive
```
id
```
attributes
Put reusable shapes in
```
<defs>
```
and reference with
```
<use>
```

使用
```
viewBox
```
实现可缩放，切勿使用固定宽高
在
```
<style>
```
中定义CSS自定义属性来设置颜色
使用
```
<g>
```
元素对相关元素分组，并添加描述性
```
id
```
属性
将可复用形状放入
```
<defs>
```
中，通过
```
<use>
```
引用

Optimization

优化技巧

Remove unnecessary attributes (editor metadata, default values)
Use simple paths over complex shapes when equivalent
Combine adjacent paths of same color when possible
Round coordinates to 1-2 decimal places
Remove empty groups and unused definitions

移除不必要的属性（编辑器元数据、默认值）
当效果相同时，优先使用简单路径而非复杂形状
尽可能合并同色相邻路径
将坐标值四舍五入到1-2位小数
移除空组和未使用的定义

Accessibility

无障碍访问

Add
```
role="img"
```
to root
```
<svg>
```
element
Include
```
aria-label
```
with descriptive text
Or use
```
<title>
```
as first child for accessible name

为根
```
<svg>
```
元素添加
```
role="img"
```
属性
包含带有描述性文本的
```
aria-label
```
或者将
```
<title>
```
作为第一个子元素，提供无障碍名称

Typography in SVG

SVG中的排版

For text in logos, prefer:

Convert to paths: Most reliable across systems
Web-safe fonts: If text must remain editable
Embedded fonts: Only if absolutely necessary (increases file size)

Example text-to-path workflow:

svg

<!-- Instead of <text>, use paths for reliability -->
<path d="M10 20 L10 40 L20 40..." /> <!-- Letter shapes -->

对于标志中的文本，优先选择以下方式：

转换为路径：在各系统中兼容性最佳
网络安全字体：如果文本必须保持可编辑
嵌入字体：仅在绝对必要时使用（会增加文件大小）

文本转路径示例：

svg

<!-- Instead of <text>, use paths for reliability -->
<path d="M10 20 L10 40 L20 40..." /> <!-- Letter shapes -->

Example: Combination Logo

示例：组合标志

svg

<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>

  <!-- Icon -->
  <use href="#icon" class="icon" />

  <!-- Wordmark (as paths for reliability) -->
  <g class="text" transform="translate(45, 20)">
    <!-- Text paths would go here -->
  </g>
</svg>

svg

<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>

  <!-- Icon -->
  <use href="#icon" class="icon" />

  <!-- Wordmark (as paths for reliability) -->
  <g class="text" transform="translate(45, 20)">
    <!-- Text paths would go here -->
  </g>
</svg>

Delivery Checklist

交付检查清单

Usage Guidelines Output

使用指南输出

After creating logos, provide brief usage guidance:

markdown

undefined

创建完标志后，提供简短的使用指导：

markdown

undefined

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

undefined

留白空间：保持与图标高度相等的内边距 最小尺寸：图标最小24px，完整标志最小80px 背景适配：浅色背景使用主色版本，深色背景使用反色版本 禁止操作：拉伸、旋转、修改颜色、添加特效

undefined