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

如果你是搞前端的，肯定懂那种想把图片整得跟页面设计完美融合有多烧脑。你可能碰到过那种一放大就糊掉的Logo，或者看起来特别low、跟页面格格不入的图。

还有啊，现在这年头，谁不用手机、平板、电脑换来换去地刷网页？作为开发，你还得保证不管用户拿啥玩意儿看，你网站上的图都得显示得漂漂亮亮的，不能变形，不能模糊。

这时候，可缩放矢量图形（也就是SVG）这玩意儿就能解决不少头疼事儿。这篇文章会给你掰扯掰扯啥是SVG文件，咋在HTML里用它，它比别的格式强在哪儿，还有使用它的一些小窍门。

什么是 SVG 图像？

SVG的全名叫可缩放矢量图形，是一种用矢量数据来搞的图像格式。SVG文件特别适合用在网站上那些不是照片的图，比如图标啊、Logo啊这些。跟那种用像素点拼出来的图不一样，SVG是基于矢量数据算出来的。

现在的图片格式五花八门，但主要能分成两大类：一种是位图，一种是矢量图。

像JPEG和PNG这种，就是位图的代表。它们是把图像信息存在一个个小色块（也就是像素点）组成的网格里。这些小方块凑一块儿，就成了一幅图，就像电脑屏幕显示的那样。

而SVG和PDF呢，就是矢量图的代表了。这类文件是用一种叫XML的标记语言写的。文件里的XML代码会定义构成这张图的所有元素，比如文字啊、颜色啊、形状啊这些。

SVG图在网页开发里，有它特定的用武之地。下面这些情况，用它就对了：

Logo：一个好的网站，Logo必须得有辨识度。不管你把Logo放网页标题上，还是印在公司马克杯上，存成SVG格式的Logo，随便放大缩小都不带变糊的。
图标：网站里那些小图标，比如链接、按钮，或者点一下就去Facebook、Instagram的那种社交图标。这些图通常边界清晰，也比较简单。它们得适应各种屏幕尺寸，所以存成SVG最合适了。
动效：现在好多网站上的图都会动，变来变去的，可能显示高级吧。你也可以用SVG做出各种动画效果，吸引用户眼球，让页面更好玩。
图表和信息图：要是你的网站有那种数据展示，比如信息图啊、统计图表啊，存成SVG就对了。比如说，你可以搞一个SVG格式的活动进度条，每有一个人报名，进度条就自动变一下，老酷了。
装饰插图：如果你想往网页上加一些装饰性的小图，存成SVG格式，就能保证不管把它放大还是缩小，图片质量始终如一，不会变模糊。

如何在 HTML 中使用 SVG

在HTML里，我们是用一个叫<svg>的标签来放SVG图的。你可以把它理解成一个画框，它定义了一个坐标系和一个可视区域（viewBox）。<svg>标签里面包着构成图像的各种元素，它也决定了这个图像在页面上的占位区域。

viewBox这个属性，是用来定义图像内部坐标和尺寸的。而height和width属性，则是决定这个图像在浏览器里到底显示多宽多高的。

要不咱们上手试试？你可以跟着下面这几步走：

先去Pixabay这种免费图库网站，下个SVG格式的图片。（记得选.svg格式的哦）
在你的项目里新建一个叫assets的文件夹，把下载的图放进去。可以顺手把图片名字改成decorative.svg。
创建好你的index.html和styles.css文件。别忘了在HTML里把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 文件重新设计一遍。比方说，同一个 Logo，你可以让它在网站的不同地方显示出不同的颜色。
对搜索引擎特友好：SVG 文件是用 XML 语言写的，所以很容易在里面加关键词和搜索短语，放到标题或者描述里，有助于被搜到。
文件个头小：SVG 图片的体积通常比 PNG 和 JPEG 要小。你可以把 SVG 文件存得挺紧凑，但图片质量还是杠杠的

HTML 里用 SVG 的一些小贴士

给 SVG 文件减减肥：可以把那些没用的元数据删掉，让 SVG 文件变得更小。也可以用 GZIP 这种压缩技术，进一步给它压缩。
确保各浏览器都兼容：得在不同屏幕大小的设备上试试你的 SVG 文件，看看显示效果是不是都 ok。
加上标签，方便搜索和读屏：在 SVG 文件里用上 <desc> 和 <title> 这些标签，能让你的图片更容易被在网上被发现。
能用外部样式表就用：要是你的网页应用里有很多个 SVG 文件，最好整一个外部样式表，这样代码好维护也好改。还能在不同的 SVG 里共用一套样式，省得写重复代码。