如何在HTML中使用SVG进行设计惊艳的图形

作者姚伟斌

如果您是一名前端开发人员，您已经了解到如何获得正确的图片并将其与整体设计融合可能是具有挑战性的。您可能遇到过缩放不良的标志或在网页上看起来不够专业的图片。

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

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

什么是SVG图像？

可缩放矢量图形（Scalable Vector Graphics，SVG）是一种利用矢量数据的图像格式。SVG文件适用于网站上的非照片图像，如图标和logos。与使用像素定义的其他图像不同，SVG基于矢量数据。

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

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

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

SVG图像在网站开发中有特定的用途。您可以在以下情况下使用它们：

  • 标志：一个好的网站应该有一个人们可以产生共鸣的标志。您可以将标志添加到字母、公司商品、网站标题等中。以SVG格式保存的标志可以适合不同的用例，而不会失去其质量。
  • 图标：网站图标是充当链接或按钮的图片或符号。完美的例子是链接到社交媒体页面（如Facebook和Instagram）的社交图标。这些文件具有明确定义的边界，也很简单。这些图标必须对不同的屏幕尺寸进行响应，需要将它们保存为SVG格式。
  • 动画：现代网站具有动态更改外观的图像和视频。您可以使用SVG制作动画来吸引用户并增加视觉效果。
  • 数据可视化和信息图表：如果您拥有一个信息性的网站，您可以将信息图表和图表以SVG格式保存。一个完美的例子是针对一定数量的人群的活动。您可以使用SVG格式的图表，其中包含一个自动更新的进度条，每次有人注册时都会更新。
  • 插图：如果您想要为网页添加装饰性的绘画，将它们保存为SVG格式可以确保无论它们是向上还是向下缩放，它们都能保持其质量。

如何在HTML中使用SVG

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

viewBox属性定义了图像的内部大小。另外，我们使用height和width属性来确定图像在浏览器中占用多少空间。

如果您想要跟随操作，请执行以下操作：

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

    

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

方法1：将SVG用作图像

您可以使用标签将SVG图像包围起来。这是一个自闭合标签，因此您不需要打开和关闭它。

将SVG用作图像的简单表示如下所示。

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




    
    
    
    Document
    


    
使用SVG作为图像演示

    svg as an image

在styles.css文件中添加简单的样式，以定义SVG图像的width和height属性。

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

当您在浏览器上运行代码时，最终输出应如下所示：

方法2：将SVG用作背景图像

您可以将SVG用作HTML页面的某个部分或整个body的背景。我们使用CSS来定义background-image属性。

清除HTML文档的body部分中的所有内容。

然后，您可以将以下内容添加到styles.css样式表中：

body{
    background-image: url(/https://yaoweibin.cn/use-svg-in-html/assets/decorative.svg);
    height: 10px;
    width: 5px;
}

当您在浏览器上渲染代码时，将会得到如下内容：

方法3：将SVG用作

您可以使用 HTML标签来包含一个SVG图像。

您可以在HTML文件中定义如下内容：

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




    
    
    
    Document
    


    
如何在HTML中嵌入SVG

    

渲染的SVG图像将显示如下：

将SVG用作嵌入是推荐的，因为它对搜索引擎优化不利。

方法4：将SVG用作内联元素

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

执行以下操作：

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

 // 将您的SVG代码放在这里

渲染的项将显示如下：

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

方法5：使用SVG作为

元素主要用于在当前网页/文档中嵌入另一个HTML网页/文档。

使用SVG作为iframe的一般布局如下：

您可以按照以下方式更改您的HTML文件：







    

    

    

    文档

    





    
使用SVG和iframe

呈现的网页将如下所示：

方法6：使用SVG作为

HTML中的标签可用于包含各种内容类型，如视频、音频和各种格式的图像，如SVG。

将SVG嵌入为对象的一般格式如下：

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







    

    

    

    文档

    





    
使用SVG作为对象

呈现的网页将如下所示：

在HTML中使用SVG的优点

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

在HTML中使用SVG的最佳实践