什么是矢量图形？

在网络上，您将使用两种类型的图像 - 光栅图像和矢量图像:

• Raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. Popular web raster formats include Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
• Vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The SVG format allows us to create powerful vector graphics for use on the Web.

为了让你了解两者之间的区别，让我们看一个例子。 你可以在我们的Github库中找到这个例子 vector-versus-raster.html"class ="external"> vector-versus-raster.html - 它显示了两个看似相同的图像并排，一个红色的星形，黑色的阴影。 区别在于左边的是PNG，右边的是SVG图像。

>

当您放大页面时，PNG图像变得像素化，因为它包含每个像素应该在哪里(和什么颜色)的信息 - 当缩放时，每个像素只是增加大小填充 多个像素在屏幕上，所以图像开始看起来块状。 然而，矢量图像继续看起来漂亮和清晰，因为无论它是什么大小，算法都用于计算图像中的形状，值随着它变大而被缩放。

此外，矢量图像文件比它们的光栅等效物轻得多，因为它们仅需要保持少量算法，而不是单独地对图像中的每个像素的信息。

什么是SVG？

此外，矢量图像文件比它们的光栅等效物轻得多，因为它们仅需要保持少量算法，而不是单独地对图像中的每个像素的信息。

作为一个简单的例子，下面的代码创建一个圆和一个矩形:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

这将创建以下输出:

从上面的例子，你可能得到的印象是SVG是容易handcode。 是的，你可以在文本编辑器中编写简单的SVG，但对于复杂的图像，这很快开始变得非常困难。 对于创建SVG图片，大多数人使用矢量图形编辑器，如 Inkscape 或 en.wikipedia.org/wiki/Adobe_Illustrator"class ="external"> Illustrator 。 这些包允许您使用各种图形工具创建各种插图，并创建照片的近似值(例如Inkscape的跟踪位图功能)。

除了迄今为止描述的SVG之外，SVG还有一些额外的优点:

• Text in vector images remains accessible (which also benefits your SEO).
• SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.

那么为什么会有人想要使用SVG上的光栅图形？ 好吧，SVG确实有一些缺点:

• SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.
• SVG can be harder to create than raster images, depending on what kind of image you are trying to create.
• SVG is not supported in older browsers, so may not be suitable if you need to support older versions of Internet Explorer with your web site (SVG started being supported as of IE9.)

由于上述原因，光栅图形可以更好地用于复杂的精确图像，例如照片。

将SVG添加到您的网页

在本节中，我们将介绍通过不同的方式向Web页面添加SVG矢量图形。

快速方法: code>< img>

要通过 > < img> 元素，您只需要按照预期在src属性中引用它。 您需要一个 height 或 width 属性(如果您的SVG没有固有的宽高比)。 如果您尚未这样做，请参阅 HTML中的图片。

<img 
    src="equilateral.svg" 
    
    height="87px"
    width="100px" />

Pros

• Quick, familiar image syntax with built-in text equivalent available in the alt attribute.
• You can make the image into a hyperlink easily by nesting the <img> inside an <a> element.

Cons

• You cannot manipulate the image with JavaScript.
• If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
• You cannot restyle the image with CSS pseudoclasses (like :focus).

疑难解答和跨浏览器支持

要支持不支持SVG(IE 8及以下版本，Android 2.3及更低版本)的SVG浏览器，您可以从 src 属性中引用PNG或JPG，并使用 "https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-srcset\">srcset 属性(只有最近的浏览器才能识别)才能引用 SVG。 在这种情况下，只支持浏览器会加载SVG - 旧的浏览器将加载PNG:

<img src="equilateral.png"  srcset="equilateral.svg">

您还可以使用SVG作为CSS背景图像，如下所示。 在下面的代码中，旧的浏览器会坚持他们理解的PNG，而较新的浏览器会加载SVG:

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

与上述< img> 方法类似，使用CSS背景图像插入SVG意味着SVG不能用JavaScript操作，并且也受到相同的CSS限制。

如果您的SVG没有显示，可能是因为您的服务器未正确设置。 如果出现这种情况，则此文章将指向正确的方向 。

如何在HTML中包含SVG代码

您还可以在文本编辑器中打开SVG文件，复制SVG代码，然后将其粘贴到HTML文档中 - 有时称为将 SVG内嵌或内联SVG 强>。 请确保您的SVG代码段的开头和结尾是 < svg>< / svg> 标签(不包括这些标签之外的任何内容)。下面是一个非常简单的示例，您可以将其粘贴到文档中:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

Pros

• Putting your SVG inline saves an HTTP request, and therefore can reduce your loading time.
• You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property.
• Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)
• You can make SVG markup into a hyperlink by wrapping it in an <a> element.

Cons

• This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.
• Extra SVG code increases the size of your HTML file.
• The browser cannot cache inline SVG as it would cache regular image assets.
• You may include fallback in a <foreignObject> element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.

如何使用 浏览上下文，有效地将另一个HTML页面嵌入到当前页面中在HTML 4.01中，文档可以包含头部和主体或头部和框架集，但不能同时包含主体和框架集，但是可以使用iframe 每个浏览上下文都有自己的会话历史和活动文档，包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文(没有父级)通常是浏览器窗口。 "> < iframe>

您可以像浏览器一样在浏览器中打开SVG图像。 因此，嵌入一个带有< iframe> 的SVG文档就像我们在 Multimedia_and_embedding / Other_embedding_technologies">来自< object> 到< iframe> - 其他嵌入技术。

以下是一个简短的评论:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png"  />
</iframe>

这绝对不是最好的选择方法:

Cons

• iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
• Moreover, unless the SVG and your current webpage have the same origin, you cannot use JavaScript on your main webpage to manipulate the SVG.

主动学习:使用SVG

在这个主动的学习部分，我们希望你简单地去玩一些SVG的乐趣。 在下面的输入部分中，您会看到我们已经为您提供了一些示例，您可以开始使用。 您还可以转到 SVG元素参考，了解有关其他玩具的更多详情 可以在SVG中使用，并尝试那些。 这部分是关于练习你的研究技能，并有一些乐趣。

如果您遇到问题，但无法使代码正常运行，则可以使用重置按钮重置代码。

<h2>Input</h2>
<textarea id="code" class="input">
<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
  <polygon points="120,0 240,225 0,225" fill="green"/>
  <text x="50" y="100" font-family="Verdana" font-size="55"
        fill="white" stroke="black" stroke-width="2">
    Hello!
  </text>
</svg></textarea>
<h2>Output</h2>
<div class="output">
</div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

.output {
  height: 14em;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

概要

本文为您提供了一个快速浏览什么矢量图形和SVG，为什么他们有用知道，以及如何将SVG包含在您的网页。 它从来没有打算成为一个完整的指南，学习SVG，只是一个指针，所以你知道什么SVG是，如果你遇到它在你的旅行在网络上。 所以不要担心，如果你不觉得你是一个SVG专家。 我们在下面包括一些链接，如果你想去了解更多关于它的工作原理可能会帮助你。

在本单元的最后一篇文章中，我们将详细探讨响应式图片，查看HTML的工具，以使您的图片在不同的设备上更好地工作。

也可以看看

• SVG tutorial on MDN
• Quick tips for responsive SVGs
• Sara Soueidan's tutorial on responsive SVG images
• Accessibility benefits of SVG
• How to scale SVGs (it's not as simple as raster graphics!)