如何在 HTML 中使用 SVG 来设计图形

如果您是前端开发人员，您已经了解获得正确的图像并将它们与您的整体设计融合可能是多么具有挑战性。您可能遇到过缩放比例不佳的徽标或网页上看起来不够专业的图像。

我们还生活在一个需要响应式应用程序的世界中，因为最终用户可以使用具有不同屏幕尺寸的小工具浏览应用程序。作为 Web 开发人员，您需要确保添加到网站的图像针对不同的屏幕尺寸进行了优化，无论用户使用的是智能手/机、平板电脑还是个人计算机。

可缩放矢量图形 (SVG) 文件格式解决了其中的一些挑战。本文将定义 SVG 文件，如何将它们与 HTML 一起使用，以及它们相对于其他文件格式的优势和最佳实践。

什么是 SVG 图像？

可缩放矢量图形 (SVG) 是一种利用矢量数据的图像格式。SVG 文件适合您网站上的非照片图像，例如图标和徽标。与使用像素定义的其他图像不同，SVG 基于矢量数据。

今天存在不同的文件格式。但是，我们有两个主要分类；光栅图形和矢量图形。

JPEG 和 PNG 文件是光栅图形的示例。这些图形将图像信息存储在位图中（彩色方格网格）。当位图中的方块组合在一起时，它们会形成一个图像，其作用类似于计算机屏幕的像素。

SVG 和 PDF 是矢量图形的示例。这些文件是用 XML 标记语言编写的。此类文件中的 XML 代码将指定构成图像的所有文本、颜色和形状。

SVG 图像有特定的用例，尤其是在 Web 开发中。您可以在以下实例中使用它们；

标志：一个好的网站应该有一个人们可以产生共鸣的标志。您可以将徽标添加到字母、公司商品、网站标题等等。以 SVG 格式保存的徽标可以适用于不同的用例而不会降低其质量。
图标：网站图标是类似于链接或按钮的图片或符号。完美的例子是链接到 Facebook 和 Instagram 等社交媒体页面的社交图标。此类文件具有明确定义的边界并且也很简单。此类图标必须响应不同的屏幕尺寸，因此需要将它们保存为 SVG 格式。
动画：现代网站的图像和视频会动态改变它们的外观。您可以创建动画 SVG 文件来吸引用户并增加视觉效果。
数据可视化和信息图表：如果您有一个信息网站，您可以将信息图表和图表保存为 SVG 格式。一个完美的例子是针对一定数量的人的活动。您可以拥有一个 SVG 格式的图表，其中的进度条会在每次注册时自动更新。
插图：如果您有装饰图要添加到您的网页，将它们保存为 SVG 格式可确保它们保持其质量，无论它们是按比例放大还是缩小。

如何在 HTML 中使用 SVG

我们使用 svg 元素作为定义坐标系和视图框的容器。svg 标签包含图像元素，还定义了该图像的帧。

viewBox 属性定义图像的内部尺寸。另一方面，我们使用高度和宽度属性来确定图像在浏览器中占用的空间大小。

如果您想继续，请执行以下操作；

从Pixabay免费下载我们将使用的图像。（确保选择 .svg 格式）。
创建一个新项目，添加一个资产文件夹，并将下载的图像存储在这里。将图像重命名为decorative.svg.
创建index.html和styles.css 文件。链接两个文件；

<head>
    <link rel="stylesheet" type="text/css" href="styles.css"></head>

我们现在可以继续演示在 HTML 中使用 SVG 的不同方法：

方法一：使用 svg 作为图像

你可以用<img>标签附上你的 svg 图像。这是一个自关闭标签，因此您不必打开和关闭它。

svg 作为图像的简单表示如下。

<img src= "(your image)"  />

您可以按如下方式更改整个 HTML；

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>
    <h2>Use SVG as an image demonstration</h2>
    <img src= "assets/decorative.svg" alt= "svg as an image" /></body></html>

将简单的样式添加到 styles.css 文件以定义svg 图像的 width和属性。height

img {
    height: 200px;
    width: 300px;
  }

在浏览器上运行代码时的最终输出应如下所示；

方法二：使用 SVG 作为背景图像

您可以使用 svg 作为 html 页面的某个部分或整个正文的背景。我们使用 CSS 来定义 background-image 属性。

清除 html 文档正文部分的所有内容。

然后您可以将其添加到styles.css工作表中；

body{
    background-image: url(/assets/decorative.svg);
    height: 10px;
    width: 5px;
  }

当你在浏览器上渲染代码时，你会得到这样的东西；

方法三：使用 SVG 作为<embed>

您可以使用<embed>HTML 标记来包含 SVG 图像。

您可以在您的 HTML 文件中定义它，如下所示；

<embed src= “(your image)” />

我们可以在我们的index.html文件中使用这段代码；

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>
    <h2>How to embed SVG in HTML</h2>
    <embed src="/assets/decorative.svg" /></body></html>

渲染后的 SVG 图像将如下所示；

建议使用 SVG 作为嵌入，因为它不利于搜索引擎优化。

方法四：使用 SVG 作为内联元素

此方法允许您使用标签包含 SVG 元素<svg>...</svg>。

请执行下列操作;

在代码编辑器上打开图像并复制整个代码（将超过一万行）。
创建一个div并包含您的代码如下；

<div>
 // Put your SVG code here</div>

呈现的项目将如下所示；

不建议将 SVG 用作内联元素，因为它会向 HTML 文档添加大量代码，影响加载速度。

方法五：使用 SVG 作为<iframe>

在 iframe 中使用 SVG 的一般布局是；

   <iframe src="(you image") </iframe>

您可以按如下方式更改您的 HTML 文件；

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>
    <h1>Use SVG with iframe</h1>
    <iframe src="./assets/decorative.svg" width="400px" height="200px"></iframe></body></html>

呈现的网页将如下所示；

方法六：使用 SVG 作为<object>

HTML中的标签<object>可以用来封装各种内容类型，如视频、音频、图像等各种格式，如SVG。

嵌入SVG作为对象的一般格式如下；

<object data="(you SVG image)" type="image/svg+xml"></object>

将此代码添加到您的 HTML 文件中；

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>
    <h2>Use SVG as an Object</h2>
    <object data="./assets/decorative.svg" width="300" height="300"> </object></body></html>

呈现的网页将如下图所示；

在 HTML 中使用 SVG 的好处

可扩展性： SVG 文件与分辨率无关，这意味着您可以将它们缩放到任何大小而不会降低其质量。当您扩展 SVG 文件的尺寸时，浏览器会自动重新计算其背后的数学运算以确保没有质量失真。
可编辑：通过更改颜色等内容可以轻松重新设计 SVG 文件。例如，您可以编辑徽标以在网站的不同部分以不同的阴影显示。
SEO 友好： SVG 文件是用 XML 编写的，可以很容易地在标题和描述中包含关键字和搜索短语。
小文件大小： SVG 图像比 PNG 和 JPEG 小。您可以以紧凑的尺寸保存 SVG 文件，但仍保持其质量。

HTML 中的 SVG：最佳实践

优化 SVG 文件大小：您可以通过删除不必要的元数据来最小化 SVG 文件的大小。您还可以使用 GZIP 压缩技术来减小这些文件的大小。
跨浏览器兼容性：在不同的屏幕尺寸上测试您的 SVG 文件，以确保它们得到优化。
为可访问性和 SEO 标记 SVG 文件：在 SVG 文件中使用 <desc> 和 <title> 标签使您的图像可在线发现。
适用时使用外部样式表：如果您的网络应用程序中有多个 SVG 文件，您可以使用外部样式表，因为它使您的代码易于维护和更新。您还可以在不同的 SVG 文件中使用相同的样式，从而减少编写代码所花费的时间。