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

>

當(dāng)您放大頁面時，PNG圖像變得像素化，因為它包含每個像素應(yīng)該在哪里(和什么顏色)的信息 - 當(dāng)縮放時，每個像素只是增加大小填充 多個像素在屏幕上，所以圖像開始看起來塊狀。 然而，矢量圖像繼續(xù)看起來漂亮和清晰，因為無論它是什么大小，算法都用于計算圖像中的形狀，值隨著它變大而被縮放。

此外，矢量圖像文件比它們的光柵等效物輕得多，因為它們僅需要保持少量算法，而不是單獨地對圖像中的每個像素的信息。

什么是SVG？

此外，矢量圖像文件比它們的光柵等效物輕得多，因為它們僅需要保持少量算法，而不是單獨地對圖像中的每個像素的信息。

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

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

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

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

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

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

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

快速方法: code>< img>

要通過 > < img> 元素，您只需要按照預(yù)期在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沒有顯示，可能是因為您的服務(wù)器未正確設(shè)置。 如果出現(xiàn)這種情況，則此文章將指向正確的方向 。

如何在HTML中包含SVG代碼

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

<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頁面嵌入到當(dāng)前頁面中在HTML 4.01中，文檔可以包含頭部和主體或頭部和框架集，但不能同時包含主體和框架集，但是可以使用iframe 每個瀏覽上下文都有自己的會話歷史和活動文檔，包含嵌入內(nèi)容的瀏覽上下文稱為父瀏覽上下文。頂級瀏覽上下文(沒有父級)通常是瀏覽器窗口。 "> < iframe>

您可以像瀏覽器一樣在瀏覽器中打開SVG圖像。 因此，嵌入一個帶有< iframe> 的SVG文檔就像我們在 Multimedia_and_embedding / Other_embedding_technologies">來自< object> 到< iframe> - 其他嵌入技術(shù)。

以下是一個簡短的評論:

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

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

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

如果您遇到問題，但無法使代碼正常運行，則可以使用重置按鈕重置代碼。

<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包含在您的網(wǎng)頁。 它從來沒有打算成為一個完整的指南，學(xué)習(xí)SVG，只是一個指針，所以你知道什么SVG是，如果你遇到它在你的旅行在網(wǎng)絡(luò)上。 所以不要擔(dān)心，如果你不覺得你是一個SVG專家。 我們在下面包括一些鏈接，如果你想去了解更多關(guān)于它的工作原理可能會幫助你。

在本單元的最后一篇文章中，我們將詳細(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!)