SVG的用法

時間  2019-11-17
標籤 svg 用法 简体版
原文   原文鏈接

轉載於   http://www.webhek.com/post/svg.html

《如何畫出一條會動的線》這篇文章專門介紹了上面這SVG動畫是如何簡單的實現的。php

SVG是一種矢量圖格式。SVG是Scalable Vector Graphics三個單詞的首字母縮寫。Adobe Illustrator是專門編輯、製做矢量圖的軟件工具。SVG是Adobe Illustrator的主要製做目標。你能夠在輕鬆的網頁上使用漂亮的SVG圖，但SVG有不少的用法你可能還不知道。css

觀看演示

SVG有什麼優點？

  • 文件體積小，可以被大量的壓縮
  • 圖片可無限放大而不失真(矢量圖的基本特徵)
  • 在視網膜顯示屏上效果極佳
  • 可以實現互動和濾鏡效果

SVG的製做方法

用Adobe Illustrator設計製做。下面是一張新西蘭鷸鴕鳥的圖片。html

svg kiwi

注意圖片多餘部分沿邊緣被裁掉了。SVG圖像的處理方式與PNG和JPG是同樣的。html5

Adobe Illustrator能直接把文件保存成SVG格式。git

save-as-svg

當保存的時候，會彈出一個對話框顯示保存選項。我對Adobe Illustrator的技術細節並不很瞭解。SVG Profiles裏有完整的SVG的規範說明。我發現選擇SVG 1.1不會有任何問題。github

svg-options

有趣的是，你能夠選擇點擊OK保存文件，還能夠選擇「SVG Code...」，這時它會用文本編輯器打開它。web

svg-code

兩種方式都頗有用。shell

SVG圖片的用法

若是你把SVG保存成文件，你能夠直接把它放到<img>標記裏。瀏覽器

<img src="kiwi.svg" alt="新西蘭鷸鴕鳥">

在Illustrator裏，它的大小是612px502px。緩存

artboard

這個頁面上只能放這麼大的圖片。固然，你能夠向PNG和JPG圖片那樣改變它的大小。下面是一個例子（三個大小不一樣的SVG圖）：

kiwi

kiwi

kiwi

瀏覽器支持狀況

各類瀏覽器對這種用法的支持狀況不一樣。當總的來講，除了IE8/6，基本上都支持。

若是你想要在全部瀏覽器中都支持SVG圖片，你能夠用Modernizr測試瀏覽器的支持狀況，必要時以普通圖片代替：

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

David Bushell有一個更巧妙的方法，但須要使用JavaScript：

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

你也可使用SVGeezy，它是一個JavaScript插件。

SVG背景圖的用法

跟SVG圖片用法類似，你也能夠在背景圖(background-image)中使用SVG。

<a href="/" class="logo"> 新西蘭鷸鴕鳥 </a>
.logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }

注意，咱們將background-size的大小設置的跟logo元素的大小一致。咱們必須這樣作，不然背景圖會超出logo元素而隱藏一部分。background-size的長寬比例要和原圖一致。但你可使用background-size的常量值contain或cover來達到不一樣的效果。

瀏覽器支持狀況

各類瀏覽器對以SVG爲背景圖(background-image)的支持狀況能夠在這裏看到。但基原本說和SVG圖片同樣。惟一不支持的瀏覽器是IE6/8。

Modernizr在這裏也能起到做用，並且更高效。若是瀏覽器不支持SVG背景圖時，SVG文件將不會被加載，由於Modernizr在檢測到不支持SVG時，在HTML上加了"no-svg"CSS類，因而咱們能夠這樣利用它：

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

另一個更巧妙的方法是使用多背景圖技術。由於各瀏覽器對SVG和對多背景圖技術的支持狀況很類似，若是支持多背景圖，也會支持SVG，因此，咱們的CSS聲明能夠這樣寫：

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

"inline" SVG的用法

你實際上能夠把SVG代碼從SVG文件裏拷貝出來，直接粘貼掉HTML裏使用，它們跟你直接使用普通圖片的效果同樣。

<body>

   <!-- 把SVG代碼粘貼到這裏，圖片會顯示出來！  -->

</body>

這樣作的好處是圖片數據就在HTML頁面裏，不須要瀏覽器單獨執行一次請求下載它。換句話說，它跟使用Data URI的優點同樣。但很差的地方也是同樣。好比「臃腫」的頁面代碼，緩存問題等。

若是你使用後臺語言，例如PHP，能夠用include函數讓頁面更整潔：

<?php include("kiwi.svg"); ?>

優化SVG

你應該不會吃驚：用Adobe Illustrator保存的SVG文件並非優化過的。裏面有DOCTYPE、生成工具署名等無用的信息。SVG文件自己很小，但誰會嫌棄更小？Peter Collingridge有一個在線的SVG優化工具。傳上去大的，下載出小的。

若是你有強迫症，你還能夠試試這個Node JS工具。

用CSS控制SVG

你有沒有感受SVG代碼跟HTML代碼很類似？這是由於它們本質上都是XML。在咱們的這個SVG文件中有兩個元素，一個 <ellipse> 和一個 <path>。咱們能夠直接在SVG代碼添加CSS類信息，就像跟編寫HTML代碼同樣。

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

如今，頁面中的CSS樣式對SVG裏的元素一樣有效。你不須要在SVG代碼直接嵌入CSS代碼，放在頁面任何一個地方均可以，甚至能夠放到單獨的CSS文件裏，使用<link>標記加載到頁面上。你甚至能夠對SVG元素使用:hover語法。但請注意，有個別的CSS屬性對SVG是不起做用的。例如，background-color對SVG就是無效的，由於SVG裏使用fill屬性。

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

更絕妙的是，SVG裏能夠實現全部的濾鏡效果。例如模糊處理。咱們來試一下：

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

如今你能夠對它運用任何的CSS樣式：

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

這裏是一個svg濾鏡效果的在線演示：

瀏覽器支持狀況

各類瀏覽器對以SVG爲背景圖(background-image)的支持狀況能夠在這裏看到。但基原本說和SVG圖片同樣。惟一不支持的瀏覽器是IE6/8。

一種對不支持inline SVG的瀏覽器的補救方法：

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

仍然使用Modernizr：

.fallback { display: none; /* 確保尺寸是同樣大小 */ } .no-svg .fallback { background-image: url(logo.png); }

SVG對象(object)的用法

若是「inline」 SVG不合你的胃口(它有本身的弊端，如緩存問題)，你可使用HTML的<object>標記引用它，這樣仍能在瀏覽器不支持的狀況下用CSS進行彌補。

<object type="image/svg+xml" data="kiwi.svg" class="logo"> 新西蘭鷸鴕鳥 <!-- 圖片備份支持 --> </object>

使用Modernizr檢測瀏覽器的支持狀況，用CSS進行挽救：

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

這種方法可以很好的利用瀏覽器的緩存。可是，若是你想讓CSS樣式也起做用，你不能把這些樣式放在外部的CSS樣式文件裏或防止在頁面中的<style>標記內，你須要把<style>信息放在SVG文件內部。

<svg ...> <style> /* 把你的CSS放到SVG文件內部 */ </style> ... </svg>

<object> SVG的外部樣式的用法

對於SVG，有一種方法能夠聲明外部樣式文件，這能夠很好的利用瀏覽器緩存。但通過個人測試，目前這隻在<object>嵌入式<object>SVG文件有效。你須要把樣式地址寫在SVG文件起始位置的<svg>標記上。

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

若是你把這放到HTML代碼來，那頁面將會瞎掉，什麼都不會顯示。

SVG Data URI的用法

一種能把SVG壓縮的更小的方法是將它轉變成Data URI形式。Mobilefish有一個在線轉換工具能作到這些。你只須要簡單的將SVG文件的內容粘貼到它的頁面的表單裏，就能獲得轉換成base64編碼的Data URI數據。但記住把換行符給刪掉。這些數據看起來像是密碼：

base64-data

你能夠把它用在任何的SVG的用法中(除了<svg>)，下面是幾個例子：

以SVG爲 <img>

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

SVG用在CSS裏

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

以SVG爲 <object>

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

並且，若是你的SVG在轉換成base64編碼前裏面有嵌入的<style>信息，若是你把它當成<object>用，樣式仍然有效。

命令行式的SVG轉換base64編碼工具：

@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

— Benny Schudel (@bennyschudel) March 2, 2013

或者，你也能夠按照Mathias Bynens說的：

Use openssl base64 < path/to/file.png | tr -d '\n' | pbcopy or cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy to skip writing to a file and just copy the base64-encoded output to the clipboard without the line breaks.

觀看演示

自動生成工具

  • grunticon:

    grunticon能把你指定目錄下面的SVG/PNG文件(小圖標)輸出成3中格式的CSS: svg data urls, png data urls, 和一個對於不兼容瀏覽器的CSS處理文件。

  • iconizr:

    這是一個PHP命令工具，能夠把SVG圖片轉換成CSS圖標(SVG & PNG, single icons and / or CSS sprites)，並且對圖片進行了優化，並且能輸出Sass格式。

(英文：Using SVG.)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程