隨手記錄

SVG是什麼意思？SVG是什麼的縮寫？

這一天正在查詢PowerPoint圖示如何增加，Google了幾個網頁後，並還沒有得到答案。但中途有一些網頁好像可以將圖示存成「PNG」、「SVG」檔案。PNG檔在使用「小畫家3D」就已經知道知道它是一種圖形檔案格式。(圖形檔案|圖像檔案 - BMP | JPG | GIF | PNG | TIFF - 有何不同？🔍)。而「SVG」則是第一次聽到，所以著手對SVG做一些基本的了解。

⬛  SVG

⚫  縮寫： Scalable Vector Graphics

⚫  中文：可縮放向量圖形

⚫ 描述：SVG 

1. SVG是一種圖形格式。
2. SVG是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
3. SVG特色是不被限制於某種解析度。
4. SVG 以向量圖形組成，而不是像素。
5. SVG格式是XML的一種，SVG檔案其實只是普通的文字檔案，用一般的文字編輯器便可檢視或修改。

⚫ 優點：SVG 

1. 不失真：SVG可以延展到任何大小而不失真。任意尺寸，不會馬賽克。
2. 檔案小：檔案比 PNG 、 JPG 的檔案還小。
3. 較友善：友善網頁呈現，因為 html 具有 svg 的 tag。
4. 易編輯：可以很方便的編輯圖片，甚至可以嵌入 JavaScript。圖檔可讀。

⚫ 應用：SVG 

SVG 最常見的應用就是做 Logo，因為 Logo 常常需要適應瀏覽器的不同大小，使用 SVG 可以防止 Logo 模糊

⚫ 範例：

如果使用文書編輯軟體，可以很清楚看出SVG檔是一種文字的格式。即XML的一個格式。

<!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" 
    width="467" height="462">
  <!-- This is the red square: -->
  <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
         stroke="black" stroke-width="2px" />
  <!-- This is the blue square: -->
  <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
         stroke="black" stroke-width="2px" fill-opacity="0.7" />
<rect x="180" y="160" width="250" height="250" rx="40" fill="blue"
         stroke="green" stroke-width="2px" fill-opacity="0.7" />
</svg>