5_HTML5 SVG (1) --[HTML5 API 学习之旅]

桃园码工2024-12-19 17:41

SVG 简介

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，用于描述二维图形和图形应用。它允许开发者创建具有文本和图形元素的图像文件，这些文件可以在不损失清晰度的情况下任意缩放。SVG 是 W3C 标准的一部分，并且得到了广泛的支持，特别是在现代 Web 浏览器中。

SVG 的历史

SVG（Scalable Vector Graphics，可缩放矢量图形）的发展始于 1998 年底，当时 W3C（World Wide Web Consortium）意识到互联网上需要一种标准的、基于文本的图像格式来表示二维矢量图形。在此之前，已经有多种不同的矢量图形格式，但它们缺乏互操作性和标准化。

  1. 初期发展：在 1999 年至 2000 年间，W3C 成立了 SVG 工作组，并发布了第一个正式版本 SVG 1.0。这个版本引入了许多特性，包括基本形状、路径、文本、样式、变换和脚本支持。

  2. 后续版本：随着技术的进步和用户需求的变化，W3C 不断更新和完善 SVG 标准。例如：

    • SVG 1.1 (2003)：这是一个模块化版本，允许浏览器制造商逐步实现各个功能模块。
    • SVG Tiny 1.2 (2008)：专为移动设备设计的一个轻量级子集。
    • SVG 2 (2018)：这是对前几个版本的重要升级，增强了与 HTML5 和 CSS3 的集成，简化了一些 API，并增加了新的特性和改进。

  3. 广泛接受：随着时间的推移，SVG 得到了越来越多主流浏览器的支持，包括 Firefox、Chrome、Safari 和 Internet Explorer 等。此外，许多图形编辑软件也开始提供导出为 SVG 文件的功能，进一步推动了它的普及。

  4. 未来展望：尽管 SVG 已经非常成熟，但开发社区仍然在持续探索其潜力，比如通过 Web Components 实现更复杂的交互式组件，以及与其他新兴 Web 技术如 WebGL 结合使用。

SVG 的优势

相比于传统的位图格式（如 JPEG、PNG），SVG 提供了若干显著的优势：

  1. 分辨率无关性：由于 SVG 是基于矢量的，它可以在不损失质量的情况下任意缩放。这使得 SVG 特别适合用于响应式设计，尤其是在高 DPI 显示屏上显示清晰锐利的图形。

  2. 文件体积小：对于简单的图形，SVG 文件通常比等效的位图文件要小得多，从而减少了页面加载时间和带宽消耗。

  3. SEO 友好：因为 SVG 内容是文本形式的，搜索引擎更容易解析和索引其中的信息，有助于提高网站的可见性和排名。

  4. 易于维护和修改：SVG 文件是以 XML 文档的形式存在的，因此可以很容易地被文本编辑器打开并进行修改，也可以用编程语言自动生成或调整。

  5. 动画和交互性：SVG 支持 CSS 样式、JavaScript 操作以及内置的 SMIL 动画功能，这使得创建动态和互动的内容变得更加容易。你可以轻松添加鼠标悬停效果、点击事件处理程序或者复杂的动画序列。

  6. 跨平台兼容性：几乎所有的现代浏览器都支持 SVG，而且它是开放标准的一部分，这意味着你不必担心专有格式带来的限制。

  7. 透明度和支持 alpha 通道：SVG 完全支持透明背景和 alpha 通道，这对于创建具有半透明元素的设计非常重要。

  8. 可访问性：通过适当的标记和技术，SVG 图像可以被屏幕阅读器识别，从而提高了视觉障碍用户的体验。

创建一个简单的 SVG 示例

下面是一个非常基础的例子，展示了如何用 SVG 创建一个红色圆形：

xml 复制代码 
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在这个例子中：

  • <svg> 标签定义了一个 SVG 画布，宽度为 100px，高度为 100px。
  • <circle> 元素用来绘制一个圆，cx 和 cy 属性指定了圆心的位置，r 属性设置了半径。
  • stroke 和 stroke-width 分别设置了边框的颜色和宽度，而 fill 则决定了填充颜色。

SVG 的应用场景

  • 图标和插图：SVG 是制作网站图标和插图的理想选择，因为它可以无损缩放并且文件体积较小。
  • 数据可视化：SVG 提供了精确控制图形的能力，非常适合用于图表和数据可视化工具。
  • 动画和游戏：利用 JavaScript 和 SMIL 动画特性，SVG 可以用来构建复杂的动画效果甚至简单的游戏。
  • 地图和服务：对于需要频繁更新的地图服务，SVG 提供了灵活的数据绑定和实时渲染能力。

总之，SVG 是一种强大而灵活的技术，适用于各种类型的图形内容创作。随着浏览器对 SVG 支持的不断增强，它已经成为现代 Web 开发不可或缺的一部分。

SVG 基本语法

SVG（Scalable Vector Graphics）的基本语法是基于 XML 的，这意味着它使用标签和属性来定义图形元素。以下是 SVG 语法的一些核心概念和常见用法：

基本结构

一个简单的 SVG 文件或嵌入 HTML 中的 SVG 代码通常以 <svg> 标签开始，并包含一系列子元素，每个子元素代表图形的一部分。<svg> 元素可以设置宽度、高度以及命名空间。

xml 复制代码 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 内容将在这里 -->
</svg>
  • width 和 height：定义了画布的尺寸。
  • xmlns：指定了 SVG 的命名空间，确保浏览器正确解析 SVG 内容。

1. 矩形 (<rect>)

下面是一个使用 SVG 创建矩形的简单示例。这个例子展示了如何定义一个矩形，并为其设置颜色、边框以及其他样式属性。

示例：创建一个带有边框的填充矩形
xml 复制代码 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个矩形 -->
  <rect x="50" y="50" width="100" height="100"
        fill="lightblue" stroke="darkblue" stroke-width="3" />
</svg>

解释：

  • <svg>：这是 SVG 的根元素，定义了画布的宽度和高度（在这个例子中是 200x200 像素），并且指定了命名空间。
  • <rect>：用于绘制矩形的具体元素。
    • x="50" 和 y="50"：指定了矩形左上角的位置，距离画布的左边缘和上边缘各 50 像素。
    • width="100" 和 height="100"：设置了矩形的宽度和高度，均为 100 像素，在本例中形成一个正方形。
    • fill="lightblue"：设定了矩形内部的颜色为浅蓝色。
    • stroke="darkblue" 和 stroke-width="3"：分别为矩形的边框颜色设为深蓝色，并且边框宽度为 3 像素。
在 HTML 中嵌入 SVG 矩形

如果你想要将上述 SVG 直接嵌入到 HTML 页面中，可以这样做：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>SVG Rectangle Example</title>
</head>
<body>
    <h2>A Simple SVG Rectangle</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <rect x="50" y="50" width="100" height="100"
            fill="lightblue" stroke="darkblue" stroke-width="3" />
    </svg>
</body>
</html>

这段代码会在网页上显示一个标题为"A Simple SVG Rectangle"的部分，紧接着是一个包含浅蓝色填充、深蓝色边框的矩形。矩形位于一个 200x200 像素的画布中央。

通过调整 <rect> 元素的属性，你可以轻松改变矩形的大小、位置、颜色和其他视觉效果。SVG 提供了极大的灵活性来定制图形元素，使得它非常适合用于图标、图表和其他图形设计任务。

2. 圆 (<circle>)

下面是一个使用 SVG 创建圆形的简单示例，包括如何定义圆的位置、大小和样式。

示例：创建一个填充颜色和边框的圆
xml 复制代码 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个圆形 -->
  <circle cx="100" cy="100" r="50"
          fill="lightgreen" stroke="darkgreen" stroke-width="4" />
</svg>

解释：

  • <svg>：这是 SVG 的根元素，这里我们设定了画布的宽度和高度为 200x200 像素，并指定了命名空间。
  • <circle>：用于绘制圆形的具体元素。
    • cx="100" 和 cy="100"：定义了圆心的位置，距离画布左边缘 100 像素，上边缘 100 像素。
    • r="50"：设置了圆的半径为 50 像素。
    • fill="lightgreen"：设定了圆内部的颜色为浅绿色。
    • stroke="darkgreen" 和 stroke-width="4"：分别为圆的边框颜色设为深绿色，并且边框宽度为 4 像素。
在 HTML 中嵌入 SVG 圆形

如果你想要将上述 SVG 直接嵌入到 HTML 页面中，可以这样做：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>SVG Circle Example</title>
</head>
<body>
    <h2>A Simple SVG Circle</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="100" r="50"
              fill="lightgreen" stroke="darkgreen" stroke-width="4" />
    </svg>
</body>
</html>

这段代码会在网页上显示一个标题为"A Simple SVG Circle"的部分，紧接着是一个包含浅绿色填充、深绿色边框的圆。圆位于一个 200x200 像素的画布中央。

通过调整 <circle> 元素的属性，你可以轻松改变圆的大小、位置、颜色和其他视觉效果。SVG 提供了极大的灵活性来定制图形元素，非常适合用于图标、图表和其他图形设计任务。如果你想要让这个圆更加动态或交互式，还可以结合 CSS 或 JavaScript 来实现。

3. 椭圆 (<ellipse>)

下面是一个使用 SVG 创建椭圆的简单示例。这个例子将展示如何定义椭圆的位置、大小和样式。

示例：创建一个填充颜色和边框的椭圆
xml 复制代码 
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个椭圆 -->
  <ellipse cx="100" cy="75" rx="80" ry="50"
           fill="lightblue" stroke="navy" stroke-width="4" />
</svg>

解释：

  • <svg>：这是 SVG 的根元素，这里我们设定了画布的宽度为 200 像素，高度为 150 像素，并指定了命名空间。
  • <ellipse>：用于绘制椭圆形的具体元素。
    • cx="100" 和 cy="75"：定义了椭圆中心的位置，距离画布左边缘 100 像素，上边缘 75 像素。
    • rx="80" 和 ry="50"：分别设置了椭圆在x轴（水平方向）上的半径为 80 像素，在y轴（垂直方向）上的半径为 50 像素。
    • fill="lightblue"：设定了椭圆内部的颜色为浅蓝色。
    • stroke="navy" 和 stroke-width="4"：分别为椭圆的边框颜色设为海军蓝，并且边框宽度为 4 像素。
在 HTML 中嵌入 SVG 椭圆

如果你想要将上述 SVG 直接嵌入到 HTML 页面中，可以这样做：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>SVG Ellipse Example</title>
</head>
<body>
    <h2>A Simple SVG Ellipse</h2>
    <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
      <ellipse cx="100" cy="75" rx="80" ry="50"
               fill="lightblue" stroke="navy" stroke-width="4" />
    </svg>
</body>
</html>

这段代码会在网页上显示一个标题为"A Simple SVG Ellipse"的部分，紧接着是一个包含浅蓝色填充、海军蓝边框的椭圆。椭圆位于一个 200x150 像素的画布中央。

通过调整 <ellipse> 元素的属性，你可以轻松改变椭圆的大小、位置、颜色和其他视觉效果。SVG 提供了极大的灵活性来定制图形元素，非常适合用于图标、图表和其他图形设计任务。如果你想让这个椭圆更加动态或交互式，还可以结合 CSS 或 JavaScript 来实现。

4. 线 (<line>)

下面是一个使用 SVG 创建一条直线的简单示例。这个例子将展示如何定义线的位置、长度和样式。

示例：创建一条带有颜色和宽度的线
xml 复制代码 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一条线 -->
  <line x1="50" y1="50" x2="150" y2="150"
        stroke="red" stroke-width="4" />
</svg>

解释：

  • <svg>：这是 SVG 的根元素，这里我们设定了画布的宽度为 200 像素，高度也为 200 像素，并指定了命名空间。
  • <line>：用于绘制直线的具体元素。
    • x1="50" 和 y1="50"：定义了线段起点的位置，距离画布左边缘 50 像素，上边缘 50 像素。
    • x2="150" 和 y2="150"：定义了线段终点的位置，距离画布左边缘 150 像素，上边缘 150 像素。
    • stroke="red"：设定了线的颜色为红色。
    • stroke-width="4"：设定了线的宽度为 4 像素。
在 HTML 中嵌入 SVG 线

如果你想要将上述 SVG 直接嵌入到 HTML 页面中，可以这样做：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>SVG Line Example</title>
</head>
<body>
    <h2>A Simple SVG Line</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <line x1="50" y1="50" x2="150" y2="150"
            stroke="red" stroke-width="4" />
    </svg>
</body>
</html>

这段代码会在网页上显示一个标题为"A Simple SVG Line"的部分，紧接着是一条从 (50,50) 到 (150,150) 的红色线段，该线段位于一个 200x200 像素的画布上，起点在左上方，斜向右下方延伸。

通过调整 <line> 元素的属性，你可以轻松改变线段的起点、终点、颜色和其他视觉效果。SVG 提供了极大的灵活性来定制图形元素，非常适合用于图标、图表和其他图形设计任务。如果你想让这条线更加动态或交互式，还可以结合 CSS 或 JavaScript 来实现。

此外，SVG 还支持其他类型的线条，如多点折线（<polyline>）或多边形（<polygon>），它们允许你用一系列点来定义更复杂的形状。

5. 多边形 (<polygon>)

下面是一个使用 SVG 创建多边形的示例。这个例子将展示如何定义一个多边形，并为其添加颜色和边框样式。

示例：创建一个带有颜色填充和边框样式的多边形
xml 复制代码 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个多边形 -->
  <polygon points="50,150 100,50 150,150"
           fill="blue" stroke="black" stroke-width="2" />
</svg>

解释：

  • <svg>：这是 SVG 的根元素，这里我们设定了画布的宽度为 200 像素，高度也为 200 像素，并指定了命名空间。
  • <polygon>：用于绘制多边形的具体元素。
    • points="50,150 100,50 150,150"：这是一个由空格或逗号分隔的坐标列表，每个坐标对（x,y）定义了多边形的一个顶点。在这个例子中，我们定义了一个三角形，它的三个顶点分别是 (50,150)、(100,50) 和 (150,150)。
    • fill="blue"：设定了多边形内部的颜色为蓝色。
    • stroke="black"：设定了多边形边界的颜色为黑色。
    • stroke-width="2"：设定了多边形边界的宽度为 2 像素。
在 HTML 中嵌入 SVG 多边形

如果你想要将上述 SVG 直接嵌入到 HTML 页面中，可以这样做：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>SVG Polygon Example</title>
</head>
<body>
    <h2>A Simple SVG Polygon</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <polygon points="50,150 100,50 150,150"
               fill="blue" stroke="black" stroke-width="2" />
    </svg>
</body>
</html>

这段代码会在网页上显示一个标题为"A Simple SVG Polygon"的部分，紧接着是一个填充为蓝色且具有黑色边框的三角形多边形，该多边形位于一个 200x200 像素的画布上。

通过调整 <polygon> 元素的 points 属性值，你可以轻松改变多边形的形状。你也可以通过修改 fill、stroke 和 stroke-width 属性来改变多边形的外观。SVG 提供了极大的灵活性来定制图形元素，非常适合用于图标、图表和其他图形设计任务。如果你想让这个多边形更加动态或交互式，还可以结合 CSS 或 JavaScript 来实现。

6. 路径 (<path>)

当然，下面是一个使用 SVG 创建路径的示例。路径 (<path>) 是 SVG 中最灵活和强大的绘图元素之一，它允许你绘制复杂的形状和线条。我们将创建一个简单的路径来绘制一个箭头。

示例：创建一个带有颜色填充和边框样式的箭头路径
xml 复制代码 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个路径 -->
  <path d="M150 0 L75 200 L25 200 L100 100 Z"
        fill="orange" stroke="black" stroke-width="2" />
</svg>

解释：

  • <svg>：这是 SVG 的根元素，这里我们设定了画布的宽度为 200 像素，高度也为 200 像素，并指定了命名空间。
  • <path>：用于绘制复杂形状的具体元素。
    • d="M150 0 L75 200 L25 200 L100 100 Z"：这是路径数据字符串，包含了绘制指令。具体解释如下：
      • M150 0：移动到坐标 (150,0)，即起点位置。
      • L75 200：从当前点画一条直线到坐标 (75,200)。
      • L25 200：再从上一点画一条直线到坐标 (25,200)。
      • L100 100：接着画一条直线到坐标 (100,100)。
      • Z：闭合路径，返回到起点 (150,0)，形成封闭区域。
    • fill="orange"：设定了路径内部的颜色为橙色。
    • stroke="black"：设定了路径边界的颜色为黑色。
    • stroke-width="2"：设定了路径边界的宽度为 2 像素。
在 HTML 中嵌入 SVG 路径

如果你想要将上述 SVG 直接嵌入到 HTML 页面中，可以这样做：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>SVG Path Example</title>
</head>
<body>
    <h2>A Simple SVG Path Arrow</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <path d="M150 0 L75 200 L25 200 L100 100 Z"
            fill="orange" stroke="black" stroke-width="2" />
    </svg>
</body>
</html>

这段代码会在网页上显示一个标题为"A Simple SVG Path Arrow"的部分，紧接着是一个填充为橙色且具有黑色边框的箭头形状，该箭头位于一个 200x200 像素的画布上。

通过调整 <path> 元素的 d 属性值，你可以轻松改变路径的形状。路径命令包括但不限于：

  • M x y：移动到指定坐标（不绘制线）。
  • L x y：从当前点画一条直线到指定坐标。
  • H x 或 V y：水平或垂直画线到指定坐标。
  • C 或 S：三次贝塞尔曲线。
  • Q 或 T：二次贝塞尔曲线。
  • A：椭圆弧。
  • Z：闭合路径。

这些命令使得路径非常适合用于绘制图标、图表和其他需要精确控制图形细节的设计任务。如果你想让这个路径更加动态或交互式，还可以结合 CSS 或 JavaScript 来实现动画效果或其他互动功能。

通过掌握这些基础元素和属性，你可以开始构建各种各样的图形内容，并利用 SVG 的灵活性来满足你的设计需求。随着你对 SVG 的深入了解，还可以探索更多高级功能，如动画、渐变、滤镜等。

相关推荐
oumae-kumiko11 分钟前
【JS/TS鼠标气泡跟随】文本提示 / 操作提示
前端·javascript·typescript
YG·玉方11 分钟前
键盘常见键的keyCode和对应的键名
前端·javascript·计算机外设
梦屿千寻！！24 分钟前
Axios和Ajax的区别
前端
iOS开发的小学生28 分钟前
鸿蒙app封装 axios post请求失败问题
前端·harmonyos·鸿蒙开发
我码玄黄43 分钟前
在THREEJS中加载3dtile模型
前端·javascript·3d·threejs
文浩（楠搏万）1 小时前
Java Spring Boot 项目中嵌入前端静态资源：完整教程与实战案例
java·服务器·前端·spring boot·后端·nginx·github
悠悠华1 小时前
使用layui的table提示Could not parse as expression（踩坑记录）
前端·javascript·layui
东离与糖宝1 小时前
webScoke api 介绍
前端
群联云防护小杜1 小时前
黑客如何找到App中的源IP：原理与防范
运维·服务器·前端·网络·网络协议·tcp/ip
Αиcíеиτеǎг2 小时前
基于前端技术UniApp和后端技术Node.js的电影购票系统
前端·uni-app·node.js
热门推荐
01大模型应用RAG系列3-1从0搭建一个RAG：做好文档切分02玄机平台应急响应—webshell查杀03(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明04校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07【华东南AWDP】第十七届全国大学生信息安全竞赛 CISCN 2024 创新实践能力赛区域赛 部分题解WP08WPS-0DAY-20230809的分析和利用复现09PyTorch机器学习实现液态神经网络10YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数