moai-tool-svg

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVG Creation and Optimization Specialist

SVG创建与优化专家

Comprehensive SVG development covering vector graphics creation, SVGO optimization, icon systems, data visualizations, and animations. This skill provides patterns for all SVG workflows from basic shapes to complex animated graphics.

全面的SVG开发指南，涵盖矢量图形创建、SVGO优化、图标系统、数据可视化及动画制作。本技能提供从基础形状到复杂动画图形的全SVG工作流实践方案。

Quick Reference (30 seconds)

快速参考（30秒掌握）

Basic SVG Template

基础SVG模板

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <title>Accessible Title</title>
  <desc>Description for screen readers</desc>
  <!-- Content here -->
</svg>

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <title>Accessible Title</title>
  <desc>Description for screen readers</desc>
  <!-- Content here -->
</svg>

Common Shapes Cheatsheet

常用速查图形

Rectangle:

<rect x="10" y="10" width="80" height="60" rx="5" />

Circle:

<circle cx="50" cy="50" r="40" />

Ellipse:

<ellipse cx="50" cy="50" rx="40" ry="25" />

Line:

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

Polyline:

<polyline points="10,10 50,50 90,10" fill="none" stroke="black" />

Polygon:

<polygon points="50,10 90,90 10,90" />

矩形：

<rect x="10" y="10" width="80" height="60" rx="5" />

圆形：

<circle cx="50" cy="50" r="40" />

椭圆：

<ellipse cx="50" cy="50" rx="40" ry="25" />

直线：

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

折线：

<polyline points="10,10 50,50 90,10" fill="none" stroke="black" />

多边形：

<polygon points="50,10 90,90 10,90" />

Path Commands Quick Reference

路径命令速查

Movement Commands:

M x y: Move to absolute position
m dx dy: Move relative
L x y: Line to absolute
l dx dy: Line relative
H x: Horizontal line absolute
h dx: Horizontal line relative
V y: Vertical line absolute
v dy: Vertical line relative
Z: Close path

Curve Commands:

C x1 y1 x2 y2 x y: Cubic bezier (two control points)
S x2 y2 x y: Smooth cubic (reflects previous control)
Q x1 y1 x y: Quadratic bezier (one control point)
T x y: Smooth quadratic (reflects previous control)
A rx ry rotation large-arc sweep x y: Arc

移动命令：

M x y：移动到绝对位置
m dx dy：相对移动
L x y：绘制到绝对位置的直线
l dx dy：绘制相对位置的直线
H x：绘制绝对位置的水平线
h dx：绘制相对位置的水平线
V y：绘制绝对位置的垂直线
v dy：绘制相对位置的垂直线
Z：闭合路径

曲线命令：

C x1 y1 x2 y2 x y：三次贝塞尔曲线（两个控制点）
S x2 y2 x y：平滑三次贝塞尔曲线（沿用前一个控制点的镜像）
Q x1 y1 x y：二次贝塞尔曲线（一个控制点）
T x y：平滑二次贝塞尔曲线（沿用前一个控制点的镜像）
A rx ry rotation large-arc sweep x y：圆弧

SVGO CLI Commands

SVGO命令行工具指令

Install globally:

npm install -g svgo

Optimize single file:

svgo input.svg -o output.svg

Optimize directory:

svgo -f ./src/icons -o ./dist/icons

Show optimization stats:

svgo input.svg --pretty --indent=2

Use config file:

svgo input.svg --config svgo.config.mjs

全局安装：

npm install -g svgo

优化单个文件：

svgo input.svg -o output.svg

优化目录文件：

svgo -f ./src/icons -o ./dist/icons

显示优化统计信息：

svgo input.svg --pretty --indent=2

使用配置文件：

svgo input.svg --config svgo.config.mjs

Fill and Stroke Quick Reference

填充与描边速查

Fill properties: fill, fill-opacity, fill-rule (nonzero, evenodd)

Stroke properties: stroke, stroke-width, stroke-opacity, stroke-linecap (butt, round, square), stroke-linejoin (miter, round, bevel), stroke-dasharray, stroke-dashoffset

填充属性：fill、fill-opacity、fill-rule（nonzero、evenodd）

描边属性：stroke、stroke-width、stroke-opacity、stroke-linecap（butt、round、square）、stroke-linejoin（miter、round、bevel）、stroke-dasharray、stroke-dashoffset

Implementation Guide (5 minutes)

实现指南（5分钟掌握）

SVG Document Structure

SVG文档结构

The SVG element requires the xmlns attribute for standalone files. The viewBox defines the coordinate system as "minX minY width height". Width and height set the rendered size.

xml

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 200"
     width="200" height="200"
     preserveAspectRatio="xMidYMid meet">

  <!-- Reusable definitions -->
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <!-- Grouped content -->
  <g id="main-group" transform="translate(10, 10)">
    <rect width="100" height="100" fill="url(#grad1)" />
  </g>
</svg>

独立SVG文件必须包含xmlns属性。viewBox定义坐标系格式为"minX minY width height"。Width和height设置渲染尺寸。

xml

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 200"
     width="200" height="200"
     preserveAspectRatio="xMidYMid meet">

  <!-- 可复用定义 -->
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <!-- 分组内容 -->
  <g id="main-group" transform="translate(10, 10)">
    <rect width="100" height="100" fill="url(#grad1)" />
  </g>
</svg>

Creating Reusable Symbols

创建可复用符号

Symbols define reusable graphics that can be instantiated with use elements. They support their own viewBox for scaling.

xml

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </symbol>
  </defs>

  <!-- Use the symbol multiple times -->
  <use href="#icon-star" x="0" y="0" width="24" height="24" />
  <use href="#icon-star" x="30" y="0" width="24" height="24" fill="gold" />
  <use href="#icon-star" x="60" y="0" width="48" height="48" />
</svg>

Symbol定义可复用图形，可通过use元素实例化，支持自定义viewBox实现缩放。

xml

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </symbol>
  </defs>

  <!-- 多次复用符号 -->
  <use href="#icon-star" x="0" y="0" width="24" height="24" />
  <use href="#icon-star" x="30" y="0" width="24" height="24" fill="gold" />
  <use href="#icon-star" x="60" y="0" width="48" height="48" />
</svg>

Path Creation Patterns

路径创建模式

Simple icon path combining moves, lines, and curves:

xml

<path d="M10 20 L20 10 L30 20 L20 30 Z" />

Rounded rectangle using arcs:

xml

<path d="M15 5 H85 A10 10 0 0 1 95 15 V85 A10 10 0 0 1 85 95 H15 A10 10 0 0 1 5 85 V15 A10 10 0 0 1 15 5 Z" />

Heart shape using cubic beziers:

xml

<path d="M50 88 C20 65 5 45 5 30 A15 15 0 0 1 35 30 Q50 45 50 45 Q50 45 65 30 A15 15 0 0 1 95 30 C95 45 80 65 50 88 Z" />

结合移动、直线与曲线的简单图标路径：

xml

<path d="M10 20 L20 10 L30 20 L20 30 Z" />

使用圆弧的圆角矩形：

xml

<path d="M15 5 H85 A10 10 0 0 1 95 15 V85 A10 10 0 0 1 85 95 H15 A10 10 0 0 1 5 85 V15 A10 10 0 0 1 15 5 Z" />

使用三次贝塞尔曲线的心形：

xml

<path d="M50 88 C20 65 5 45 5 30 A15 15 0 0 1 35 30 Q50 45 50 45 Q50 45 65 30 A15 15 0 0 1 95 30 C95 45 80 65 50 88 Z" />

Gradient Implementation

渐变实现

Linear gradient from left to right:

xml

<defs>
  <linearGradient id="horizontal-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db" />
    <stop offset="50%" stop-color="#9b59b6" />
    <stop offset="100%" stop-color="#e74c3c" />
  </linearGradient>
</defs>
<rect fill="url(#horizontal-grad)" width="200" height="100" />

Radial gradient with focal point:

xml

<defs>
  <radialGradient id="sphere-grad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
    <stop offset="0%" stop-color="#ffffff" />
    <stop offset="100%" stop-color="#3498db" />
  </radialGradient>
</defs>
<circle fill="url(#sphere-grad)" cx="50" cy="50" r="40" />

从左到右的线性渐变：

xml

<defs>
  <linearGradient id="horizontal-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db" />
    <stop offset="50%" stop-color="#9b59b6" />
    <stop offset="100%" stop-color="#e74c3c" />
  </linearGradient>
</defs>
<rect fill="url(#horizontal-grad)" width="200" height="100" />

带焦点的径向渐变：

xml

<defs>
  <radialGradient id="sphere-grad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
    <stop offset="0%" stop-color="#ffffff" />
    <stop offset="100%" stop-color="#3498db" />
  </radialGradient>
</defs>
<circle fill="url(#sphere-grad)" cx="50" cy="50" r="40" />

SVGO Configuration

SVGO配置

Create svgo.config.mjs in project root:

javascript

export default {
  multipass: true,
  plugins: [
    'preset-default',
    'prefixIds',
    {
      name: 'sortAttrs',
      params: {
        xmlnsOrder: 'alphabetical'
      }
    },
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-name', 'class']
      }
    }
  ]
};

Configuration preserving specific elements:

javascript

export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: {
            preserve: ['icon-', 'logo-']
          }
        }
      }
    }
  ]
};

在项目根目录创建svgo.config.mjs：

javascript

export default {
  multipass: true,
  plugins: [
    'preset-default',
    'prefixIds',
    {
      name: 'sortAttrs',
      params: {
        xmlnsOrder: 'alphabetical'
      }
    },
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-name', 'class']
      }
    }
  ]
};

保留特定元素的配置：

javascript

export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: {
            preserve: ['icon-', 'logo-']
          }
        }
      }
    }
  ]
};

Embedding SVG in React

在React中嵌入SVG

Inline SVG component:

tsx

const Icon = ({ size = 24, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke={color} strokeWidth="2" />
  </svg>
);

SVG sprite with use element:

tsx

const SpriteIcon = ({ name, size = 24 }) => (
  <svg width={size} height={size}>
    <use href={`/sprites.svg#${name}`} />
  </svg>
);

内联SVG组件：

tsx

const Icon = ({ size = 24, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke={color} strokeWidth="2" />
  </svg>
);

使用use元素的SVG精灵图：

tsx

const SpriteIcon = ({ name, size = 24 }) => (
  <svg width={size} height={size}>
    <use href={`/sprites.svg#${name}`} />
  </svg>
);

Text Elements

文本元素

Basic text positioning:

xml

<text x="50" y="50" text-anchor="middle" dominant-baseline="middle"
      font-family="Arial" font-size="16" fill="#333">
  Centered Text
</text>

Text on a path:

xml

<defs>
  <path id="text-curve" d="M10 80 Q95 10 180 80" fill="none" />
</defs>
<text font-size="14">
  <textPath href="#text-curve">Text following a curved path</textPath>
</text>

基础文本定位：

xml

<text x="50" y="50" text-anchor="middle" dominant-baseline="middle"
      font-family="Arial" font-size="16" fill="#333">
  居中文本
</text>

路径文本：

xml

<defs>
  <path id="text-curve" d="M10 80 Q95 10 180 80" fill="none" />
</defs>
<text font-size="14">
  <textPath href="#text-curve">沿曲线排列的文本</textPath>
</text>

Advanced Implementation (10+ minutes)

高级实现（10分钟以上掌握）

Complex Filter Effects

复杂滤镜效果

Drop shadow with blur:

xml

<defs>
  <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feOffset in="blur" dx="3" dy="3" result="offsetBlur" />
    <feMerge>
      <feMergeNode in="offsetBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>

Glow effect:

xml

<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="coloredBlur" />
  <feMerge>
    <feMergeNode in="coloredBlur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

带模糊的投影效果：

xml

<defs>
  <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feOffset in="blur" dx="3" dy="3" result="offsetBlur" />
    <feMerge>
      <feMergeNode in="offsetBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>

发光效果：

xml

<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="coloredBlur" />
  <feMerge>
    <feMergeNode in="coloredBlur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

Clipping and Masking

裁剪与遮罩

Clip path for cropping:

xml

<defs>
  <clipPath id="circle-clip">
    <circle cx="50" cy="50" r="40" />
  </clipPath>
</defs>
<image href="photo.jpg" width="100" height="100" clip-path="url(#circle-clip)" />

Gradient mask for fade effect:

xml

<defs>
  <linearGradient id="fade-grad">
    <stop offset="0%" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </linearGradient>
  <mask id="fade-mask">
    <rect width="100" height="100" fill="url(#fade-grad)" />
  </mask>
</defs>
<rect width="100" height="100" fill="blue" mask="url(#fade-mask)" />

用于裁切的裁剪路径：

xml

<defs>
  <clipPath id="circle-clip">
    <circle cx="50" cy="50" r="40" />
  </clipPath>
</defs>
<image href="photo.jpg" width="100" height="100" clip-path="url(#circle-clip)" />

用于淡入淡出效果的渐变遮罩：

xml

<defs>
  <linearGradient id="fade-grad">
    <stop offset="0%" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </linearGradient>
  <mask id="fade-mask">
    <rect width="100" height="100" fill="url(#fade-grad)" />
  </mask>
</defs>
<rect width="100" height="100" fill="blue" mask="url(#fade-mask)" />

CSS Animation Integration

CSS动画集成

Keyframe animation for SVG elements:

css

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.animated-circle {
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}

Stroke drawing animation:

css

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

SVG元素的关键帧动画：

css

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.animated-circle {
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}

描边绘制动画：

css

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Accessibility Best Practices

可访问性最佳实践

Always include title and desc for meaningful graphics:

xml

<svg role="img" aria-labelledby="title desc">
  <title id="title">Company Logo</title>
  <desc id="desc">A blue mountain with snow-capped peak</desc>
  <!-- graphic content -->
</svg>

For decorative SVGs, hide from screen readers:

xml

<svg aria-hidden="true" focusable="false">
  <!-- decorative content -->
</svg>

有意义的图形必须包含title和desc：

xml

<svg role="img" aria-labelledby="title desc">
  <title id="title">公司Logo</title>
  <desc id="desc">带有积雪山顶的蓝色山脉</desc>
  <!-- 图形内容 -->
</svg>

装饰性SVG需对屏幕阅读器隐藏：

xml

<svg aria-hidden="true" focusable="false">
  <!-- 装饰内容 -->
</svg>

Performance Optimization

性能优化

Reduce precision in path data from 6 decimals to 2:

Before:

M10.123456 20.654321 L30.987654 40.123456

After:

M10.12 20.65 L30.99 40.12

Convert shapes to paths for smaller file size when appropriate. Use symbols for repeated elements. Apply SVGZ compression for 20-50% size reduction.

For detailed patterns on each topic, see the modules directory.

将路径数据精度从6位小数降低到2位：

优化前：

M10.123456 20.654321 L30.987654 40.123456

优化后：

M10.12 20.65 L30.99 40.12

在合适的情况下将形状转换为路径以减小文件大小。使用符号复用重复元素。应用SVGZ压缩可减少20-50%的文件体积。

各主题的详细实践方案，请查看modules目录。

Module Index

模块索引

modules/svg-basics.md: Document structure, coordinate system, shapes, paths, text
modules/svg-styling.md: Fills, strokes, gradients, patterns, filters, clipping, masking
modules/svg-optimization.md: SVGO configuration, compression, sprites, performance
modules/svg-animation.md: CSS animations, SMIL, JavaScript, interaction patterns

modules/svg-basics.md：文档结构、坐标系、形状、路径、文本
modules/svg-styling.md：填充、描边、渐变、图案、滤镜、裁剪、遮罩
modules/svg-optimization.md：SVGO配置、压缩、精灵图、性能优化
modules/svg-animation.md：CSS动画、SMIL、JavaScript、交互模式

Works Well With

协同工具

moai-domain-frontend: React/Vue SVG component integration
moai-docs-generation: SVG diagram generation for documentation
moai-domain-uiux: Icon systems and design system integration

moai-domain-frontend：React/Vue SVG组件集成
moai-docs-generation：文档用SVG图表生成
moai-domain-uiux：图标系统与设计系统集成