HTML入門11

標籤：html   頁面   縮放   流行   nta   映像   簡單的   set   height   

　　在網頁中添加向量圖形，

　　使用向量圖形在很多情況下，效果較好，擁有較小的檔案尺寸，高度縮放，下面具體講解如何在網頁中添加向量圖形

　　位元影像和向量圖

　　位元影像檔案包含了每個像素的位置和色多媒體訊息息，流行的位元影像格式包括Bitmap(.bmp)，PNG(.png)，JPEG（.jpg）和GIF(.gif) 

　　向量圖使用演算法來定義，一個向量圖包含了圖形和路徑的定義，電腦可以根據這些定義計算出他們在螢幕上時呈現的樣自，SVG用於創造精彩的web向量圖形。向量圖相對於同樣的位元影像有更小的體積，因為僅需儲存少量的演算法，而不是逐個儲存每個像素的資訊。

　　SVG的定義

SVG用於描述向量圖形的XML語言，基本上時像HTML一樣的標記，用於圖形，有一些簡單元素來出建立簡單圖形。<circle><rect><feColorMatrix>(變換矩陣轉換顏色) <animate>向量圖形的動畫部分，<mask>在映像頂部應用蒙版。下面展示i一個簡單的例子：

<svg version="1.1" baseProfile="full" width="300" height="2000" xmlns="http://www.w3.org/2000.svg">

　　<rect width="100%" height="100%" fill="back"  />

　　<circle  cx="150" cy="100" r="90"  fill="blue" />

</svg>　可以使用illustrator來建立各種插圖，

SVG其他優點，向量圖形中的文本仍然可訪問利於SEO，可以很好的適應樣式/指令碼。缺點 ，SVG非常容易變得複雜，檔案大小會增加也會佔用瀏覽器很長的處理時間。

SVG可能比柵格映像更難建立，取決於建立那種映像，SVG從IE9開始支援，因此點陣圖形跟適合照片那樣複雜精密的映像。

　　將SVG添加到頁面，使用img捷徑，用src屬性引用SVG。樣本如下：

<img     src="equilateral.svg"     alt="triangle with all three sides equal"    height="87px"    width="100px" />

優點，快速，熟悉的映像文法，alt屬性提供的內建文本等效，可以通過a元素嵌套img使映像成為超連結。  缺點，無法使用js實現操作映像，如果要操作樣式必須內聯CSS樣式，外部樣式不起作用，也不能用CSS偽類來重設映像樣式（：focus）

　　相容性，對於不支援SVG IE8及更低版本，Android2.3及更低版本的瀏覽器，可以從src屬性引用png或jpg，並使用srcset屬性，只有最近的瀏覽器才能識別來引用SVG，這樣支援SVG的瀏覽器將使用SVG，較舊的瀏覽器將載入PNG, 同樣也可以通過CSS來講SVG設定成背景映像，

background：url("fallback.png") np-repeat cener;

background-image:url("image.svg");

background-size:contain;

同樣這種方式引入的SVG無法被js操作，樣式設定也有了限制，限於內聯樣式。

引用SVG時，確保內聯SVG即在標籤內，優點，SVG內聯減少HTTP請求，減少載入時間。

使用id或class選定SVG元素，添加央視規則。內聯SVG唯一可以讓CSS與其互動，CSS動畫的方法，同樣也可以包裹在a元素裡，成為超連結。

缺點：多次使用導致資源密集難以維護，  SVG增加HTML檔案大小，  瀏覽器不能像緩衝普通圖片一樣緩衝內聯SVG，  在<foreignObject>元素中 包含回退，支援SVG的瀏覽器讓然會下載後備映像。

　　使用iframe嵌入SVG 像在網頁中開啟網頁一樣，開啟SVG映像，

<iframe src="triangle.svg" width="500" height="500" sandbox>    <img src="triangle.png" alt="Triangle with three unequal sides" /></iframe>

來分析下這種情況的優缺點，iframe有回退機制，如果瀏覽器不支援iframe，則只會顯示回退，此外，除非SVG和您的當前網頁有相同的origin,否則不能在首頁面上使用js操作SVG.

 

HTML入門11