svg入門詳解(理論篇)

cc.jpg

一、svg是什么?

SVG 意為可縮放矢量圖形(Scalable Vector Graphics)。
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失。
SVG 是萬維網聯盟的標準。

二、svg的優勢

與其他圖像格式相比(比如 JPEG 和 GIF),使用 SVG 的優勢在于:

  • SVG 圖像可通過文本編輯器來創建和修改;
  • SVG 圖像可被搜索、索引、腳本化或壓縮;
  • SVG 是可伸縮的;
  • SVG 圖像可在任何的分辨率下被高質量地打印;
  • SVG 可在圖像質量不下降的情況下被放大;

三、瀏覽器支持情況

image.png

四、使用方式

1、可在瀏覽器直接打開;
2、在HTML中的使用;
SVG 文件可通過以下標簽嵌入 HTML 文檔:<embed>、<object> 、 <iframe>和<img>。
SVG的代碼可以直接嵌入到HTML頁面中,或直接鏈接到SVG文件。
(1)使用 <embed> 標簽

  • 優勢:所有主要瀏覽器都支持,并允許使用腳本
  • 缺點:不推薦在HTML4和XHTML中使用(但在HTML5允許)

示例:

<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />

(2)使用 <object> 標簽

  • 優勢:所有主要瀏覽器都支持,并支持HTML4,XHTML和HTML5標準
  • 缺點:不允許使用腳本。

示例:

<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>

(3)使用 <iframe> 標簽

  • 優勢:所有主要瀏覽器都支持,并允許使用腳本
  • 缺點:不推薦在HTML4和XHTML中使用(但在HTML5允許)

示例:

<iframe width="300px" height="300px" src="img/demo.svg"></iframe>

(4)直接在HTML嵌入SVG代碼

示例:

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/> 
</svg>

(5)使用<img>標簽

示例:

<img src="img/demo.svg" width="300px" height="300px"/>

(6)鏈接到svg文件

示例:

<a href="img/demo.svg">查看svg</a>

3、在css中使用

示例:

.container{
  background: white url(img/demo.svg) repeat;
}

參考:svg教程

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1. 瀏覽器頁面有哪三層構成,分別是什么,作用是什么? 構成:結構層、表示層、行為層分別是:HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,892評論 1 11
  • 源自SeeYouBug博客 地址為:http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲淚成雪閱讀 1,256評論 0 15
  • 一:什么是SVG? 對于SVG的定義如下: ①:SVG 指的是可伸縮矢量圖形 (Scalable Vector G...
    GreenHand1閱讀 823評論 0 1
  • 問答題1 /72瀏覽器頁面有哪三層構成,分別是什么,作用是什么?參考答案構成:結構層、表示層、行為層分別是:HTM...
    _Yfling閱讀 1,227評論 0 23
  • 最近,給三歲半的寶寶報了個英語培訓班。總覺得這個年紀學英語未免小了些,可是在左右鄰居家甚至更小的寶寶們都如此的風氣...
    julie豬閱讀 437評論 0 0