使用 SVG

SVG 是一种用于矢量图形的图像格式。它实际上代表 **可缩放矢量图形**。基本上，就是你在 Adobe Illustrator 中处理的内容。你可以在网页上非常轻松地使用 SVG，但有一些事项你需要了解。

为什么要使用 SVG？

文件尺寸小，压缩效果好
可以缩放至任意尺寸而不会损失清晰度（除了非常小的尺寸）
在视网膜显示屏上看起来很棒
设计控制，例如交互性和滤镜

在 Adobe Illustrator 中设计一些内容。这里有一只站在椭圆形上的奇异鸟。

请注意，画板已裁剪到设计的边缘。画布在 SVG 中很重要，就像在 PNG 或 JPG 中一样。

你可以直接从 Adobe Illustrator 中将文件保存为 SVG 文件。

保存时，你将获得另一个 SVG 选项对话框。老实说，我对所有这些都不太了解。有一个关于 SVG 配置文件的完整规范。我发现 SVG 1.1 运行良好。

这里有趣的部分是，你可以点击“确定”并保存文件，或者点击“SVG 代码…”，它将打开 TextEdit（在 Mac 上）并显示其中的 SVG 代码。

两者都很有用。

将 SVG 作为 <img> 使用

如果我将 SVG 保存到文件，我可以在 <img> 标签中直接使用它。

<img src="kiwi.svg" alt="Kiwi standing on oval">

在 Illustrator 中，我们的画板是 612px ✕ 502px。

这正是图像在页面上显示的大小，不受任何影响。但是，你只需选择 img 并更改其 width 或 height 即可更改其大小，就像更改 PNG 或 JPG 一样。这是一个示例。

Check out this Pen!

浏览器支持

以这种方式使用它有自己的一套特定的浏览器支持。基本上：除了 IE 8 及更低版本和 Android 2.3 及更低版本之外，其他所有浏览器都支持。

如果你想使用 SVG，但还需要支持不支持以这种方式使用 SVG 的浏览器，你可以选择其他方法。我在不同的研讨会中介绍了不同的技术。

一种方法是使用 Modernizr 测试支持并替换图像的 src

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

如果可以接受在标记中使用 JavaScript，David Bushell 有一个非常简单的替代方案

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVGeezy 也可以提供帮助。随着本文的继续，我们将介绍更多回退技术。

将 SVG 作为 background-image 使用

与将 SVG 作为 img 使用一样简单，你可以在 CSS 中将其用作 background-image。

<a href="/" class="logo">
  Kiwi Corp
</a>

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

请注意，我们将 background-size 设置为 logo 元素的大小。我们必须这样做，否则我们只会看到我们更大的原始 SVG 图像的左上角。这些数字与原始尺寸的纵横比相关。但是，如果要确保图像适合并且无法知道父图像是否具有完全正确的尺寸，则可以使用 background-size 关键字（如 contain）。

浏览器支持

将 SVG 作为 background-image 使用有自己的一套特殊的浏览器支持，但它与将 SVG 作为 img 使用基本相同。唯一有问题的浏览器是 IE 8 及更低版本和 Android 2.3 及更低版本。

Modernizr 可以在这里帮助我们，而且比使用 img 的方法更有效。如果我们将 background-image 替换为受支持的格式，则只会发出一个 HTTP 请求，而不是两个。如果浏览器不支持 SVG，Modernizr 会向 html 元素添加一个名为“no-svg”的类名，因此我们使用它。

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

另一种巧妙的渐进增强风格技术是将 SVG 与多个背景一起使用。SVG 和多个背景具有非常相似的浏览器支持，因此如果浏览器支持多个背景，则它也支持 SVG，并且声明将起作用（并覆盖任何以前的声明）。

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

<img> 和 background-image 的问题…

是你无法像以下两种方法一样使用 CSS 控制 SVG 的内部内容。继续阅读！

使用“内联”SVG

还记得在保存时可以从 Illustrator 中获取 SVG 代码吗？（你也可以在文本编辑器中打开 SVG 文件并获取该代码。）你可以将该代码直接放入 HTML 文档中，SVG 图像将与将其放入 img 中一样显示。

<body>

   <!-- paste in SVG code, image shows up!  -->

</body>

这很好，因为图像直接出现在文档中，不需要发出额外的 HTTP 请求。换句话说，它具有与使用数据 URI 相同的优势。它也具有相同的缺点。文档可能会“膨胀”，文档中有一大块垃圾，你试图创作，以及无法缓存。

如果你使用的是可以获取文件并插入文件的后端语言，至少可以清理创作体验。例如

<?php echo file_get_contents("kiwi.svg"); ?>

这里有一点 PHP 特定的内容……有人向我证明 file_get_contents() 是这里正确的函数，而不是我之前使用过的 include() 或 include_once()。特别是因为 SVG 有时会导出 <?xml version="1.0" encoding="UTF-8"?> 作为开头行，这会导致 PHP 解析器出错。

先优化它

可能并不令人震惊，但 Adobe Illustrator 提供的 SVG 并不是特别优化。它具有 DOCTYPE 和生成器注释以及所有这些垃圾。SVG 本身已经很小了，但为什么不尽我们所能呢？Peter Collingridge 有一个在线 SVG 优化器工具。上传旧的，下载新的。在 Kyle Foster 的视频中，他甚至更进一步，在优化后删除了换行符。

如果你更硬核，这里有一个 Node JS 工具用于自己进行优化。

现在你可以使用 CSS 控制了！

看到 SVG 看起来很像 HTML 吗？这是因为它们本质上都是 XML（带有尖括号的命名标签，内部包含内容）。在我们的设计中，我们有两个组成设计的元素，一个 <ellipse> 和一个 <path>。我们可以进入代码并为它们提供类名，就像任何其他 HTML 元素都可以拥有类名一样。

<svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

现在，在这个页面上的任何 CSS 中，我们都可以使用特殊的 SVG CSS 控制这些单个元素。这不必是嵌入在 SVG 本身中的 CSS，它可以位于任何位置，甚至在我们全局样式表中 <link>。请注意，SVG 元素有一组特殊的 CSS 属性可以在其上使用。例如，它不是 background-color，而是 fill。但你可以使用像 :hover 这样的普通内容。

.kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

更酷的是，SVG 拥有所有这些花哨的滤镜。例如模糊。在你的 <svg> 中添加一个滤镜

<svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

然后你可以在你的 CSS 中根据需要应用它

.ground:hover {
  filter: url(#pictureFilter);
}

这里有一个示例，展示了所有这些。

Check out this Pen!

浏览器支持

内联 SVG 有其自身的浏览器支持情况，但同样，它基本上只在 IE 8 及以下版本和 Android 2.3 及以下版本¹中存在问题。

处理此类 SVG 回退的一种方法是

<svg> ... </svg>
<div class="fallback"></div>

然后再次使用 Modernizr

.fallback { 
  display: none;
  /* Make sure it's the same size as the SVG takes up */
}
.no-svg .fallback { 
  background-image: url(logo.png); 
}

使用 SVG 作为 <object>

如果“内联”SVG 不是你的菜（请记住它确实有一些合理的缺点，例如难以缓存），你可以链接到一个 SVG 文件并保留使用 CSS 影响其部分的能力，方法是使用<object>。

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>

对于回退，Modernizr 检测在这里可以正常工作

.no-svg .logo {
  width: 200px;
  height: 164px;
  background-image: url(kiwi.png);
}

这将非常适合缓存，并且实际上比以任何其他方式使用它具有更深的支持。但是，如果希望 CSS 样式起作用，则不能使用外部样式表或文档上的<style>，需要在 SVG 文件本身中使用<style>元素。

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

用于 <object> SVG 的外部样式表

SVG 有一种声明外部样式表的方法，这对于创作、缓存等很有用。据我测试，这仅适用于<object>嵌入 SVG 文件。你需要将它放在 SVG 文件中，位于打开的<svg>标签之上。

<?xml-stylesheet type="text/css" href="svg.css" ?>

如果将其放在 HTML 中，页面将崩溃，甚至不会尝试渲染。如果链接到一个包含该内容的 SVG 文件作为<img>或background-image，它不会崩溃，但也不会起作用（SVG 仍然会渲染）。

SVG 的数据 URL

使用 SVG 的另一种方法是将其转换为数据 URL。数据 URL 虽然可能不会节省实际的文件大小，但效率更高，因为数据就在那里。它不需要额外的网络请求。

Mobilefish.com 有一个在线转换工具用于进行 base64 编码，但我通常认为这对 SVG 来说不是一个好主意。只需粘贴 SVG 文件的内容并填写表单，它就会在文本区域中显示结果，以便你复制。请记住删除它返回的数据中的换行符。它看起来像纯乱码

你可以在我们之前讨论过的任何地方使用它（除了内联<svg>，因为这没有意义）。只需将乱码放在这些示例中 [data] 所在的位置。

这个转换器是我的最爱，因为它使 SVG 保持大部分可读文本

作为 <img>

<img src="data:image/svg+xml;base64,[data]">

作为 CSS

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

这里需要注意的是：常规 CSS 不在乎你是否在数据 URI 周围加引号，但 Sass 会，所以我上面加了引号（感谢 Oziel Perez）。

作为 <object>

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
  fallback
</object>

是的，如果在 base64 编码之前，SVG 中嵌入了<style>，它仍然可以工作，如果你将其用作<object>！

数据 URI 的格式

上面所有示例都使用 base64 作为编码，但数据 URI 不必是 base64。事实上，在 SVG 的情况下，最好不要使用 base64。主要是因为 SVG 的原生格式比 base64 的结果重复得多，它压缩得更好。

<!-- base64 -->
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...

<!-- UTF-8, not encoded -->
data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg>

<!-- UTF-8, optimized encoding for compatibility -->
data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...'

<!-- Fully URL encoded ASCII -->
data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...

用于 base64 编码 SVG 的命令行工具

@chriscoyier @hkfoster 或许你可以使用快捷方式 >>> echo -n `cat logo.svg` | base64 | pbcopy

— Benny Schudel (@bennyschudel) 2013 年 3 月 2 日

或者，Mathias Bynens 有几种技术

使用openssl base64 < path/to/file.png | tr -d '\n' | pbcopy 或cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy 跳过写入文件，只需将 base64 编码的输出复制到剪贴板，而无需换行符。

还有一个拖放工具。

自动化工具

grunticon:

从 CSS 的角度来看，它易于使用，因为它生成一个引用每个图标的类，并且不使用 CSS 精灵。

grunticon 获取一个 SVG/PNG 文件夹（通常是你在 Adobe Illustrator 等应用程序中绘制的图标），并将它们输出到 3 种格式的 CSS 中：svg 数据 URL、png 数据 URL 和第三个回退 CSS 文件，其中包含对常规 png 图像的引用，这些图像也会自动生成并放置在文件夹中。
iconizr:

一个 PHP 命令行工具，用于将 SVG 图像转换为一组 CSS 图标（SVG & PNG，单个图标和/或 CSS 精灵），并支持图像优化和 Sass 输出。

相关内容

David Bushell：前端 SVG 编程入门
David Bushell：使用 SVG 实现分辨率无关性
MDN 上关于 SVG 的内容
对各种不同的 SVG 相关内容的浏览器支持。
Peter Gasston：使用片段标识符创建更好的 SVG 精灵
simuari：SVG 堆栈
SVG.js – “一个用于操作和动画 SVG 的轻量级库。”
Emmet 有一个很棒的方法可以直接从你的代码编辑器中获取 SVG 的数据 URI。
Compass也有一个助手用于数据 URI。
Adobe：SVG 样式
Andrew J. Baker：驯服 SVG 野兽
Illustrator 替代方案：Inkscape，Sketch
Krister Kari：在移动浏览器中处理 SVG 图像

Kyle Foster 的优化 SVG 工作流程，值得嵌入

…以及后续 + 幻灯片。

¹ 说到 Android 2.3 浏览器，这个。但是，如果你必须支持原生浏览器，这个。

Tom Hermans

# 2013 年 3 月 5 日

Chris，这篇文章真是太全面了，简直就是一部巨著。我马上把它添加到书签的“顶级资源”文件夹中。
我之前一直在忙于 SVG，当时处理回退的方式是在 Modernizr 显示浏览器不支持时，将扩展名 .svg 替换为 .png。

Oliver

评论永久链接# 2013年4月2日

+1

Jake Rayson

# 2013年3月5日

感谢 Chris 发布这篇文章，我需要了解一下 SVG 的基础知识。顺便说一下，Inkscape 是一款很棒的跨平台开源 SVG 矢量编辑程序，比 Illustrator 好多了 ;) 而且 SVG 是它的原生格式。

Timothy

评论永久链接# 2013年3月5日

+1。Inkscape 在 Windows/Linux 上很棒。

但在 Mac 上表现不太好。 Sketch 在 Mac 上的体验要好得多。
Christos

评论永久链接# 2013年3月7日

我用 Inkscape 做了一个测试，将一个简单的文本图像保存为 svg，但浏览器上什么也没有显示。我尝试了互联网上的其他图像，它们可以正常显示。在 Inkscape 中是否需要使用一些特殊的设置？
traq

评论永久链接# 2013年3月7日

@Christos Inskape 可以保存为“Inkscape SVG”或“Plain SVG”——后者是 Web 上所需的格式。但在大多数情况下，两者都可以工作，我从未遇到过一个图像“根本不显示”的情况。您可以在电脑上查看该图像吗（使用您通常使用的图片查看器）？您可以在 Inkscape 中重新打开该图像吗？
Ravish Malik

评论永久链接# 2013年10月7日

我所有的专业图形设计都在 Mac 上使用 Inkscape 完成。它只是搞乱了编辑所需的快捷键，除此之外就没什么了。此外，我不得不禁用一个“画板”设置，才能让它像从其他 Mac 应用中一样原样复制矢量文件。就是这样，它工作得很好！

Eric

# 2013年3月5日

这太棒了，谢谢 Chris。好的，所以如果我们可以像对待 img 一样对待 svg，那么我们可以使用它们来实现流体文本吗？……听起来我需要在 CodePen 上做一个很酷的演示。

Ben Frain

# 2013年3月5日

Compass 用户不要忘记，您可以通过使用“inline-image”而不是“image-url”将 svg 转换为 base64 并嵌入到 CSS 中。

Brad

评论永久链接# 2013年3月21日

哦……这看起来是什么样子的？

Shaimoom Newaz

# 2013年3月5日

就在我以为我已经学会了一切的时候，SVG 出现了。感谢您提供这些内部信息。期待能够利用它的强大功能。

Ben Frain

# 2013年3月5日

此外，如果使用 Inkscape，这里有一些关于如何优化的提示：http://benfrain.com/tips-for-using-svgs-in-web-projects/

eQRoeil

# 2013年3月5日

svg 的另一个很酷的功能：您可以在 <style> 元素（在您的 svg 内部）中使用媒体查询。

这样，图像就可以响应父元素的大小（例如 <object>）。然后，您可以根据父元素的大小重新组织 svg 中的内容：更小的文本或内容块的位置（在横向模式下，文本位于“图像”的右侧，而在纵向模式下位于顶部）。

我在这里做了一个丑陋的演示（转到页面底部，点击“试一试”链接），屏幕右上角会出现一个“标签”，在宽屏上显示“您可以在响应式网页设计中使用 svg”，在较小的屏幕上显示“在 RWD 中使用 svg”。

在这个页面上，您会找到一些嵌入 svg 的方法。
我使用的代码片段在某些浏览器在调整大小时会在底部显示不需要的填充时很有用（现在仍然有用？）。自从我创建它以来，浏览器支持变得更好，我不确定它是否仍然需要（我需要做一些新的测试……）。

斑马纹 svg 的颜色会随着断点而改变。

您还可以在 svg 内部使用 JavaScript，并且过滤器在浏览器中得到了很好的支持；)（有时比 Illustrator 或 Inkscape 更好）。

Inkscape 是一款免费的开源软件，专门用于 svg，非常有用……

Pascal

eQRoeil

# 2013年3月5日

忘记了我的演示链接 :(，抱歉
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

@cwebba1

评论永久链接# 2013年3月6日

您好 @eqroeil，您发布的评论解决了我想弄清楚的问题——如何在响应式设计中使用 SVG。没有人解决这个问题。

这是我的 CodePen：http://cdpn.io/qItAC

左边是 #ALA 艺术——画笔。接下来是我的 logo，然后是画笔的第二个版本。第二个版本和 logo 都去掉了 width 和 height，只保留了 veiwBox 和“preserveAspectRatio=”xMinYMin meet”。它们会随着容器缩放，但会破坏对象框。为什么为什么为什么？

我一直都在寻找正确的解决方案。您的示例有效。我今天会把它拆开，弄清楚原因！任何意见都将不胜感激。

Nick

# 2013年3月5日

我一直在尝试将 SVG 图像用作响应式 div 的背景图像。

div class="span4"

但与 img 不同，我不能使用 width="100%"，它不会自动缩放它，并且尽管我的 div 会随着浏览器窗口大小的变化而调整大小，但背景 svg 的尺寸将保持不变。这并不是 SVG 独有的问题，PNG/JPG 也会发生这种情况，但您需要注意这一点。

在现代浏览器中不是问题，但您通常会遇到的问题（IE 8 及更低版本，以及可能 IE9）会遇到此问题。

eQRoeil

评论永久链接# 2013年3月5日

您应该看看是否添加了 preserveAspectRatio=”xMinYMin meet” 到您的 svg 中，并且只保留 viewBox=”0 0 800 960”（删除 width 和 height，但这应该没有必要……）。

在您的 css 中尝试 background-size: cover（或 contain）。

也许……

作为 IE 的回退：条件类和 png 回退；)

.ie8 .span4{
background: url(thepngone.png);
}

TNK

# 2013年3月6日

我认为这不是您需要的，但它可能对某些人有用。
使用 SVG 作为背景并保持比例的响应式元素。


#shape {
    background-image: url(../img/shape.svg);
    background-size: 100% 100%;
    width: 10%;
}

#shape:after {
    padding-top: 300%; /* % based on the image original ratio 100 x 300px*/
    display: block;
    content: '';
}

Scriptist

# 2013年3月5日

不错的文章，Chris！不过您的对象回退中有一个小错误。

.no-svg .logo { background-image: url(kiwi.svg); }

应该是

.no-svg .logo { background-image: url(kiwi.png); }

Chris Coyier

评论永久链接# 2013年3月5日

谢谢！已修复并隐藏。

Karl Spencer

# 2013年3月5日

很高兴获得更多关于 SVG 回退的信息。我必须为我的网站开始使用它们。

我的最后两个设计只在主布局中包含了 SVG，背景纹理、标题图像、logo和其他元素也都是 SVG。它们在视网膜显示屏上看起来很棒！但是我注意到，不同浏览器中的图形看起来略有不同。例如，在 Storiva.com 上，Fireworks 似乎正确地将标题背景中的某些渐变解释为椭圆渐变，而在 Chrome 和 Safari 中，它们似乎被解释为径向渐变，导致颜色稍微不那么鲜艳。我认为这很有趣，但绝对不是什么大问题。

无论如何，感谢 Chris 进行如此全面的回顾！非常感谢。

hans_jv

# 2013年3月5日

我最近在 IE10（以及可能 IE9）中遇到了 svg 问题。

我正在构建一个网站，该网站在页眉和页脚中都有一个 svg logo。在页眉（其位置为：fixed）中，我使用 div 标签并将 svg 作为背景，而在页脚中，我将其用作 img 标签。a 标签中的背景使用原始大小，而 img 标签为了设计目的略小一些。

问题在于，有时当另一个具有相同 svg 文件作为源的元素以不同大小设置时，Explorer 会移动和裁剪页眉中的背景。此问题发生在 IE10 中，但我认为它也发生在 IE9 中。

我在以下位置创建了一个 jsfiddle：http://jsfiddle.net/uK2La/
（我也在 http://codepen.io/anon/pen/zviwF 创建了一个 CodePen，但大多数情况下，错误只有在您调整窗口大小时才会显示）。

我在这个特定情况下解决了它，但是我不知道这是 IE 的错误还是我错过了什么。其他浏览器似乎工作正常。

Chris

评论永久链接# 2013年3月7日

您好，
http://jsfiddle.net/uK2La/14/

IE10 似乎使用了完全相同的图像，并且不知何故出错了，解决方法似乎是为一个图像添加一个额外的参数。会出现其他问题（比如缓存），但似乎可以工作。您应该向微软提交错误报告，总的来说，与 Chrome 相比，我在 IE10 上遇到的问题较少。

顺便说一下，classList API 在您的示例中效果很好……除了 IE<=9 之外的任何浏览器都支持它。

Paul

# 2013年3月5日

好文章！谢谢，我最近一直在苦恼如何将 SVG 集成到我的项目中。

# 2013年3月5日

如果您不习惯画布大小，它很快就会变得过时。我发现保存为 SVG 时一个有用的方法是选择您的图形，然后转到：对象 > 画板 > 将所选内容调整为画板。希望这能让其他人的生活更轻松。

Jeff

# 2013年3月5日

如何在链接内部处理 SVG？我一直试图弄清楚最好的方法。

James

# 2013年3月5日

我一直在使用这种方法作为 SVG 作为背景图像的备用方案 -

.main-header {
    background: no-repeat top left;
    background-image: url(logo.png);
    background-image: url(logo.svg);
    background-size: contain;
}

这个想法是 SVG 将根据支持情况覆盖或被忽略。

它比 Chris 的方法简单一些。对我来说似乎效果很好，但也许这里存在我没有看到的缺陷，有人可以指出吗？

Vinay Raghu

评论永久链接# 2013年3月6日

您将不必要地同时加载两者，而实际上只显示一个。但我认为这种方法非常巧妙，可以使其工作。
James

评论永久链接# 2013年3月6日

我从未想过这一点，Vinay，所以我决定用 Chrome 和 Firefox 的网络分析器检查一下，似乎只下载了 svg 文件。我不想启动 VMware 来测试 IE，但我认为它也是一样的。我仍然想知道这种方法是否存在问题，因为它感觉太容易了。
Kevin

评论永久链接# 2013年3月13日
我非常确定您将在上面使用的每个示例中都加载这两个文件。上面那个和 James 提供的那个的区别在于简单性。唯一可以确保不下载两者的方法是使用数据 URI（预加载）或在元素开始加载之前检查浏览器支持并替换/插入不同的扩展名。

您也可以尝试
```
.main-header {
    background: no-repeat top left;
    background-image: url(logo.png);
    background-image: url(logo.svg);
    background-size: contain;
}

:root .main-header {
    background-image: url(logo.svg);
}
```
:root 至少对桌面浏览器具有与 svg 相同的兼容性级别。不确定移动设备上的情况。由于无效的选择器和属性会被忽略，因此只有在较新的浏览器中才会下载 svg 文件。缺点是支持 svg 的浏览器将同时下载两者 :(
Dawid Urbański

评论永久链接# 2013年12月25日

当我阅读文章时，这是我的第一个想法。为什么不使用简单的级联规则来实现此回退？我决定进一步研究这个问题，我可以告诉你为什么这是错误的。我 100% 确定在几乎所有浏览器（实际上在我测试过的所有浏览器上，我测试了很多）中只会加载一个图像。这是我的第一个 WOW。但这能如此简单吗？答案是否定的。由于只加载了一个图像，因此没有回退。如果 .svg 无法加载（例如，由于不受支持），则不会加载任何内容。例如，在 IE8 中会出现这种情况。

此致。
Dawid。

Justin

# 2013年3月5日

此外，请考虑此方法，用于为在 img 元素内抛出 SVG 错误的浏览器创建 PNG 回退。jQuery

// use ".svg" img class attribute when the src is a SVG

$(function() {

  $(".svg").error(function() {
    $(this).attr("src",function() {
      return $(this).attr("src").replace(".svg",".png");
    });
  });

});

演示：http://wedelivery.com/lab/svg/

Peter Foti

# 2013年3月5日

如果浏览器不支持 SVG 并且您希望为您的内容提供回退，您不妨尝试替换所有内容。定义一个特定的模式并坚持使用它将有所帮助。例如，也许所有回退图像的名称都与 SVG 文件相同，只是扩展名为 .png 而不是 .svn


if (!Modernizr.svg) {
  $('img[src$=".svg"]').each(function() {
    var $this = $(this); // this = img
    $this.attr('src', $this.attr('src').replace(/svg$/, 'png'));
  });
}

Chris Coyier

评论永久链接# 2013年3月5日

不错！

作为对可能使用此方法的人的提示：请记住，您实际上必须生成这些 .png 替换文件，并且每次都将它们并排放在同一个目录中。

Julian

# 2013年3月5日

感谢分享，Chris，很棒的文章。

Matthew Lein

# 2013年3月5日

Chris，请提及 Firefox 中这个重要的 SVG 问题

在 Firefox 中，用作 css background-img 的 SVG 在其原始设计尺寸下进行位图化，然后放大或缩小。当放大一个小 SVG 时，这会导致图像非常模糊。有些人建议简单地使用一个巨大的 SVG，这样您就永远不会放大，只会缩小。但是我看到当您使用巨大的 SVG 并缩小尺寸时（尽管当时元素进行了 3d 变换和动画）会产生可怕的性能。

这个 SVG 的实现不是 S 或 V，有点好笑…

在 FF 中查看此页面，它很好地展示了此错误
http://dbushell.com/demos/svg/scaling-09-03-12/

（bugzilla 正在维护中，但这可能是错误，我现在无法检查）
https://bugzilla.mozilla.org/show_bug.cgi?id=600207

解决方法是上面提到的其他选项，例如内联 SVG。

Firefox 在很多版本中都没有修复该错误。因此，我认为目前 SVG 作为 CSS 背景不是一个好选择。这很遗憾，因为 background-cover 和居中使其成为一个极具吸引力的选项。

Gabe

评论永久链接# 2013年3月6日

谢谢！我正要发布类似的内容。我尝试使用 SVG 背景时遇到了一些严重的挫折，结果发现它在 FF 中看起来很糟糕。内联绝对有帮助，但背景图像有一些真正的优势，而且 Firefox 仍然存在此错误很有趣。

查看apple.com 菜单的这个并排特写，它使用了 SVG 精灵。Chrome 在左侧，FF 在右侧。
Jim

评论永久链接# 2013年3月8日

实际上，我在为移动设备设置 svg 时遇到了相反的情况。移动版 Firefox 完美地显示了它们，而移动版 Chrome 将它们像素化得非常严重，以至于我最终放弃了 svg 并使用了双倍大小的 png，并使用 background-size 缩小了它们。
Karl Kelman

评论永久链接# 2013年3月25日

我尝试了所有 FF 的解决方法，但它们似乎都不完全有效。访问 David Bushell 的主页，您会发现他的 .svg 徽标在使用 FF 放大和缩小时会变得模糊和不那么模糊。

使用 img 标签并没有解决我的问题。

从 .svg 代码中删除高度和宽度似乎无害，并且有所帮助。

我正在考虑只使用 FF 条件来提供 .png…

Justin

# 2013年3月5日

@Peter Foti – 同意，'img[src$=".svg"]' 好多了！

Kyle

# 2013年3月5日

很荣幸也很自豪能成为这篇文章的一部分。谢谢，先生。

Philippe Michou

# 2013年3月6日

我在这里使用内联 svg 和动画时遇到了糟糕的体验。
我没有时间优化。在 FF 上它非常可爱；使用内联 svg 和 css 可以做很多事情。感谢您的宝贵建议。（我在 Linux 上使用 inkscape）

Michael

# 2013年3月6日

非常棒的文章，我也在不久前发布了一篇关于 SVG 及其动画的文章。您可以在此处找到它：animating-properties-of-injected-svg-elements

我认为 SVG 对于多种用途都非常棒，但它们并没有得到应有的关注，尤其是在我们正在经历的这个新的多屏幕时代，它们的扩展性是救命的。

Dwoo

# 2013年3月6日

您使用哪种神奇的 base64 编码器使其缩小？

Base64 比原始格式（包括纯文本）更大。

Sergej Müller

# 2013年3月6日

感谢教程。我使用SVGO GUI 来优化 SVG 矢量图形文件。

poselab

# 2013年3月6日

我更喜欢不可见渐变技术作为 SVG 的回退方案

Dennis

# 2013年3月6日

精彩的信息。

顺便说一句，这是一个可拖动和可缩放 SVG 的演示

http://www.cyberz.org/projects/SVGPan/tiger.svg

来源：http://www.cyberz.org/blog/

airoschou

# 2013年3月6日

哇，好文章，我从这里学到了东西

David

# 2013年3月6日

优秀的文章。

只有一点说明。

您说

使用 <img> 和 background-image […] 您无法使用 CSS 控制 SVG 的内部内容
这是不正确的。您绝对可以使用 CSS 对其进行样式设置。
您只需要在 svg 内部使用 <style> 元素

（因为并非所有浏览器都支持 <?xml-stylesheet type=”text/css” href=”svg-stylesheet.css” ?>）

Robert D'Arcy

评论永久链接# 2013年3月6日

一篇非常好的文章，尽管不全面——它缺乏有关在 SVG 内部使用链接以及动画可能性的信息（尽管这需要一整篇文章）。

我一直想在网站中使用 SVG，但目前我只使用它来创建过程图形，如圭亚那图案，例如此示例 -

圭亚那实验 #1

James Nowland

真的很希望这篇文章在六个月前就存在了。以前用 Google 搜索任何关于 SVG 的内容，都会返回很多 2001 年的糟糕的 Adobe 链接。

随着所有高 DPI 设备的出现，SVG 将会越来越流行。

下面是我在很多项目中使用过的 Sass/Scss 混合宏。


@mixin svg($img-name) {

    .svg .svg") no-repeat;
    }
 
    .no-svg .png") no-repeat;
    }
}

.logo {
    @include svg-logo('company-logo');
    @extend %image-replace;
    height: 100px;
    width: 100px;
}

// Use % for silent classes
%image-replace {
    display:block;
    overflow:hidden;
    text-indent:-9999em;
}

Marcus

# 2013年3月6日

嗨！
我想指出，SVG 实际上可以被认为是一个带有矢量图形呈现功能的应用程序引擎，因为您可以像操作 HTML 一样编写文档脚本和 CSS 样式。如果您希望在主要布局中使用更多低级图形基元，而不是 HTML 中提供的高级“文档”语义，则可以使用 SVG 代替 HTML（不过目前浏览器可能需要将 SVG 视口包装在 HTML 标签中）。

Christian Krammer

# 2013年3月6日

哇，Chris，文章很棒。我只是浏览了一下，但一定会很快深入研究。

只有一点小提示：如果您有一个 SVG 文件，您不必显式地将其另存为“代码”，因为 SVG 文件本身就已经“用代码编写”了。

Pete B

# 2013年3月6日

一种使 SVG 更小的方式是将其转换为 Data URI。

一个小小的更正：用于 data-uri 的 base64 编码的 svg 字节数总是**多于**未编码的 svg。我想您想到的优化是通过嵌入避免 http 请求？

理论上，您可以在 data uri 中使用未编码的 svg，但浏览器支持有点不稳定。

http://rod.vagg.org/2012/05/data-uri-svg/

Brad S.

# 2013年3月6日

精彩的文章。正是为了这类内容我才会订阅！谢谢 :)

Johnny Martin

# 2013年3月6日

看看 Ben Schwarz 的这个技巧

“所有支持 SVG 背景图像的浏览器也支持多个背景图像。”

.module {
    background: url('logo.png');
    background: none, url('logo.svg');
}

圭亚那实验 #1

评论永久链接# 2013年3月6日

显然 Android 2.3 坏了这个局。我个人没有测试过这个。

@smashingmag 不幸的是，行不通。Android 2.3 惨败。支持多个背景图像，但不支持 SVG。请求两者，都不显示。

— Tim Kadlec (@tkadlec) 2013年2月25日
Johnny Martin

评论永久链接# 2013年3月6日

抓住了！感谢您指出这一点。
cimmanon

评论永久链接# 2013年10月18日
所有支持 SVG 背景图像的浏览器也支持无前缀的 background-size。IE8 不支持 SVG 或 background-size，Android 2.3 不支持 SVG，但需要为 background-size 添加前缀。
```
.foo {
    background: url(foo.png) no-repeat;
    background: url(foo.svg) left top / auto auto no-repeat;
}
```

Steve Wanless

# 2013年3月6日

很棒的图片选择——几维鸟不仅仅是一种水果！

strages

# 2013年3月6日

使用优化工具时，请始终检查 SVG 输出中的失真，并检查是否有任何错误。

在我的例子中，它没有为我的线性渐变保留 id，导致纯色而不是渐变 :P

Dragos Mocanu

# 2013年3月6日

应该更多地使用 SVG。维基百科是唯一一个想到的定期使用 SVG 的网站。

Ron Logan

评论永久链接# 2013年3月16日

MSN 在我们的 IE10/Windows8 页面上使用内联 SVG 作为标题徽标，并使用 CSS 更改不同频道的颜色，而不是使用一堆不同颜色的 PNG。

Arshad Ansari

# 2013年3月6日

很棒的文章！实际上几天前就开始使用 SVG 了，所以我还是个新手。但最大的优势在于，我可以在 Illustrator 等软件中简单地创建矢量图形，并将其作为 SVG 用于我的设计中。它们极大地帮助我减少了设计尺寸。

感谢分享如此有价值的信息，它真的帮助我更好地理解了 SVG。

Gregory Pakosz

# 2013年3月6日

请注意，正如我在推特上告诉你的，SVG 作为 background-image 在 Opera 中表现不佳：http://stackoverflow.com/questions/15220910/svg-as-css-background-problems-with-zoom-level-in-opera

此外，正如 caniuse.com 提到的，当在所有浏览器（Chrome 23+ 和 IE9+ 除外）中缩放或打印时，SVG 作为图像会变得模糊/像素化，因为浏览器首先将 SVG 渲染成位图，然后缩放该位图，而不是在缩放级别更改时重新渲染。

HypeBuzz

# 2013年3月7日

这是一个很棒的资源。我阅读了很多关于 SVG 的内容，但从未在我的项目中使用过它。将来一定会使用它！

Gavin

# 2013年3月7日

Hot Link Flat UI 不起作用。

抱歉——不知道该在哪里发布此问题，因为这些链接没有评论部分。

Eelco

# 2013年3月7日

我是否理解正确，当 SVG 在 CSS 中以 base64 编码时，您无法对其进行样式设置？例如，在 http://codepen.io/anon/pen/oFhzA
Codepen 似乎不喜欢 inline-image 属性，但您明白了我的意思。

Jeremy

# 2013年3月7日

您如何在谈论 Web 上的 SVG 时不提及 RaphaelJS？当然，它更多地是关于动态渲染 SVG 并与其交互，但引用其网站的话

Raphaël 是一个小型 JavaScript 库，旨在简化您在 Web 上使用矢量图形的工作。例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，则可以使用此库轻松实现。
Raphaël 使用 SVG W3C 建议和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Raphaël 的目标是提供一个适配器，使绘制矢量艺术跨浏览器兼容且易于使用。
Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

我非常确定它内置了触摸支持（拖动）。查看其网站上的演示。

Jeremy

评论永久链接# 2013年3月7日

还有一些不错的插件

将“说明”导出为 json
将“说明”导出为实际的 SVG
使用 canvg 将其转换为浏览器中的 PNG/JPG——这对于导出非常棒；您基本上可以在浏览器中创建自己的图像编辑器。
绘图应用程序示例——Raphael SketchPad
如果您找到一些多边形公式，则可以很容易地创建复杂的形状（我为心形、星形和三角形构建了一些东西）。
DarrenM

评论永久链接# 2013年3月7日

+1

我正在使用 Raphael 库处理我们其中一个网站上的 SVG 图形。我知道它在不支持 SVG 的 IE 平台上使用 VML。

我将其用于自定义图表，这些图表以前使用服务器上的图形库绘制并作为图像流式传输到浏览器。使用 SVG 可以让我在 JavaScript 中与图表交互，例如，当用户将鼠标悬停在图例中的名称上时，我可以突出显示图表上的一个绘图。

Raphael 命令嵌入在 HTML 中，这使得页面大小比以前略大，但它并没有明显影响页面性能，并且页面现在通过单个 HTTP 请求而不是多个请求提供服务。

David Goss

# 2013年3月7日

不错的文章，Chris。

最近我将 SVG 用于徽标（作为 <img> 标签），并且由于该网站上基本上没有 Android 2.3 用户，因此我只需要担心旧版 IE，这意味着我可以使用条件注释并完全避免使用 JavaScript。

我在这里写了它.

Daniel Bakan

# 2013年3月7日

这太棒了，Chris！非常感谢您将所有这些内容整合在一起。特别是 SVG 和 CSS 的组合带来了许多机会。我必须自己尝试一些这些东西！再次感谢。

Rachel Reveley

# 2013年3月7日

很棒的文章。还有一点有用的知识。如果您将 SVG 嵌入到 LESS 中，可能也嵌入到 SASS 中，您可以使用变量设置填充颜色。这对我来说非常方便，因为我可以在多个网站上使用标准图标，但每个网站都设置了自己的颜色。

Lûhn 的德鲁伊

# 2013年3月7日

这是更简单易懂的 base64 代码（适用于终端）

openssl base64 -in kiwi.svg -out kiwi_64.txt

Ben

# 2013年3月7日

我在内联 SVG 示例中添加了一些内容以使其可访问
http://codepen.io/bensmithett/pen/oyqhc

非常有帮助的文章 :)

Bechara

# 2013年3月7日

尽管 SVG 非常棒，但我仍然遗憾的是，它在 JavaScript 游戏中应用得太慢了。我认为与 Canvas 相比，我们可以用 SVG 做更多的事情，但由于它的速度慢，我们不得不求助于 Canvas。

JohnMotylJr

# 2013年3月8日

我打开这篇文章时以为它会有一些解释和一些代码片段。然而，我的想法从头到尾都被彻底颠覆了。非常棒的文章，这篇文章绝对要收藏起来。感谢 Coyier 先生为我的大脑灌输了更多有益的东西。

Inder Singh Ishwerdas

# 2013年3月8日

关于 SVG 的文章写得非常全面，我非常喜欢。先保存起来以后再看。在网页游戏开发的场景下，SVG 和 Canvas 之间的区别也让我感到非常困惑。

www.codedcontainer.com

# 2013年3月8日

我第一次听说这个。更多人应该知道这个。我一定要发条推特推荐一下！我得收藏一下，有空的时候自己也创建一些 SVG。

Peter Dmitrienko

# 2013年3月9日

太棒了，非常感谢。

James

# 2013年3月9日

哇！绝对是我见过的关于 SVG 最好的文章了。

我打算用这种格式来制作网站的 logo。从语义的角度来说，是使用 HTML 中的 IMG 标签并承受额外的 HTTP 请求更好，还是通过 CSS 来实现更好呢？

Fotiman

评论永久链接# 2013年3月9日

如果你认为它是内容的一部分，那么它应该用 img 标签。如果你认为它只是表现形式，那么可以通过 CSS 将其设置为背景图片。
James

评论永久链接# 2013年3月10日

嗯，我非常确定网站的主要 logo 是内容，而不是表现形式。所以使用 IMG 标签是最佳实践。我在这方面的疑问是语义和性能之间的权衡。

我现在正在考虑 Chris 提到的最后一种技术，在 IMG 标签中使用 base64，并添加一个“alt”标签。

C and P Unlock

# 2013年3月10日

哇，我没想到可以直接从 Illustrator 获取 SVG。太棒的功能了！

Mike

# 2013年3月10日

你好！
在我们使用 html5 + backbone + phonegap 开发的 Android 应用中，我们决定使用 SVG 来进行一些插图。这个决定现在给我带来了很多麻烦。我试图嵌入的 SVG 不是基本的 SVG。
我设法将阴影作为过滤器直接添加到 SVG 中。很酷的是，它在 Android 设备上使用的任何浏览器中都能很好地渲染。但是，当您从相同的 html5 使用 phonegap 创建应用程序并在同一设备上运行时，阴影过滤器不会渲染。我使用 HTC one X 和最新的 Android 发行版进行测试。

有没有人知道为什么 phonegap 似乎会从 SVG 中删除过滤器？我尝试在网上搜索此问题，但还没有找到任何线索……

谢谢

Mike

Cubicle Ninjas

# 2013年3月11日

感谢 Chris 的概述！这里有很多我之前没有意识到可以实现的事情！

cnwtx

# 2013年3月11日

你也可以使用 php 实时生成 data-url。例如


function data_url($file, $mime)
{
$contents=file_get_contents($file);
$base64=base64_encode($contents);
echo("data:$mime;base64,$base64");
}

用这个来调用它


data_url('./images/image.svg', 'image/svg+xml');

Roman

# 2013年3月11日

好的，我仍然不清楚应该使用哪种格式的 SVG。例如，对于使用 CSS3 进行动画，哪种方法最好？此外，对于制作响应式图形（如 logo），哪种方法最好？我看到很多人提出了不同的建议，但至少应该有一种方法可以很好地进行样式设置和使用 CSS 进行操作……

Ben

# 2013年3月11日

在使用 CSS 设置 `fill` 属性时发现了一个需要注意的地方 - 你需要移除 Illustrator 导出的任何硬编码的 `fill` 属性。

例如

<svg class="foo"><g fill="#FFF700"><path... /></g></svg>

的 `fill` 属性不会被

.foo { fill: #bada55; }

Gareth

评论永久链接# 2013年3月18日
如果你定位具有 fill 属性的 svg 元素，它会覆盖硬编码的属性。即更改为
```
.foo g {
fill: #bada55;
}
```
.foo path { 也可以工作。

Ste Allan

# 2013年3月12日

为了使用 SVG，你需要确保你的服务器已将正确的 MIME 类型设置为服务于该文件类型：“image/svg+xml”。

Rob

# 2013年3月13日

感谢你撰写这篇关于在网站上使用 SVG 的最佳实践的文章。

如果你在努力让 SVG 在你的页面上显示，一个简单的解决方法是在你的 HTACCESS 文件中修改 AddType。

将此添加到你的 HTACCESS 文件的顶部


AddType image/svg+xml svg
AddType image/svg+xml svgz
AddEncoding x-gzip .svgz

Joe

评论永久链接# 2014年3月25日

谢谢！这让我抓狂了。我错误地认为我的主机默认提供了这个功能。

Morfioce

# 2013年3月14日

Chris，你太棒了！

Shabir Gilkar

# 2013年3月14日

一直都很棒 :)

Sven

# 2013年3月17日

我最近写了一篇关于使用 SVG 堆叠来替代 CSS 雪碧的文章。因此，每个图标都存储在同一个 SVG 文件中，但在其自己的图层中。
» http://hofmannsven.com/2013/laboratory/svg-stacking/

Richard Bagnall

# 2013年3月18日

很遗憾你必须将 SVG XML 嵌入到页面中才能对其进行样式设置，如果可以在页面中有多个实例并根据其上下文以不同的方式对其进行样式设置，那将非常强大。

Nate

# 2013年3月20日

我开始使用 Raphaël JavaScript 库。它非常漂亮，而且功能强大。来自网站

Raphaël [‘ræfeɪəl] 使用 SVG W3C 建议和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Raphaël 的目标是提供一个适配器，使绘制矢量艺术跨浏览器兼容且易于使用。

Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

该网站上有详细的文档，但在网上教程却很少。<br/>
有没有人有使用它的经验？

Jeremy

评论永久链接# 2013年3月27日

是的 - 正如我提到的和这个人回复的。他们文档中包含的一些示例很难理解，但你所需的大部分内容都在那里。如有疑问，请告诉我。

Scott Lyttle

# 2013年3月21日

很想了解是否还有其他人遇到过我在构建的网站中遇到的相同问题。
我在 Chrome（最新版本）中测试该网站。Modernizer 返回对 svg 的支持，我可以在浏览器中直接访问 svg 文件（显示正常），但它就是不会在页面上显示。在所有情况下，svg 都在 CSS 中设置为背景图像。

Michael

# 2013年3月22日

我用它来进行 js 对 svg 支持的检测。

/*简单的SVG图像支持检测*/

if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) { document.documentElement.className = "svg"; }

在css中使用这个

#content {background-image: url(images/logo4.gif);}

html.svg #content {background-image: url(images/logo4.svg);}

感谢这个网站提供的关于svg使用信息。
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

curtisblackwell

# 2013年3月23日

创建了一个 bash脚本来简化 Mathias Bynens 编写的 base64 选项。

Rudie

# 2013年3月24日

“无法缓存”？内联 SVG 只是 HTML 文档的一部分，不是吗？所以如果文档被缓存，内联 SVG 也被缓存了？我不明白。

Chris Coyier

评论永久链接# 2013年3月24日

没错，但你可能不会对 HTML 进行非常严格的缓存，甚至根本不会缓存。例如，此页面的缓存 HTML 现在正在失效，因为我正在添加此评论。

Karl Kelman

# 2013年3月25日

从网上下载免费或库存矢量图时，我经常无法使其显示。似乎某些浏览器不喜欢许多 SVG 图像代码中出现的“inkscape:”和“sodipodi:”前缀。对我来说，如果在文本编辑器中打开文件并删除这些短语，它似乎可以正常工作。

关于 Firefox 中模糊的提示很好。我的大多数图像在 Firefox 中看起来都很好，所以我停止仔细查看 FF 中的每个图像，但有一些缩放的图像看起来很糟糕。

airtonix

# 2013年3月25日

阅读这篇文章让我回忆起了 php 的糟糕经历……这门语言真是让人恼火，分号的冗长要求……甚至在模板中也是如此。

使用 Django 要容易得多。

airtonix

# 2013年3月25日

@Chris Coyler 如果你的页面缓存因简单的更改（如评论）而失效，那么你需要考虑使用更好的模板系统。

Django 有应用程序级缓存、整个页面缓存和块级缓存的概念：https://docs.django.ac.cn/en/dev/topics/cache/

在你描述的场景中，我会将 SVG 包含包装在块级缓存中，只有在更新 svg 时才会失效（假设它是从 ORM 查询中提取的）。

php 的开发者肯定也有类似的东西吧？

Jeremy

评论永久链接# 2013年3月27日

呃……他说的是客户端页面缓存 - 从字面上看，如果 HTML 发生了更改，它就是一个“新”页面。与你选择的语言无关。

可能的解决方法是使用 Ajax 加载真正动态的内容，比如评论，但这样你就要想办法让爬虫能够索引它。

Johan Hernández

# 2013年4月3日

嗨，我刚刚使用（基于 Teamtreehouse 的一个视频，并根据 Ian Lunn 对条件注释进行了修改）SVG 作为徽标，并使用条件注释作为 PNG 的后备方案……以下是代码

 <object data="img/logo.svg" type="image/svg+xml">
    <a href="img/logo.svg">
    <!--[if lte IE 8]>
      <img src="img/logo.png" alt="">
    <![endif]-->
    </a>
</objetct>

它运行得非常好！要添加链接，您可以参考这个在 Fiddle 上找到的简单示例（无需 JS）

http://jsfiddle.net/WEbGd/

Johan Hernández

评论永久链接# 2013年4月3日

抱歉，在结束对象中有一个错误……是 object 而不是 objetct。:D

Jad Joubran

# 2013年4月3日

在使用 SVG 时，Raphael 是一个非常必要的库！不过这篇文章很酷，谢谢

nitro

# 2013年4月14日

对于 IE7-8 和跨浏览器，可以使用
http://www.pep-site.fr/logo_html5.php

Costa

# 2013年4月16日

奇怪的是，我无法使用 CSS 在 IE9 中调整 SVG 的大小。SVG 有视口、宽度和高度，但它们似乎没有响应 CSS 规则。在 6 个白色面板的右上角（此处）有（或应该有，在 IE9 中）SVG

Karl Kelman

评论永久链接# 2013年4月16日

替换

svg width=”640″ height=”480″ version=”1.1″ baseProfile=”full” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:ev=”http://www.w3.org/2001/xml-events”

为

svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 640 480″ enable-background=”new 0 0 640 480″ xml:space=”preserve”

它应该可以正常工作。我遇到过在 SVG 中使用 width 和 height 属性进行缩放的问题，并且似乎从未在删除它们后遇到过问题。
Costa

评论永久链接# 2013年4月16日

太棒了！我的视口不见了！！以后再也不要凌晨 3 点写代码了。非常感谢你发现这个问题，我以为我之前已经添加了视口。所以，对于 IE9，似乎有充分的理由包含高度和宽度，请查看这篇博客文章。
Karl Kelman

评论永久链接# 2013年4月16日

我似乎无法复制 seowarp.com 遇到的省略 height 和 width 属性的问题。我在几个网站上广泛使用过 .svg 图片（使用 rem 自适应调整大小），并且它们在跨浏览器测试中都具有正确的纵横比。每当我注意到图片的纵横比错误时，它总是在我忘记删除的 .svg 代码中包含 height 和 width。我总是使用 CSS 定义高度和宽度，并从 .svg 本身中省略它们；我注意到你只在你的网站上定义了宽度。

我当然不是专家…………很好奇这样做的正确方法是什么。

其他 Tricksters 怎么想？
Karl Kelman

评论永久链接# 2013年4月25日

经过一些进一步的无意科学实验，我似乎在使用 .svg 作为背景图片时偶尔会出现问题，这些问题可以通过删除 .svg 中的 height 和 width 并仅使用 CSS 缩放图片来解决。令人困惑的是，如果我使用 .img 标签嵌入图片，则省略 .svg 中的 height 和 width 可能会导致问题。

Graham

# 2013年4月17日

嗨，我发现你也可以在 svg 文档中使用 @import 来加载外部 CSS 文件。


<svg>
<style type="text/css">
@import "external.css";
</style>
</svg>

Christian Krammer

# 2013年4月25日

感谢你详细介绍了 SVG 图片，Chris。这对我很有帮助，因为我们计划在一些应用（仅限 Webkit）中使用它。因此，我们也不需要担心后备方案或不兼容性。

Mike Buttery

# 2013年4月29日

首先，Chris，非常感谢你的文章。我学到了很多东西。

我确实遇到一个可能值得一提的“问题”，因为我找不到任何提到它的内容。使用 <object> 标签和 Data URI（为了解决 Chrome 的 CORS 问题，因为我想访问 SVG 内部的元素），Chrome 似乎失去了渲染任何渐变的能力。

示例在此：http://jsfiddle.net/mikedidthis/rXJXq/1/

I 不认为我错过了什么。:(

Fab

# 2013年10月8日

嗨，文章确实很棒，我只是遇到一个问题

我使用 Mobilefish.com 服务对我的 SVG 进行 Base64 编码，但有时 Chrome 会出现错误：错误 414 – URI 太长。

我认为这取决于我的 Web 服务器，但我必须将我的东西推送到生产环境，并且我必须确保不会出现该错误
你有没有关于如何“修复”此问题的想法/建议？

提前感谢。

Fab

评论永久链接# 2013年10月15日

有人遇到过 Base64 SVG 数据 URI 的相同问题吗？

lucideer

# 2013年10月9日

列表中还有一个额外的技巧，纯粹是为了完整性，仅此而已。类似于 <object/> 方法，此外它还支持 CSS（我认为……也许吧）。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="kiwi.svg#Layer_1" />
</svg>

但是，似乎完全不支持 IE。

christian

# 2013年10月15日

Chris，假设一整袋花生 M&M's 是 100 美元的现代货币。然后假设我知道你的地址。我会毫不犹豫地送给你一袋花生 M&M's，我的朋友！你写作的方式——用通俗易懂的语言表达——抚慰了我的灵魂。我一直在网上搜索，试图第一次学习如何使用 SVG。我差点被吓跑了。天哪。真是太令人困惑了。然后几个小时后我发现了这颗宝石……伙计，还记得那袋 M&M's 吗？是的。我是认真的！非常感谢你！！

Scott Grodberg

# 2013年10月23日

不错，Chris，已经开始为客户使用它了。非常好的文章，就实用性而言，可能比 MDN 更好。再次感谢！

Shaun Fox

# 2013年11月5日

我一直在寻找一些关于打印 SVG 的信息。有些似乎可以渲染，但会被裁剪，有些根本无法显示，我不知道其中的区别。

例如，这个简单的分辨率测试根本无法打印它们。

但是你的 codepen 示例会渲染它们，但它们会被裁剪。

有什么提示吗？

Kieran Mahon

# 2013年11月7日

大家好，我正在使用“SVG 的 Data URI”选项，一切正常，除了 IE 中的背景位置。

IE 似乎只会显示居中的 SVG。似乎无法覆盖它。我最初在背景速记中包含了对齐方式，但也尝试分离 CSS 背景声明，但都无济于事。

还有其他人确认这一点吗？我可能在浪费时间尝试解决这个问题！！

Jan

# 2013年11月13日

嗨，感谢这份有用的指南。根据本指南，我制作了仅由 CSS 渲染的世界国旗：http://www.phoca.cz/cssflags/。当然，它有优点和缺点。CSS 可以改进（这只是一个实验）。

有一件事我发现了，不确定这是否适用于所有文件大小，但 Base64 编码比纯 SVG 代码大得多。

不幸的是，Internet Explorer 不支持 background 属性中的原始 SVG 代码，所以这是唯一一个需要对 SVG 代码进行编码的原因，我认为（也许我错了）。URI 编码也是如此，输出比 Base64 小，但对于 Firefox，你需要更改此字符：“#”，当然在 Internet Explorer 中它也不起作用。

无论如何，再次感谢你的指南。

Jan

Jeremy

评论永久链接# 2013年11月14日

@Jan 优秀的成果。抱歉在这里而不是你的支持论坛发布此内容，但我注意到 AU 国旗的右上角和左下角条纹有点偏离……

Jan

# 2013年11月15日

@Jeremy

嗨，

感谢你的信息，似乎在清理 SVG 时遇到了一些问题。

我已经手动清理了它，现在看起来没问题了

http://www.phoca.cz/cssflags/#australia（刷新页面，因为错误的 SVG 可能会被缓存）

谢谢，Jan

fjpoblam

# 2013年11月22日

很棒（鼓舞人心）的文章。我已经在我的网站和客户的网站上使用 SVG 好几年了。我甚至将我的徽标转换为 SVG——这种语言看起来足够简单。我最后的一个难题是该死的 CSS。我有一个渐变背景，目前在“html”中设置，以及“min-height:100%”。为什么？这似乎可以确保渐变一直延伸到视口，即使在内容非常简短的页面上也是如此。（例如单行）。但是，对于较长的页面，渐变会拉伸到内容的整个长度，而不是视口。如何始终如一地（设备无关）填充视口？

Steve Smith

# 2013年12月1日

感谢这篇文章——我是 SVG（和 Illustrator）的新手，这对我帮助很大。

我按照这些简单的说明在 Illustrator 中制作了一个玻璃按钮，并使用您上面推荐的设置将其保存为 svg 文件。在 Illustrator 中看起来很棒，但在浏览器中看起来很糟糕：透明渐变根本不起作用。我已经谷歌搜索了解决方案，直到手指流血，但任何地方都找不到 – 有解决方案吗？

再次感谢您精彩的文章。

Louis

# 2013年12月12日

嘿，Chris / 其他正在阅读本文的人，

我在一个 Unicode 字符 ▼ 内嵌入了图像，给我带来了一种不错的效果，而无需创建透明的 png，它实际上看起来非常简洁。

想知道是否可以动画化此图像？尝试过动画化不透明度，但效果并不好（由于某种原因无法达到完全不透明，猜测是 WebKit 的错误？)http://jsfiddle.net/n7Wy6/

只是想知道还有什么可能？

Luke

# 2014年2月27日

我在网上做了很多研究，我真的无法弄清楚如何在 Illustrator 中制作 svg logo 并使其在具有透明背景的网站上显示……

我想在菜单中使用 svg 文件作为非常小的图标（解决缩放问题），但它显示为白色背景.. 有办法解决这个问题吗？

jswain

# 2014年3月14日

很棒的文章/教程，帮助很大……特别感谢 Ben 对其进行的调整以使其可访问（3月7日的帖子）。

jasonbdesign

# 2014年3月20日

当你的 svg 图标像一个“空心”框时，如何执行 :hover 时的填充更改？一旦我在框内，而不是技术上在细 svg 上，我就失去了悬停效果。我尝试在父 div 上使用 display:block 并将 over 放置在上面。看来我无法通过外部样式表覆盖 xml 加载的样式表中的任何内容。

我希望这说得通。我正在尝试使用由非常细的线条组成的信封图标。信封的内部是透明的。除非我在细线上，否则我会失去悬停效果。

jasonbdesign

# 2014年3月20日

我通过在组上使用悬停解决了上述问题，在内部定义了一个不透明度为 0 的矩形，然后使用我的路径。这样，如果您有一个细的图标，您就可以使用不可见的正方形来定义“热点”。

注意：我没有在这里发布 html，但我使用了 Chris 在上面描述的对象方法。

svg.css
/* 图标 */

.off_state {
    fill: #A7A9AB;
}

.link_area {
    opacity: 0;   
}

.link_group:hover > .off_state {
    fill: #FF0000;  
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"> 
<g class="link_group"><rect class="link_area" x="0px" y="0px" width="29px" height="29px"/><path d="M2.985 6.088v16.562h23.028V6.088H2.985z M14.268 16.258l-9.615-9.17h19.579L14.268 16.258z M10.56 14.1 l-6.574 6.707V7.833L10.56 14.104z M11.283 14.794l2.972 2.835l3.131-2.882l6.619 6.903H4.562L11.283 14.794z M18.123 14.1 l6.891-6.342v13.529L18.123 14.07z" class="off_state"/></g></svg>

Jason Lombard

# 2014年3月26日

嗨，技术极客们，

谁能用简单的英语告诉我如何将 .svg 图像文件放入 HTML5 网页中？

我通常使用标准 HTML 格式，但我想知道如何以及在哪里放置嵌入的 svg 代码？

John

# 2014年4月1日

多么棒的帖子和讨论。谢谢！

我很好奇，有没有人尝试过创建自己的字体作为一种替代方法，以通过 CSS 控制实现矢量质量/可缩放图形？与 SVG 相比，fontface 在旧版 IE 中是否具有更好的支持？

https://caniuse.cn/fontface
https://caniuse.cn/svg

Valery

# 2014年4月2日

我想在我的项目中使用 SVG，但无法缓存似乎是一个巨大的障碍。如果您在您的 logo 上使用它，它位于每个页面上，这是否会使整个网站无法缓存？如果它是一个大型复杂网站，缓存对于性能至关重要，该怎么办？

ezra

# 2014年4月16日

感谢这篇文章！关于用于样式设置的可使用属性，我发现了以下内容
http://www.w3.org/TR/SVG11/styling.html#SVGStylingProperties

不知道它是否是最新的/相关的/已实现的。

Michiel

# 2014年4月24日

上面提到的 Firefox 使缩放的 SVG 模糊的问题已在 24 及更高版本中修复。在撰写本文时，最新版本为 28。（2014年4月24日）

Denn

# 2014年4月25日

也许我搞错了，但由于 IE8 并不真正支持 javascript，所以我不明白这将如何工作。
if (!Modernizr.svg) {
$(‘img[src$=”.svg”]’).each(function() {
var $this = $(this); // this = img
$this.attr(‘src’, $this.attr(‘src’).replace(/svg$/, ‘png’));
});
}
我尝试过添加它（在标题中的脚本标签对中），它在 IE8 测试中失败，这里提出的解决方案http://wedelivery.com/lab/svg/（由上面某人发布）也失败了。

我错过了什么吗？谁能指引我一个网站，该网站显示在 IE8 中使用该全局脚本从 svg 到 png 的干净切换？

使用 onerror 的版本有效，因为 jscript（M$ 的脚本版本和 javascript）之间的重叠足以使其工作，但全局版本似乎没有。我非常希望有一个全局解决方案，因为现在我们只是降低了整个网站的性能，并建议他们可能需要考虑使用更新的浏览器。

Sean

# 2014年4月26日

根据您的文章，我制作了一个命令行 SVG 优化器和 base64 编码器。它非常易于使用，“svgoptimizer -h”将显示其使用方法。https://gist.github.com/mrinterweb/11303706

# 2014年5月5日

我有一个问题？我使用了对象路线来处理 .svg – 它在某些方面运行良好……回退 .png 奏效了……我的 .svg 虽然在线查看时是正确大小的框，但其中包含 .txt 文件代码？我确实在 ILL cs3 中制作了我的 .svg，并使用 DW cs3 生成 html 并上传……我尝试了各种方法，甚至尝试了您的其他选项，但仍然 – 我认为它有效，但我的 .svg 在图像区域中显示为文本代码，并带有滚动条……我甚至尝试了在各种网站上找到的保存 .svg 时的所有不同选项……嗯，你能帮忙吗？是否有人以前遇到过这个（我确信这是一个小问题）……我是否需要使用云或 cs5 或更高版本……我的网站是 HTML 5 且响应式……我感到困惑.. 这是我的第一次尝试，因为我希望我的所有矢量都为 .svg，以便它们可以缩放并看起来很棒！

Angie

# 2014年5月9日

感谢这篇文章，它写得很好，内容也很丰富，但我有一个问题。当我从 Illustrator 保存我的 svg 时，我的代码没有获取我的画板大小（标记中没有显示高度和宽度），我的图像没有响应。从文章中可以看出，这应该是默认行为。我使用的是 Adobe CC，因此它应该是最新版本。我是否需要在设置中进行某些设置才能使 svg 获取画板的大小？目前，当我在浏览器中打开它时，它会呈现完整的高度和宽度，而不是我给它的设置。有没有办法解决这个问题？

Alex

# 2014年6月4日

很棒的文章。我最近开始使用 SVG，发现这非常有用。但是，我想知道是否有人可以帮助我解决我正在处理的问题。我有一个使用 DEFS 和 USE 的各种颜色的单个 SVG logo。然后我使用该方法包含 logo。由于 logo 用于页面模板的两个单独区域，因此我想使用 CSS 根据对象的唯一 ID 样式化 SVG 填充颜色。这可以通过 CSS 完成吗？我可以用脚本或将 SVG 代码直接添加到模板中来做到这一点，但理想情况下我希望使用 CSS。谢谢！

Joanne

# 2014年6月5日

非常感谢您的信息，您一举解决了我的所有问题。

Mark Miller

# 2014年6月18日

很棒的内容，Chris！感谢详细的解释。

ruggero

# 2014年6月25日

只是在 github 上发现了一个开源 SVG 背景图案库：http://buseca.github.io/patternbolt/

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。