SVG 实例

本章收集了各种实用的 SVG 示例，帮助您了解如何在实际项目中应用 SVG。

图标集合

常用 UI 图标

<svg width="400" height="60">
  <!-- 首页 -->
  <g transform="translate(10, 10)">
    <path d="M20,35 L20,22 L5,22 L5,35 M2,20 L20,5 L38,20" 
          fill="none" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
  </g>
  
  <!-- 搜索 -->
  <g transform="translate(60, 10)">
    <circle cx="15" cy="15" r="10" fill="none" stroke="#3b82f6" stroke-width="2"/>
    <line x1="22" y1="22" x2="30" y2="30" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
  </g>
  
  <!-- 设置 -->
  <g transform="translate(110, 10)">
    <circle cx="18" cy="18" r="5" fill="none" stroke="#3b82f6" stroke-width="2"/>
    <path d="M18,5 L18,10 M18,26 L18,31 M5,18 L10,18 M26,18 L31,18 M8,8 L12,12 M24,24 L28,28 M8,28 L12,24 M24,12 L28,8" 
          stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
  </g>
  
  <!-- 用户 -->
  <g transform="translate(160, 10)">
    <circle cx="18" cy="12" r="7" fill="none" stroke="#3b82f6" stroke-width="2"/>
    <path d="M5,35 C5,25 31,25 31,35" fill="none" stroke="#3b82f6" stroke-width="2"/>
  </g>
  
  <!-- 邮件 -->
  <g transform="translate(210, 10)">
    <rect x="3" y="8" width="30" height="22" rx="2" fill="none" stroke="#3b82f6" stroke-width="2"/>
    <path d="M3,10 L18,22 L33,10" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/>
  </g>
  
  <!-- 菜单 -->
  <g transform="translate(260, 10)">
    <line x1="5" y1="10" x2="32" y2="10" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
    <line x1="5" y1="18" x2="32" y2="18" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
    <line x1="5" y1="26" x2="32" y2="26" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
  </g>
  
  <!-- 关闭 -->
  <g transform="translate(310, 10)">
    <line x1="8" y1="8" x2="28" y2="28" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
    <line x1="28" y1="8" x2="8" y2="28" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
  </g>
</svg>

社交媒体图标

<svg width="300" height="60">
  <!-- Twitter/X -->
  <g transform="translate(10, 10)">
    <circle cx="20" cy="20" r="18" fill="#1da1f2"/>
    <text x="20" y="27" text-anchor="middle" fill="white" font-size="18" font-weight="bold">𝕏</text>
  </g>
  
  <!-- GitHub -->
  <g transform="translate(60, 10)">
    <circle cx="20" cy="20" r="18" fill="#1f2937"/>
    <path d="M20,8 C13,8 8,13 8,20 C8,26 12,30 17,32 C17.5,32 18,31.5 18,31 L18,28 C13,29 12,26 12,26 C11.5,24.5 10.5,24 10.5,24 C9,23 10.5,23 10.5,23 C12,23 13,24.5 13,24.5 C14.5,27 17,26 18,25.5 C18,24.5 18.5,24 19,23.5 C15,23 11,21.5 11,16 C11,14 12,12 13,11 C13,10.5 12,9 13,7 C13,7 14.5,7 18,9 C19,8.5 21,8.5 22,9 C25.5,7 27,7 27,7 C28,9 27,10.5 27,11 C28,12 29,14 29,16 C29,21.5 25,23 21,23.5 C21.5,24 22,25 22,26 L22,31 C22,31.5 22.5,32 23,32 C28,30 32,26 32,20 C32,13 27,8 20,8 Z" 
          fill="white" transform="scale(0.9) translate(2,2)"/>
  </g>
  
  <!-- LinkedIn -->
  <g transform="translate(110, 10)">
    <rect x="2" y="2" width="36" height="36" rx="6" fill="#0a66c2"/>
    <text x="20" y="30" text-anchor="middle" fill="white" font-size="22" font-weight="bold">in</text>
  </g>
  
  <!-- YouTube -->
  <g transform="translate(160, 10)">
    <rect x="2" y="8" width="36" height="24" rx="6" fill="#ff0000"/>
    <polygon points="16,14 16,26 26,20" fill="white"/>
  </g>
</svg>

数据可视化

饼图

<svg width="250" height="200" viewBox="0 0 250 200">
  <defs>
    <filter id="pieShadow">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#00000020"/>
    </filter>
  </defs>
  
  <!-- 饼图扇形 -->
  <g transform="translate(100, 100)" filter="url(#pieShadow)">
    <!-- 40% -->
    <path d="M0,0 L0,-70 A70,70 0 0,1 66,-22 Z" fill="#3b82f6"/>
    <!-- 30% -->
    <path d="M0,0 L66,-22 A70,70 0 0,1 22,66 Z" fill="#22c55e"/>
    <!-- 20% -->
    <path d="M0,0 L22,66 A70,70 0 0,1 -66,22 Z" fill="#f59e0b"/>
    <!-- 10% -->
    <path d="M0,0 L-66,22 A70,70 0 0,1 0,-70 Z" fill="#ef4444"/>
  </g>
  
  <!-- 图例 -->
  <g transform="translate(180, 50)">
    <rect x="0" y="0" width="12" height="12" fill="#3b82f6"/>
    <text x="18" y="10" font-size="11">产品 A (40%)</text>
    
    <rect x="0" y="25" width="12" height="12" fill="#22c55e"/>
    <text x="18" y="35" font-size="11">产品 B (30%)</text>
    
    <rect x="0" y="50" width="12" height="12" fill="#f59e0b"/>
    <text x="18" y="60" font-size="11">产品 C (20%)</text>
    
    <rect x="0" y="75" width="12" height="12" fill="#ef4444"/>
    <text x="18" y="85" font-size="11">产品 D (10%)</text>
  </g>
</svg>

柱状图

<svg width="350" height="200" viewBox="0 0 350 200">
  <!-- 坐标轴 -->
  <line x1="50" y1="20" x2="50" y2="160" stroke="#9ca3af" stroke-width="1"/>
  <line x1="50" y1="160" x2="320" y2="160" stroke="#9ca3af" stroke-width="1"/>
  
  <!-- 网格线 -->
  <line x1="50" y1="60" x2="320" y2="60" stroke="#e5e7eb" stroke-width="1"/>
  <line x1="50" y1="110" x2="320" y2="110" stroke="#e5e7eb" stroke-width="1"/>
  
  <!-- Y轴标签 -->
  <text x="45" y="65" text-anchor="end" font-size="10" fill="#6b7280">100</text>
  <text x="45" y="115" text-anchor="end" font-size="10" fill="#6b7280">50</text>
  <text x="45" y="165" text-anchor="end" font-size="10" fill="#6b7280">0</text>
  
  <!-- 柱子 -->
  <rect x="70" y="80" width="40" height="80" fill="#3b82f6" rx="4"/>
  <rect x="130" y="50" width="40" height="110" fill="#22c55e" rx="4"/>
  <rect x="190" y="100" width="40" height="60" fill="#f59e0b" rx="4"/>
  <rect x="250" y="70" width="40" height="90" fill="#ef4444" rx="4"/>
  
  <!-- X轴标签 -->
  <text x="90" y="180" text-anchor="middle" font-size="10" fill="#6b7280">Q1</text>
  <text x="150" y="180" text-anchor="middle" font-size="10" fill="#6b7280">Q2</text>
  <text x="210" y="180" text-anchor="middle" font-size="10" fill="#6b7280">Q3</text>
  <text x="270" y="180" text-anchor="middle" font-size="10" fill="#6b7280">Q4</text>
</svg>

折线图

<svg width="350" height="200" viewBox="0 0 350 200">
  <!-- 坐标轴 -->
  <line x1="40" y1="20" x2="40" y2="160" stroke="#9ca3af" stroke-width="1"/>
  <line x1="40" y1="160" x2="330" y2="160" stroke="#9ca3af" stroke-width="1"/>
  
  <!-- 网格线 -->
  <g stroke="#e5e7eb" stroke-width="1">
    <line x1="40" y1="50" x2="330" y2="50"/>
    <line x1="40" y1="90" x2="330" y2="90"/>
    <line x1="40" y1="130" x2="330" y2="130"/>
  </g>
  
  <!-- 数据区域 -->
  <polygon points="70,140 120,100 170,110 220,60 270,80 320,50 320,160 70,160" 
           fill="#3b82f6" opacity="0.2"/>
  
  <!-- 折线 -->
  <polyline points="70,140 120,100 170,110 220,60 270,80 320,50" 
            fill="none" stroke="#3b82f6" stroke-width="2"/>
  
  <!-- 数据点 -->
  <circle cx="70" cy="140" r="4" fill="#3b82f6"/>
  <circle cx="120" cy="100" r="4" fill="#3b82f6"/>
  <circle cx="170" cy="110" r="4" fill="#3b82f6"/>
  <circle cx="220" cy="60" r="4" fill="#3b82f6"/>
  <circle cx="270" cy="80" r="4" fill="#3b82f6"/>
  <circle cx="320" cy="50" r="4" fill="#3b82f6"/>
  
  <!-- X轴标签 -->
  <text x="70" y="175" text-anchor="middle" font-size="10" fill="#6b7280">1月</text>
  <text x="120" y="175" text-anchor="middle" font-size="10" fill="#6b7280">2月</text>
  <text x="170" y="175" text-anchor="middle" font-size="10" fill="#6b7280">3月</text>
  <text x="220" y="175" text-anchor="middle" font-size="10" fill="#6b7280">4月</text>
  <text x="270" y="175" text-anchor="middle" font-size="10" fill="#6b7280">5月</text>
  <text x="320" y="175" text-anchor="middle" font-size="10" fill="#6b7280">6月</text>
</svg>

UI 组件

开关按钮

<svg width="200" height="50">
  <!-- 关闭状态 -->
  <g transform="translate(10, 10)">
    <rect x="0" y="0" width="50" height="28" rx="14" fill="#d1d5db"/>
    <circle cx="14" cy="14" r="11" fill="white"/>
  </g>
  
  <!-- 开启状态 -->
  <g transform="translate(80, 10)">
    <rect x="0" y="0" width="50" height="28" rx="14" fill="#3b82f6"/>
    <circle cx="36" cy="14" r="11" fill="white"/>
  </g>
</svg>

复选框

<svg width="200" height="40">
  <!-- 未选中 -->
  <g transform="translate(10, 10)">
    <rect x="0" y="0" width="20" height="20" rx="4" fill="white" stroke="#d1d5db" stroke-width="2"/>
  </g>
  
  <!-- 选中 -->
  <g transform="translate(50, 10)">
    <rect x="0" y="0" width="20" height="20" rx="4" fill="#3b82f6"/>
    <polyline points="4,10 8,14 16,6" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </g>
  
  <!-- 部分选中 -->
  <g transform="translate(90, 10)">
    <rect x="0" y="0" width="20" height="20" rx="4" fill="#3b82f6"/>
    <line x1="5" y1="10" x2="15" y2="10" stroke="white" stroke-width="2" stroke-linecap="round"/>
  </g>
</svg>

单选按钮

<svg width="200" height="40">
  <!-- 未选中 -->
  <g transform="translate(10, 10)">
    <circle cx="10" cy="10" r="9" fill="white" stroke="#d1d5db" stroke-width="2"/>
  </g>
  
  <!-- 选中 -->
  <g transform="translate(50, 10)">
    <circle cx="10" cy="10" r="9" fill="white" stroke="#3b82f6" stroke-width="2"/>
    <circle cx="10" cy="10" r="5" fill="#3b82f6"/>
  </g>
</svg>

星级评分

<svg width="180" height="40">
  <!-- 实心星 -->
  <polygon points="18,2 22,14 35,14 25,22 29,35 18,27 7,35 11,22 1,14 14,14" fill="#fbbf24"/>
  <polygon points="53,2 57,14 70,14 60,22 64,35 53,27 42,35 46,22 36,14 49,14" fill="#fbbf24"/>
  <polygon points="88,2 92,14 105,14 95,22 99,35 88,27 77,35 81,22 71,14 84,14" fill="#fbbf24"/>
  
  <!-- 半星 -->
  <defs>
    <linearGradient id="halfStar">
      <stop offset="50%" stop-color="#fbbf24"/>
      <stop offset="50%" stop-color="#d1d5db"/>
    </linearGradient>
  </defs>
  <polygon points="123,2 127,14 140,14 130,22 134,35 123,27 112,35 116,22 106,14 119,14" fill="url(#halfStar)"/>
  
  <!-- 空心星 -->
  <polygon points="158,2 162,14 175,14 165,22 169,35 158,27 147,35 151,22 141,14 154,14" fill="#d1d5db"/>
</svg>

动画示例

加载动画

<svg width="60" height="60" viewBox="0 0 60 60">
  <circle cx="30" cy="30" r="25" fill="none" stroke="#e5e7eb" stroke-width="5"/>
  <circle cx="30" cy="30" r="25" fill="none" stroke="#3b82f6" stroke-width="5"
          stroke-dasharray="100" stroke-dashoffset="75" stroke-linecap="round">
    <animateTransform attributeName="transform" type="rotate"
                      values="0 30 30;360 30 30" dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

脉冲效果

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="#3b82f6">
    <animate attributeName="r" values="20;30;20" dur="1.5s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

跳动的点

<svg width="80" height="40">
  <circle cx="15" cy="20" r="6" fill="#3b82f6">
    <animate attributeName="cy" values="20;10;20" dur="0.6s" repeatCount="indefinite"/>
  </circle>
  <circle cx="40" cy="20" r="6" fill="#3b82f6">
    <animate attributeName="cy" values="20;10;20" dur="0.6s" begin="0.2s" repeatCount="indefinite"/>
  </circle>
  <circle cx="65" cy="20" r="6" fill="#3b82f6">
    <animate attributeName="cy" values="20;10;20" dur="0.6s" begin="0.4s" repeatCount="indefinite"/>
  </circle>
</svg>

装饰图形

波浪分隔线

<svg width="400" height="50" viewBox="0 0 400 50" preserveAspectRatio="none">
  <path d="M0,25 Q50,0 100,25 T200,25 T300,25 T400,25 L400,50 L0,50 Z" fill="#3b82f6"/>
</svg>

装饰圆点背景

<svg width="200" height="100">
  <defs>
    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="#3b82f6" opacity="0.3"/>
    </pattern>
  </defs>
  <rect width="200" height="100" fill="url(#dots)"/>
</svg>

网格背景

<svg width="200" height="100">
  <defs>
    <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e5e7eb" stroke-width="1"/>
    </pattern>
  </defs>
  <rect width="200" height="100" fill="url(#grid)"/>
</svg>

下一步

查看更多 SVG 元素和属性，请参考 SVG 参考手册！