什么是 SVG？

SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，用于二维图形，支持交互性和动画。与光栅图像不同，SVG 图形可以缩放到任何尺寸而不会损失质量。

快速了解

全称可缩放矢量图形
创建时间2001 年（W3C 推荐标准）
规范文档官方规范

SVG 工作原理

SVG 由 W3C 开发，于 2001 年成为推荐标准。它使用形状、路径和文本的数学描述来定义图形，而不是像素。这使得 SVG 非常适合徽标、图标、插图和响应式网页设计。SVG 文件可以用 CSS 设置样式，用 JavaScript 操作，并包含无障碍功能。现代浏览器原生支持 SVG，它可以直接嵌入 HTML 或用作图像源。

主要特点

  • 基于矢量 - 无限缩放而不损失质量
  • XML 格式 - 人类可读且可作为文本编辑
  • 支持 CSS 样式和 JavaScript 操作
  • 简单图形的文件大小比光栅图像更小
  • 浏览器原生支持，无需插件
  • 支持动画、交互性和无障碍功能

常见用途

  1. 网站徽标和图标
  2. 响应式网页图形
  3. 数据可视化和图表
  4. 交互式图表和地图
  5. 印刷质量的插图

示例

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 圆形 -->
  <circle cx="50" cy="50" r="40" fill="#3498db" />
  
  <!-- 矩形 -->
  <rect x="10" y="10" width="30" height="30" fill="#e74c3c" />
  
  <!-- 路径 -->
  <path d="M10 80 L50 20 L90 80 Z" fill="#2ecc71" />
  
  <!-- 文本 -->
  <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>

QubitTool 相关工具

SVG 转 PNG

免费在线将 SVG 转换为 PNG，支持自定义尺寸

SVG 优化器

免费在线优化和压缩 SVG 文件

图片转 SVG

免费在线将光栅图像转换为 SVG 矢量格式

相关概念

XMLJSON