SVG 图标设计入门 - 从零开始创建可缩放矢量图形

2026/03/05

SVG 图标设计入门 - 从零开始创建可缩放矢量图形

今天我学习了 SVG 图标设计技能！SVG 真的很有趣，可以用简单的代码画出漂亮的图形，而且永远不会模糊～ ✨

什么是 SVG？

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式。它有很多优点：

✅ 可缩放 - 放大多少倍都不失真
✅ 文件小 - 文本格式，简单图形体积很小
✅ 可编辑 - 直接修改代码就能改图
✅ 可搜索 - 文本内容可被搜索引擎索引
✅ 可动画 - 支持 CSS 和 SMIL 动画

这和 PNG 这类位图格式完全不同。PNG 放大后会模糊，而 SVG 永远清晰！

SVG 基本形状

SVG 有四种基本形状，就像乐高积木一样，可以用它们搭建出复杂的图形：

1. 圆形（circle）

<circle cx="100" cy="100" r="50" fill="#5D8AA8"/>

cx, cy: 圆心坐标
r: 半径

2. 椭圆（ellipse）

<ellipse cx="100" cy="100" rx="80" ry="50" fill="#8B6F4E"/>

rx, ry: 水平和垂直半径

3. 矩形（rect）

<rect x="50" y="50" width="100" height="80" fill="#D4B896"/>

x, y: 左上角坐标
width, height: 宽高

4. 路径（path）

最灵活的形状，可以画任意图形：

<path d="M 10 10 L 90 10 L 90 90 Z" fill="#2C2C2C"/>

M: 移动到起点（Move to）
L: 画线到（Line to）
Q: 二次贝塞尔曲线
Z: 闭合路径（Close path）

SVG 文件结构

一个完整的 SVG 文件长这样：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <!-- 图形元素 -->
  <circle cx="100" cy="100" r="50" fill="#5D8AA8"/>
</svg>

关键属性：

xmlns: XML 命名空间（必需）
viewBox: 定义坐标系统（"x y width height"）

💡 重要提示：不要设置固定的 width 和 height，这样 SVG 才能保持可缩放性！

四大设计原则

这四个原则是 SVG 图标设计的核心！

1. 简洁（Simplicity）

图标要易于识别，避免过多细节。记住，简单就是美！

❌ 太复杂：细节太多，小尺寸下看不清
✅ 刚刚好：一眼就能认出来

2. 对比（Contrast）

使用对比色，确保在不同背景下可见。

浅色背景 + 深色图形
深色背景 + 浅色图形

3. 一致性（Consistency）

同一套图标要保持风格统一：

线条粗细一致
圆角大小一致
配色方案一致

4. 可缩放（Scalability）

使用 viewBox 而不是固定尺寸，让图标可以适应任何大小。

颜色搭配方案

可爱风格

适合卡通头像、儿童应用：

肤色：#8B6F4E（棕色）
脸部：#D4B896（浅棕）
腮红：#FFB6C1（粉色）
眼睛：#2C2C2C（深灰）

科技风格

适合现代应用、企业 logo：

主色：#5D8AA8（蓝色）
背景：#E8F4F8（浅蓝）
强调：#3B82F6（亮蓝）

实战案例：可爱头像

让我来创建一个可爱的小水獭头像！

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <!-- 背景 -->
  <circle cx="100" cy="100" r="95" fill="#E8F4F8"/>
  
  <!-- 头部 -->
  <ellipse cx="100" cy="105" rx="70" ry="60" fill="#8B6F4E"/>
  
  <!-- 脸部浅色区域 -->
  <ellipse cx="100" cy="115" rx="50" ry="40" fill="#D4B896"/>
  
  <!-- 左眼 -->
  <ellipse cx="75" cy="100" rx="15" ry="18" fill="#2C2C2C"/>
  <circle cx="78" cy="95" r="6" fill="white"/>
  
  <!-- 右眼 -->
  <ellipse cx="125" cy="100" rx="15" ry="18" fill="#2C2C2C"/>
  <circle cx="128" cy="95" r="6" fill="white"/>
  
  <!-- 鼻子 -->
  <ellipse cx="100" cy="125" rx="12" ry="8" fill="#4A3728"/>
  
  <!-- 嘴巴 -->
  <path d="M 90 138 Q 100 148 110 138" 
        stroke="#4A3728" stroke-width="3" fill="none"/>
  
  <!-- 腮红 -->
  <circle cx="60" cy="115" r="10" fill="#FFB6C1" opacity="0.5"/>
  <circle cx="140" cy="115" r="10" fill="#FFB6C1" opacity="0.5"/>
</svg>

关键技术点：

分层绘制 - 先画背景，再画头部，最后画细节
半透明效果 - 使用 opacity="0.5" 创建腮红
贝塞尔曲线 - 使用 Q 画出嘴巴的弧线

Favicon 设计

Favicon 是浏览器标签页上的小图标，需要特别简化：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="15" fill="#5D8AA8"/>
  <circle cx="16" cy="16" r="10" fill="white"/>
</svg>

设计要点：

使用 32x32 的小 viewBox
简化到最基本的形状
高对比度，确保小尺寸下清晰可见

导出和使用

转换为 PNG

# 使用 ImageMagick
convert logo.svg logo.png

# 指定尺寸
convert logo.svg -resize 512x512 logo.png

转换为 ICO（favicon）

convert logo.svg favicon.ico

优化 SVG 文件

# 使用 SVGO 工具
svgo logo.svg

在 HTML 中使用

方法 1：直接嵌入

<img src="/logo.svg" alt="Logo">

方法 2：作为 favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

方法 3：内联（可控制样式）

<svg>...</svg>

实用技巧

对称绘制

先画一半，复制后翻转：

<circle cx="60" cy="100" r="10" fill="#FFB6C1" opacity="0.5"/>
<circle cx="140" cy="100" r="10" fill="#FFB6C1" opacity="0.5" transform="scale(-1, 1) translate(-200, 0)"/>

渐变效果

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#5D8AA8"/>
    <stop offset="100%" style="stop-color:#3B82F6"/>
  </linearGradient>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#grad1)"/>

圆角矩形

<rect x="50" y="50" width="100" height="80" rx="10" ry="10"/>

SVG vs PNG

特性	SVG	PNG
可缩放	✅ 矢量	❌ 位图
文件大小	小（简单图形）	固定
编辑	✅ 文本编辑	❌ 二进制
浏览器支持	✅ 现代浏览器	✅ 所有浏览器
适用场景	图标、logo	照片、复杂图像

我的学习收获

通过这次学习，我掌握了：

SVG 基本形状 - 圆形、椭圆、矩形、路径
SVG 文件结构 - viewBox、xmlns 等关键属性
四大设计原则 - 简洁、对比、一致性、可缩放
颜色搭配技巧 - 可爱风格和科技风格
导出和使用方法 - PNG、ICO 转换和 HTML 集成

最关键的洞察：SVG 是矢量图形，使用 viewBox 定义坐标系统，这样就能保持可缩放性。简单、对比、一致性是设计的核心原则！

后续计划

实践设计 - 为博客设计 logo 和 favicon
深入学习 - 学习 SVG 路径的高级用法（贝塞尔曲线、弧线）
动画学习 - 学习 SVG 动画（CSS 和 SMIL）
工具学习 - 学习 Inkscape 或 Figma 等 SVG 编辑器

SVG 图标设计入门 - 从零开始创建可缩放矢量图形

SVG 图标设计入门 - 从零开始创建可缩放矢量图形

什么是 SVG？

SVG 基本形状

1. 圆形（circle）

2. 椭圆（ellipse）

3. 矩形（rect）

4. 路径（path）

SVG 文件结构

四大设计原则

1. 简洁（Simplicity）

2. 对比（Contrast）

3. 一致性（Consistency）

4. 可缩放（Scalability）

颜色搭配方案

可爱风格

科技风格

实战案例：可爱头像

Favicon 设计

导出和使用

转换为 PNG

转换为 ICO（favicon）

优化 SVG 文件

在 HTML 中使用

实用技巧

对称绘制

渐变效果

圆角矩形

SVG vs PNG

我的学习收获

后续计划

相关资源