Adding vector graphics to the Web

什么是矢量圖形？

在網(wǎng)絡(luò)上，您將使用兩種類型的圖像 - 光柵圖像和矢量圖像:

• 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.

為了讓你了解兩者之間的區(qū)別，讓我們看一個(gè)例子。 你可以在我們的Github庫(kù)中找到這個(gè)例子 vector-versus-raster.html"class ="external"> vector-versus-raster.html - 它顯示了兩個(gè)看似相同的圖像并排，一個(gè)紅色的星形，黑色的陰影。 區(qū)別在于左邊的是PNG，右邊的是SVG圖像。

>

當(dāng)您放大頁(yè)面時(shí)，PNG圖像變得像素化，因?yàn)樗總€(gè)像素應(yīng)該在哪里(和什么顏色)的信息 - 當(dāng)縮放時(shí)，每個(gè)像素只是增加大小填充 多個(gè)像素在屏幕上，所以圖像開始看起來(lái)塊狀。 然而，矢量圖像繼續(xù)看起來(lái)漂亮和清晰，因?yàn)闊o(wú)論它是什么大小，算法都用于計(jì)算圖像中的形狀，值隨著它變大而被縮放。

此外，矢量圖像文件比它們的光柵等效物輕得多，因?yàn)樗鼈儍H需要保持少量算法，而不是單獨(dú)地對(duì)圖像中的每個(gè)像素的信息。

什么是SVG？

此外，矢量圖像文件比它們的光柵等效物輕得多，因?yàn)樗鼈儍H需要保持少量算法，而不是單獨(dú)地對(duì)圖像中的每個(gè)像素的信息。

作為一個(gè)簡(jiǎn)單的例子，下面的代碼創(chuàng)建一個(gè)圓和一個(gè)矩形:

<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>

這將創(chuàng)建以下輸出:

從上面的例子，你可能得到的印象是SVG是容易handcode。 是的，你可以在文本編輯器中編寫簡(jiǎn)單的SVG，但對(duì)于復(fù)雜的圖像，這很快開始變得非常困難。 對(duì)于創(chuàng)建SVG圖片，大多數(shù)人使用矢量圖形編輯器，如 Inkscape 或 en.wikipedia.org/wiki/Adobe_Illustrator"class ="external"> Illustrator 。 這些包允許您使用各種圖形工具創(chuàng)建各種插圖，并創(chuàng)建照片的近似值(例如Inkscape的跟蹤位圖功能)。

除了迄今為止描述的SVG之外，SVG還有一些額外的優(yōu)點(diǎn):

• 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.

那么為什么會(huì)有人想要使用SVG上的光柵圖形？ 好吧，SVG確實(shí)有一些缺點(diǎn):

• 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.)

由于上述原因，光柵圖形可以更好地用于復(fù)雜的精確圖像，例如照片。

將SVG添加到您的網(wǎng)頁(yè)

在本節(jié)中，我們將介紹通過(guò)不同的方式向Web頁(yè)面添加SVG矢量圖形。

快速方法: code>< img>

要通過(guò) > < img> 元素，您只需要按照預(yù)期在src屬性中引用它。 您需要一個(gè) height 或 width 屬性(如果您的SVG沒(méi)有固有的寬高比)。 如果您尚未這樣做，請(qǐng)參閱 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 屬性(只有最近的瀏覽器才能識(shí)別)才能引用 SVG。 在這種情況下，只支持瀏覽器會(huì)加載SVG - 舊的瀏覽器將加載PNG:

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

您還可以使用SVG作為CSS背景圖像，如下所示。 在下面的代碼中，舊的瀏覽器會(huì)堅(jiān)持他們理解的PNG，而較新的瀏覽器會(huì)加載SVG:

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

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

如果您的SVG沒(méi)有顯示，可能是因?yàn)槟姆?wù)器未正確設(shè)置。 如果出現(xiàn)這種情況，則此文章將指向正確的方向 。

如何在HTML中包含SVG代碼

您還可以在文本編輯器中打開SVG文件，復(fù)制SVG代碼，然后將其粘貼到HTML文檔中 - 有時(shí)稱為將 SVG內(nèi)嵌或內(nèi)聯(lián)SVG 強(qiáng)>。 請(qǐng)確保您的SVG代碼段的開頭和結(jié)尾是 < svg>< / svg> 標(biāo)簽(不包括這些標(biāo)簽之外的任何內(nèi)容)。下面是一個(gè)非常簡(jiǎn)單的示例，您可以將其粘貼到文檔中:

<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.

如何使用 瀏覽上下文，有效地將另一個(gè)HTML頁(yè)面嵌入到當(dāng)前頁(yè)面中在HTML 4.01中，文檔可以包含頭部和主體或頭部和框架集，但不能同時(shí)包含主體和框架集，但是可以使用iframe 每個(gè)瀏覽上下文都有自己的會(huì)話歷史和活動(dòng)文檔，包含嵌入內(nèi)容的瀏覽上下文稱為父瀏覽上下文。頂級(jí)瀏覽上下文(沒(méi)有父級(jí))通常是瀏覽器窗口。 "> < iframe>

您可以像瀏覽器一樣在瀏覽器中打開SVG圖像。 因此，嵌入一個(gè)帶有< iframe> 的SVG文檔就像我們?cè)?a rel="external nofollow" target="_blank" > Multimedia_and_embedding / Other_embedding_technologies">來(lái)自< object> 到< iframe> - 其他嵌入技術(shù)。

以下是一個(gè)簡(jiǎn)短的評(píng)論:

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

這絕對(duì)不是最好的選擇方法:

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.

主動(dòng)學(xué)習(xí):使用SVG

在這個(gè)主動(dòng)的學(xué)習(xí)部分，我們希望你簡(jiǎn)單地去玩一些SVG的樂(lè)趣。 在下面的輸入部分中，您會(huì)看到我們已經(jīng)為您提供了一些示例，您可以開始使用。 您還可以轉(zhuǎn)到 SVG元素參考，了解有關(guān)其他玩具的更多詳情 可以在SVG中使用，并嘗試那些。 這部分是關(guān)于練習(xí)你的研究技能，并有一些樂(lè)趣。

如果您遇到問(wèn)題，但無(wú)法使代碼正常運(yùn)行，則可以使用重置按鈕重置代碼。

<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);

概要

本文為您提供了一個(gè)快速瀏覽什么矢量圖形和SVG，為什么他們有用知道，以及如何將SVG包含在您的網(wǎng)頁(yè)。 它從來(lái)沒(méi)有打算成為一個(gè)完整的指南，學(xué)習(xí)SVG，只是一個(gè)指針，所以你知道什么SVG是，如果你遇到它在你的旅行在網(wǎng)絡(luò)上。 所以不要擔(dān)心，如果你不覺(jué)得你是一個(gè)SVG專家。 我們?cè)谙旅姘ㄒ恍╂溄?，如果你想去了解更多關(guān)于它的工作原理可能會(huì)幫助你。

在本單元的最后一篇文章中，我們將詳細(xì)探討響應(yīng)式圖片，查看HTML的工具，以使您的圖片在不同的設(shè)備上更好地工作。

也可以看看

• 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!)