SVG圖像

時間 2019-11-18

標籤 svg 圖像简体版

原文原文鏈接

申明：閒暇學習阮一峯大佬的博客(http://www.ruanyifeng.com/blog/2018/08/svg.html)，因此想作簡單的總結，方便之後查看。css

SVG 是一種基於 XML 語法的圖像格式，全稱是可縮放矢量圖（Scalable Vector Graphics）。其餘圖像格式都是基於像素處理的，SVG 則是屬於對圖像的形狀描述，因此它本質上是文本文件，體積較小，且無論放大多少倍都不會失真。html

關於DOM：HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。瀏覽器

換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。app

SVG 文件能夠直接插入網頁，成爲 DOM 的一部分，而後用 JavaScript 和 CSS 進行操做。框架

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>

SVG 代碼也能夠寫在一個獨立文件中，而後用<img>、<object>、<embed>、<iframe>等標籤插入網頁svg

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

img標籤：學習

img 元素向網頁中嵌入一幅圖像。網站

請注意，從技術上講，<img> 標籤並不會在網頁中插入圖像，而是從網頁上連接圖像。<img> 標籤建立的是被引用圖像的佔位空間。編碼

<img> 標籤有兩個必需的屬性：src 屬性和 alt 屬性。url

<img> 標籤的 src 屬性是必需的。它的值是圖像文件的 URL，也就是引用該圖像的文件的的絕對路徑或相對路徑

alt 屬性是一個必需的屬性，它規定在圖像沒法顯示時的替代文本。

假設因爲下列緣由用戶沒法查看圖像，alt 屬性能夠爲圖像提供替代的信息：

網速太慢
src 屬性中的錯誤
瀏覽器禁用圖像
用戶使用的是屏幕閱讀器

<img> 標籤的 alt 屬性指定了替代文本，用於在圖像沒法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。

object標籤

定義一個嵌入的對象。請使用此元素向您的 XHTML 頁面添加多媒體。此元素容許您規定插入 HTML 文檔中的對象的數據和參數，以及可用來顯示和操做數據的代碼。

object 的初衷是取代 img 和 applet 元素。不過因爲漏洞以及缺少瀏覽器支持，這一點並未實現。

不要對圖像使用 <object> 標籤，請使用 <img> 標籤代替。

embed標籤：

iframe標籤：

iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）。

CSS 也可使用 SVG 文件。

.logo {
  background: url(icon.svg);
}

在CSS中把.svg文件做爲一個background-image導入。http://vanseodesign.com/css/background-properties/

SVG 文件還能夠轉爲 BASE64 編碼，而後做爲 Data URI 寫入網頁

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

https://blog.csdn.net/bovzou/article/details/78865547

SVG in HTML

SVG 代碼都放在頂層標籤<svg>之中

若是隻想展現 SVG 圖像的一部分，就要指定viewBox屬性。

<circle>標籤的cx、cy、r屬性分別爲橫座標、縱座標和半徑，單位爲像素。座標都是相對於<svg>畫布的左上角原點。

<rect>的x屬性和y屬性，指定了矩形左上角端點的橫座標和縱座標；width屬性和height屬性指定了矩形的寬度和高度（單位像素）。

<ellipse>的cx屬性和cy屬性，指定了橢圓中心的橫座標和縱座標（單位像素）；rx屬性和ry屬性，指定了橢圓橫向軸和縱向軸的半徑（單位像素）

SVG深刻學習網站

http://www.w3school.com.cn/svg/svg_inhtml.asp

相關標籤/搜索

每日一句

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