HTML SVG 图形绘制-代码号

HTML SVG 图形绘制教程：从基础语法到实战应用

什么是SVG？

<svg>（Scalable Vector Graphics）即可缩放矢量图形，是一种基于XML的二维图形描述语言。与基于像素的图像格式不同，SVG使用数学方程来定义图形，这使得它能够无限缩放而不失真。2025年的现在网页开发中，SVG已经成为创建图标、图表和交互式可视化的重要工具。

SVG基础语法详解

<svg>使用简单的标签结构来创建图形元素。每个SVG图形都以<svg>标签开始和结束，其中可以包含各种图形元素。

基本容器标签

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 图形内容将放在这里 -->
</svg>

这里的width和height属性定义了画布尺寸，xmlns属性指定了XML命名空间。虽然在HTML文档中有时可以省略xmlns，但为了更好的兼容性，我个人建议始终包含它。

常用SVG图形元素

矩形绘制

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="60" 
        fill="lightblue" stroke="#1c87c9" stroke-width="3"/>
</svg>

这个示例创建了一个位于(50,50)坐标点、宽100像素、高60像素的矩形，填充色为浅蓝，边框为蓝色。

圆形与椭圆

<svg width="200" height="200">
  <!-- 圆形 -->
  <circle cx="100" cy="100" r="50" fill="#1c87c9"/>
  
  <!-- 椭圆 -->
  <ellipse cx="100" cy="100" rx="70" ry="40" 
           fill="transparent" stroke="#1c87c9" stroke-width="2"/>
</svg>

圆形使用cx和cy定义中心点，r定义半径；椭圆则使用rx和ry分别定义x轴和y轴半径。

多边形绘制

<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" 
           fill="lightgray" stroke="#1c87c9" stroke-width="3"/>
</svg>

points属性定义了多边形的各个顶点坐标，依次连接这些点形成封闭图形。

SVG与Canvas的深度对比

很多初学者容易混淆SVG和Canvas，虽然它们都能绘制图形，但底层原理和适用场景有很大不同。

本质区别：<svg>是矢量图形，基于XML描述；Canvas是位图，通过JavaScript实时绘制。这意味着SVG图形放大不会失真，而Canvas会模糊。

性能考量：对于静态或需要交互的图形，SVG更合适；对于需要频繁重绘的动态图形（如游戏），Canvas性能更好。

开发体验：SVG元素可以通过CSS样式化，也支持JavaScript事件监听；Canvas则需要手动实现交互逻辑。

从我个人的开发经验来看，选择SVG还是Canvas取决于项目需求。如果是数据可视化或需要复培育互的图形，SVG是更好的选择；如果是图像处理或高性能动画，Canvas可能更合适。

SVG viewBox属性详解

viewBox是SVG中一个强大但常被忽视的属性，它定义了视口的坐标系：

<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- 这里的坐标系统被重新定义 -->
  <circle cx="50" cy="50" r="40" fill="#1c87c9"/>
</svg>

这个viewBox属性创建了一个100×100单位的坐标系，然后映射到200×200像素的视口上，实现了图形的自动缩放。

本节课程知识要点

SVG使用XML语法描述图形，适合创建可缩放且保持清晰的矢量图形
基本图形元素包括rect、circle、ellipse、polygon等
理解viewBox属性对于创建响应式SVG图形非常重要
根据项目需求合理选择SVG或Canvas技术

实战示例：创建简单图标

<svg width="120" height="120" viewBox="0 0 24 24">
  <!-- 房屋图标 -->
  <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z" 
        fill="#1c87c9"/>
  <rect x="10" y="14" width="4" height="4" fill="white"/>
</svg>

这个示例展示了如何使用path元素创建复杂形状。path的d属性包含一系列绘图指令，是SVG中强大但也最复杂的元素。

学习建议

掌握SVG需要理论与实践结合。在代码号编程学习平台上，我建议先从简单图形开始练习，逐步过渡到复杂图形和动画效果。不要急于求成，每个元素和属性都值得深入理解。

常见误区是过度依赖图形编辑器生成的复杂代码，而忽视了对手写SV代码的理解。实际上，许多简单图形手写代码更高效且易于维护。

本文标签：

HTML SVG 图形绘制