SVG

時間 2019-12-06

標籤 svg 简体版

原文原文鏈接

（一）SVG 簡介

一.SVG是什麼:html

SVG是英文「Scalable Vector Graphics」的簡稱，若是翻譯成中文就是「可縮放矢量圖形」。
它是基於可擴展標記語言（XML）（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。
它由萬維網聯盟制定，是一個開放標準。
二.SVG主要特色:
（1）.SVG是指可伸縮矢量圖形。
（2）.SVG用來定義用於網絡的基於矢量的圖形。
（3）.SVG使用XML格式定義圖形。
（4）.SVG圖像在放大或縮小（改變尺寸）的狀況下，其圖形質量不會受受損失。
（5）.SVG是W3C的一個標準。
三.SVG主要優點:
（1）.SVG可被很是多的工具讀取和修改（好比記事本）。
（2）.SVG與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強。
（3）.SVG是可伸縮的。
（4）.SVG圖像可在任何的分辨率下被高質量地打印。
（5）.SVG可在圖像質量不降低的狀況下被放大。
（6）.SVG圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）。
（7）.SVG能夠與Java技術一塊兒運行。
（8）.SVG是開放的標準。

（9）.SVG文件是純粹的XML。web

查看 SVG 文件瀏覽器

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。網絡

IE8和早期版本都須要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。編輯器

建立SVG文件svg

因爲SVG是XML文件，SVG圖像能夠用任何文本編輯器建立，但它每每是與一個繪圖程序一塊兒使用，如Inkscape，更方便地建立SVG圖像。工具

簡單的 SVG 實例url

這裏是SVG文件（SVG文件的保存與SVG擴展）：spa

實例： <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>

SVG 代碼解析：插件

第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是不是"獨立的"，或含有對外部文件的引用。

standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。

第二和第三行引用了這個外部的 SVG DTD。該 DTD 位於 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。該 DTD 位於 W3C，含有全部容許的 SVG 元素。

SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

SVG 的 <circle> 用來建立一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 座標。若是忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)。r 屬性定義圓的半徑。

stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。咱們把圓的輪廓設置爲 2px 寬，黑邊框。

fill 屬性設置形狀內的顏色。咱們把填充顏色設置爲紅色。

關閉標籤的做用是關閉 SVG 元素和文檔自己。

註釋：全部的開啓標籤必須有關閉標籤！

嵌入HTML的SVG:

SVG不但能夠單獨造成一個文件，也能夠直接嵌入到HTML代碼之中。

 
 
 
 
 
  
  
  
  
  代碼實例以下：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
          cx="100" cy="50"
          r="40"
          stroke="black"
          stroke-width="5"
          fill="green" />
</svg>
</body>
</html>

SVG如何在web中使用:

一.直接嵌入到HTML中;

二.使用<embed>標籤:
可使用此標籤將SVG文件引入到當前頁面。

代碼以下:

<embedsrc="circle.svg"type="image/svg+xml"/>

三.經過object標籤引入:
可使用object標籤引入外部svg文件到當前頁面。

代碼實例以下:

<object data="circle.svg" type="image/svg+xml"></object>

四.做爲背景圖片引入:

能夠做爲元素的背景引入，代碼實例以下:

div {
  background: url("circle.svg") no-repeat center;
  background-size : 100px 100px;
}

五.經過iframe引入:

經過iframe也能夠引入svg，代碼以下:

<iframesrc="circle.svg"></iframe>

六.經過<img>標籤引入:

經過此標籤也能夠引入svg文件，就等同於一個圖片，代碼以下:

<img src="circle.svg"/>

七.連接到svg文件:

能夠直接經過超連接訪問svg文件，代碼以下:

< a href = "circle1.svg" >螞蟻部落</ a >

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。