[SVG] 可伸縮矢量圖形 (Scalable Vector Graphics)

時間 2019-12-11

標籤 svg 可伸縮矢量圖形 scalable vector graphics 欄目 Scala 简体版

原文原文鏈接

用來定義用於網絡的基於矢量的圖形，使用 XML 格式定義圖形
2003 年一月，SVG 1.1 被確立爲 W3C 標準
SVG 文件必須使用 .svg 後綴來保存

參考： html

https://www.jianshu.com/p/2ea0ec6800d7網絡

http://www.ruanyifeng.com/blog/2018/08/svg.htmlsvg

1. 特色：工具

SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失;spa

SVG 可被很是多的工具讀取和修改（好比記事本）code

尺寸更小，可伸縮，且可壓縮性更強xml

可在圖像質量不降低的狀況下被放大htm

SVG 圖像可在任何的分辨率下被高質量地打印blog

圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）ci

SVG 能夠與 Java 技術一塊兒運行

SVG 是開放的標準

SVG 文件是純粹的 XML

2. 實例

html 中使用：

<html>
    <body>
 
    <h1>My first SVG</h1>
 
    <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>
 
    </body>
</html>

<svg> 標籤表明畫布

的 width 和 height 屬性

指定了 SVG 圖像在 HTML 元素中所佔據的寬度和高度
若是不指定這兩個屬性，SVG 圖像默認大小是300像素（寬） x 150像素（高）

的 viewBox 屬性

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

舉個例子：

<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

SVG 圖像是 100px寬 100px高，
viewBox 屬性指定視口從(50, 50)這個點開始。因此，實際看到的是右下角的四分之一圓
注意，視口必須適配所在的空間。上面代碼中，視口的大小是 50 x 50，
因爲 SVG 圖像的大小是 100 x 100，因此視口會放大去適配 SVG 圖像的大小，即放大了四倍

若是不指定 width 屬性和 height 屬性，只指定 viewBox 屬性，

則至關於只給定 SVG 圖像的長寬比。這時，SVG 圖像的默認大小將等於所在的 HTML 元素的大小

<circle> 標籤表明圓形

<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

的 cx、cy、r 屬性分別爲橫座標、縱座標和半徑，單位爲像素。

座標都是相對於 <svg> 畫布的左上角原點

class 屬性用來指定對應的 CSS 類

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/> 
</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 命名空間
< circle > 用來建立一個圓
cx 和 cy 屬性定義圓中心的 x 和 y 座標。
若是忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)
r 屬性定義圓的半徑
stroke 顯示形狀的線條顏色
stroke-width 顯示形狀的線條寬度
fill 屬性設置形狀內的顏色

3. 把 SVG 文件嵌入 HTML 頁面

<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>

相關標籤/搜索

每日一句

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