html中svg标签用法 html中svg矢量图形的绘制-html教程-PHP中文网

html中svg标签用法 html中svg矢量图形的绘制

裘德小鎮的故事

发布： 2025-06-26 14:51:05

原创

785人浏览过

svg 是一种在 html 中绘制矢量图形的技术，具有放大不失真的特性。1. 使用 svg 需要了解其基本结构，包括

html中svg标签用法 html中svg矢量图形的绘制

SVG，简单来说，就是在HTML里画矢量图的一种方式。它允许你用代码来精确控制图形的形状、颜色和动画，而且放大缩小都不会失真。

SVG 是一种强大的工具，可以为网页设计增加无限的可能性。

如何用 SVG 在 HTML 中绘制矢量图形？

立即学习“前端免费学习笔记（深入）”；

首先，你需要理解 SVG 的基本结构。一个 SVG 文档通常包含一个

例如，画一个简单的红色矩形：

<svg width="200"    style="max-width:90%">
  <rect width="100" height="50" style="fill:red;" />
</svg>

登录后复制

这段代码定义了一个 200x100 的 SVG 画布，并在上面画了一个 100x50 的红色矩形。fill:red; 是 CSS 样式，用来设置填充颜色。

SVG 的强大之处在于元素。你可以用它来绘制任意形状，通过一系列的命令来控制画笔的移动和绘制。例如：

<svg width="200" height="200">
  <path d="M 10 10 L 90 10 L 90 90 L 10 90 Z" fill="green" />
</svg>

登录后复制

d 属性定义了路径。M 命令移动画笔到起始点 (10, 10)。L 命令绘制直线到下一个点。Z 命令闭合路径。

SVG 还有很多高级特性，比如渐变、滤镜、动画等。你可以通过 CSS 或 JavaScript 来控制 SVG 的样式和行为，实现复杂的交互效果。

SVG 的优势在于它的矢量特性，这意味着无论你如何放大缩小，图形都不会失真。这使得 SVG 非常适合用于制作图标、图表和动画。

SVG 还可以嵌入到 HTML 中，或者作为单独的文件引用。这使得 SVG 非常灵活，可以用于各种不同的场景。

SVG 在现代 Web 开发中扮演着重要的角色，它为我们提供了强大的图形绘制能力，可以为网页设计增加更多的可能性。

SVG 元素有哪些常见的属性和用法？

SVG 元素本身有一些重要的属性，比如 width 和 height，用于定义 SVG 画布的大小。viewBox 属性也很重要，它定义了 SVG 内容的坐标系统。

例如：

<svg width="200" height="100" viewBox="0 0 100 50">
  <rect width="100" height="50" style="fill:red;" />
</svg>

登录后复制

在这个例子中，viewBox="0 0 100 50" 定义了一个 100x50 的坐标系统。这意味着 SVG 内容会缩放到 200x100 的画布上。

preserveAspectRatio 属性用于控制 SVG 内容在画布上的缩放和对齐方式。

SVG 元素还可以使用 CSS 样式来控制图形的颜色、填充、边框等。你可以使用内联样式、内部样式表或外部样式表来定义 SVG 的样式。

SVG 元素还可以使用 JavaScript 来控制图形的行为。你可以使用 JavaScript 来添加动画、交互效果等。

SVG 元素还可以使用滤镜来添加视觉效果。SVG 滤镜是一种强大的工具，可以为图形添加各种不同的效果，比如模糊、阴影、发光等。

SVG 元素还可以使用渐变来填充图形。SVG 渐变是一种强大的工具，可以为图形添加各种不同的渐变效果，比如线性渐变、径向渐变等。

SVG 元素还可以使用蒙版来裁剪图形。SVG 蒙版是一种强大的工具，可以为图形添加各种不同的裁剪效果。

SVG 元素还可以使用动画来制作动画效果。SVG 动画是一种强大的工具，可以为图形添加各种不同的动画效果，比如平移、旋转、缩放等。

如何在 HTML 中嵌入 SVG 代码？

嵌入 SVG 代码有几种方式。最常见的方式是直接将 SVG 代码嵌入到 HTML 中。

例如：

<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
</head>
<body>

  <svg width="200" height="100">
    <rect width="100" height="50" style="fill:red;" />
  </svg>

</body>
</html>

登录后复制

这种方式的优点是简单直接，缺点是 SVG 代码会增加 HTML 文件的大小。

另一种方式是将 SVG 代码保存为单独的文件，然后在 HTML 中引用该文件。

例如：

<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
</head>
<body>

  @@##@@

</body>
</html>

登录后复制

这种方式的优点是 SVG 代码可以被多个 HTML 文件共享，缺点是需要额外的 HTTP 请求来加载 SVG 文件。

还有一种方式是使用

例如：

<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
</head>
<body>

  <object data="my-svg-image.svg" type="image/svg+xml" width="200" height="100">
  </object>

</body>
</html>

登录后复制

这种方式的优点是可以更好地控制 SVG 代码的加载和渲染，缺点是语法比较复杂。

选择哪种方式取决于你的具体需求。如果 SVG 代码比较简单，可以直接嵌入到 HTML 中。如果 SVG 代码比较复杂，或者需要被多个 HTML 文件共享，可以将 SVG 代码保存为单独的文件，然后在 HTML 中引用该文件。

SVG 与 Canvas 有什么区别，应该如何选择？

SVG 和 Canvas 都是用于在 HTML 中绘制图形的技术，但它们之间有很多区别。

SVG 是一种基于 XML 的矢量图形格式。这意味着 SVG 图形是由一系列的形状和路径组成的，而不是由像素组成的。SVG 图形的优点是放大缩小不会失真，而且可以被搜索引擎索引。SVG 图形的缺点是渲染性能相对较差，不适合绘制复杂的图形。

Canvas 是一种基于像素的图形绘制技术。这意味着 Canvas 图形是由像素组成的。Canvas 图形的优点是渲染性能非常高，适合绘制复杂的图形。Canvas 图形的缺点是放大缩小会失真，而且不能被搜索引擎索引。

选择 SVG 还是 Canvas 取决于你的具体需求。如果你需要绘制简单的矢量图形，或者需要图形可以被搜索引擎索引，应该选择 SVG。如果你需要绘制复杂的图形，或者需要高性能的渲染，应该选择 Canvas。

一般来说，SVG 更适合用于制作图标、图表和动画。Canvas 更适合用于制作游戏、数据可视化和图像处理。

一个简单的经验法则是：如果图形需要交互，或者需要被搜索引擎索引，应该选择 SVG。如果图形不需要交互，或者不需要被搜索引擎索引，应该选择 Canvas。