SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
SVG實例詳解系列（一）
(svg概述、位圖和矢量圖區別（圖解）、SVG應用實例）
目錄
一、什么是SVG?
（1）、位圖和矢量圖概念（圖解）
（2）、SVG的小例子
（a）笑臉符
（b）、小鳥
（c）、人物
（d）、搖擺太陽花
二、SVG概念、知識要點
（1）、SVG概念
（2）、SVG發展史
（3）、SVG基本要素
（4）、SVG渲染順序
（5）、SVG 文件類型
（6）、支持 SVG 的瀏覽器
（7）、SVG嵌入到 HTML 文件中的方法
（8）、SVG支持的顯示對象
（9）、SVG格式優點
（10）、SVG格式缺點
?三、SVG應用實例
?
多年以前，我曾聽到過一個真實發生過的故事：
某日，甲整理ＱＱ好友時發現，有一個陌生的阿姨，是什么時候加的忘了，出于好奇開始了聊天，得知那個阿姨得了重癥，大概還有半年左右的生命。阿姨很樂觀，反而安慰甲不用替她擔心，彼此約好，阿姨在名字里添加數字日期，告訴甲，她還活得好好的。
日子一天天過去，甲忙于工作和學習，沒有再和阿姨聊天，但他養成了一種習慣，就是上線的時候都會看看阿姨的數字日期是否繼續變更。
大半年后，那天甲正好有空，看到阿姨的頭像象以往那樣亮著，就發信息過去打招呼，對方回復得很快，卻不是那位阿姨，是阿姨的兒子，原來阿姨半年前就走了，但走之前叮囑兒子每天一定要上線修改名字上的日期數字，而且如果看到甲在線，一定要等到甲下線后才能下線，原因是阿姨聽甲說過自己很孤單，每次忙到深夜，想找點存在感，卻發現ＱＱ上好友的頭像都是灰色的離線狀態，心里空蕩蕩的。。。阿姨想讓甲知道還有人在，他并不是孤單的一個人。。。
那天后，阿姨的ＱＱ頭像再也沒有亮過。。。
人生有很多無奈，也有很多真相被揭穿后的冰寒刺骨，但不經意間發現和收獲的一點善意總能溫暖人許久。
所以，世間的美好并不是沒有，而是在物欲橫流的社會中漸漸被人所遺忘而變得稀少，但她們依舊是存在的。生活中，總有一些人在自己困難時仍出于好意悄悄為陌生人做著某些力所能及的小事情，（那其中的收益者也會包括你們中的每一位），例如一次開源代碼，例如超市內買菜時同時伸出去卻縮回去的手，例如那一句：我還好。。。不管你知不知道，不管世事如何變遷，在那一刻，你已經擁有過，所以無論你現在所面對的困境有多大，請努力堅持下去，因為還有很多人也在同樣努力中ing。
世間并不缺美好，缺的只是及時發現美好的眼睛和懂得感恩，困境中不抱怨的心。
? 懷緬過去常陶醉， 一半樂事一半令人流淚，想到舊事歡笑面常流淚，夢如人生試問誰能料，石頭他朝成翡翠，夢如人生快樂永記取， 悲苦深刻藏骨髓。。。
逆境清醒
2023.2.26
（https://blog.csdn.net/weixin_69553582）
?
一、什么是SVG?
SVG 是什么呢？
別急，如果你暫時還沒有計算機圖形的一些基礎知識，我們先來了解一下大概，對后面學習有好處。如果你已經會了，那別浪費時間了，每人每天只有24小時，快點擊瀏覽器右上角的“ⅹ“符號，886，歡迎下次有時間再來看我的博客（發現自行使用和轉載我博客博文的網站和個人有點多，我只有一個博客：csdn的，逆境清醒，（https://blog.csdn.net/weixin_69553582）），≧???≦? 嗯~~~，就是這個，一位老。。。老。。。奶奶級別的姐姐寫的原創博客，別走錯門了，跑去看冒名替身的博客喲）。
（1）、位圖和矢量圖概念（圖解）
我們先來了解一下兩個概念：位圖和矢量圖。
位圖：位圖圖像（bitmap），亦稱為點陣圖像或柵格圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構成圖樣。當放大位圖時，可以看見賴以構成整個圖像的無數單個方塊。擴大位圖尺寸的效果是增大單個像素，從而使線條和形狀顯得參差不齊。位圖的特點是可以表現色彩的變化和顏色的細微過渡，產生逼真的效果，缺點是在保存時需要記錄每一個像素的位置和顏色值，占用較大的存儲空間。
矢量圖：就是使用直線和曲線來描述的圖形，構成這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等，它們都是通過數學公式計算獲得的，具有編輯后不失真的特點。矢量圖以其輪廓清晰、色彩明快尤其是可任意縮放并保持圖像視覺質量等特性受到許多設計者的青睞。
矢量圖最明顯的特征：矢量圖的顏色邊緣和線條的邊緣是非常順滑的，無論你是放大或者縮小，顏色的邊緣也是非常順滑，并且非常清楚的。
矢量圖與位圖最大的區別是，它不受分辨率的影響。因此在印刷時，可以任意放大或縮小圖形而不會影響出圖的清晰度，可以按最高分辨率顯示到輸出設備上。
沒明白？那我們簡單用圖片來看看區別：
| 位圖 | 矢量圖 |
上圖是一張位圖和一張矢量圖
這種情況下看不出區別是吧，別急，我們將圖片放大看看：
| 位圖 | 矢量圖 |
怎么樣，看到區別了吧？
什么？還看不出？
那好，我們再放大看看：
| 位圖 | 矢量圖 |
這下看清楚位圖和矢量圖的區別了吧?
哎喲，別光看顏色呀，把注意力放在邊緣上，對，就是綠色葉子和白色底圖的交界處，深綠色描邊的地方，在那個位置處：位圖圖像邊緣有鋸齒，矢量圖圖像邊緣很光滑，不同的原因是因為位圖是由像素點組成的，在指定的分辨率下，位圖圖像的像素點數量有限，不足以細致的構成和描述圖片內容。
什么？還看不清楚區別？。。。。好吧，那我。。。。換這張圖來說明一下：
| 位圖 |
| 局部放大 600% 倍時，圖片顯示如下： |
| 矢量圖 |
| 局部放大 600% 倍時，圖片顯示如下： |
這下全看清楚了是吧？呼~
別扁嘴，我不是專業的老師，只是義務（非收費）分享一下自己學到的知識和資料，難免會。。。
河邊有只羊，
羊邊有只象，
象邊有只馬騮仔，
好似你咁嘅樣
~~
看不懂我在說什么是吧，哈哈~~放心，我沒罵人，只想轉換一下心情，gz本地歌謠而已。
?（2）、SVG的小例子
好了，言歸正傳，我們再來聊一下有關svg的一些東西，了解一下SVG 的概念。
矢量圖和位圖的基本區別剛才已經都看到了（沒看到的自己往上翻看，想讓我再說一遍？不理你，哼~~），
我們來先看一下一些SVG的小例子（附上完整源代碼，你們可以自己復制一下代碼，用記事本保存成：你的文件名.html格式，用瀏覽器打開體驗一下svg）
（a）笑臉符
?
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><title>svg 例子1</title> </head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500"><path d="M117.1 256.1c-25.8 3.7-84 13.7-100.9 30.6-21.9 21.9-21.5 57.9.9 80.3s58.3 22.8 80.3.9C114.3 351 124.3 292.8 128 267c.8-6.4-4.6-11.8-10.9-10.9zm506.7 30.6c-16.9-16.9-75.1-26.9-100.9-30.6-6.3-.9-11.7 4.5-10.8 10.8 3.7 25.8 13.7 84 30.6 100.9 21.9 21.9 57.9 21.5 80.3-.9 22.3-22.3 22.7-58.3.8-80.2zm-126.6 61.7C463.8 412.3 396.9 456 320 456c-76.9 0-143.8-43.7-177.2-107.6-12.5 37.4-25.2 43.9-28.3 46.5C159.1 460.7 234.5 504 320 504s160.9-43.3 205.5-109.1c-3.2-2.7-15.9-9.2-28.3-46.5zM122.7 224.5C137.9 129.2 220.5 56 320 56c99.5 0 182.1 73.2 197.3 168.5 2.1-.2 5.2-2.4 49.5 7C554.4 106 448.7 8 320 8S85.6 106 73.2 231.4c44.5-9.4 47.1-7.2 49.5-6.9zM320 400c51.9 0 115.3-32.9 123.3-80 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 8 47.1 71.4 80 123.3 80zm130.3-168.3c3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.6 6.2 4.6 9.3 3.7zM240 189.4c12.3 0 23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.8 19.2-21.6 31.5-21.6z"></path></svg> </body> </html>（b）、小鳥
?
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><title>svg 例子2</title> </head> <body><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" stroke-width="2" stroke="#68228b" ><path d="M313.2 47.5c1.2-13 21.3-14 36.6-8.7.9.3 26.2 9.7 19 15.2-27.9-7.4-56.4 18.2-55.6-6.5zm-201 6.9c30.7-8.1 62 20 61.1-7.1-1.3-14.2-23.4-15.3-40.2-9.6-1 .3-28.7 10.5-20.9 16.7zM319.4 160c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm-159.7 0c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm318.5 163.2c-9.9 24-40.7 11-63.9-1.2-13.5 69.1-58.1 111.4-126.3 124.2.3.9-2-.1 24 1 33.6 1.4 63.8-3.1 97.4-8-19.8-13.8-11.4-37.1-9.8-38.1 1.4-.9 14.7 1.7 21.6 11.5 8.6-12.5 28.4-14.8 30.2-13.6 1.6 1.1 6.6 20.9-6.9 34.6 4.7-.9 8.2-1.6 9.8-2.1 2.6-.8 17.7 11.3 3.1 13.3-14.3 2.3-22.6 5.1-47.1 10.8-45.9 10.7-85.9 11.8-117.7 12.8l1 11.6c3.8 18.1-23.4 24.3-27.6 6.2.8 17.9-27.1 21.8-28.4-1l-.5 5.3c-.7 18.4-28.4 17.9-28.3-.6-7.5 13.5-28.1 6.8-26.4-8.5l1.2-12.4c-36.7.9-59.7 3.1-61.8 3.1-20.9 0-20.9-31.6 0-31.6 2.4 0 27.7 1.3 63.2 2.8-61.1-15.5-103.7-55-114.9-118.2-25 12.8-57.5 26.8-68.2.8-10.5-25.4 21.5-42.6 66.8-73.4.7-6.6 1.6-13.3 2.7-19.8-14.4-19.6-11.6-36.3-16.1-60.4-16.8 2.4-23.2-9.1-23.6-23.1.3-7.3 2.1-14.9 2.4-15.4 1.1-1.8 10.1-2 12.7-2.6 6-31.7 50.6-33.2 90.9-34.5 19.7-21.8 45.2-41.5 80.9-48.3C203.3 29 215.2 8.5 216.2 8c1.7-.8 21.2 4.3 26.3 23.2 5.2-8.8 18.3-11.4 19.6-10.7 1.1.6 6.4 15-4.9 25.9 40.3 3.5 72.2 24.7 96 50.7 36.1 1.5 71.8 5.9 77.1 34 2.7.6 11.6.8 12.7 2.6.3.5 2.1 8.1 2.4 15.4-.5 13.9-6.8 25.4-23.6 23.1-3.2 17.3-2.7 32.9-8.7 47.7 2.4 11.7 4 23.8 4.8 36.4 37 25.4 70.3 42.5 60.3 66.9zM207.4 159.9c.9-44-37.9-42.2-78.6-40.3-21.7 1-38.9 1.9-45.5 13.9-11.4 20.9 5.9 92.9 23.2 101.2 9.8 4.7 73.4 7.9 86.3-7.1 8.2-9.4 15-49.4 14.6-67.7zm52 58.3c-4.3-12.4-6-30.1-15.3-32.7-2-.5-9-.5-11 0-10 2.8-10.8 22.1-17 37.2 15.4 0 19.3 9.7 23.7 9.7 4.3 0 6.3-11.3 19.6-14.2zm135.7-84.7c-6.6-12.1-24.8-12.9-46.5-13.9-40.2-1.9-78.2-3.8-77.3 40.3-.5 18.3 5 58.3 13.2 67.8 13 14.9 76.6 11.8 86.3 7.1 15.8-7.6 36.5-78.9 24.3-101.3z"></path></svg> </body> </html>（c）、人物
?
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><title>svg 例子3</title> </head> <body><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z"></path></svg> </body> </html>（d）、搖擺太陽花
?svg太陽花（此例子后續文章會有詳細教程）
怎么樣？對svg有初步認識了吧？
剛一開始學習SVG，不完全理解沒關系，不需要完全看懂理解全部概念和代碼，能夠修改增刪部分代碼就可以，隨著時間的推移，反復多練習就能夠熟悉掌握SVG。此系列SVG博文就是依此原理撰寫，一起學習吧。
二、SVG概念、知識要點
（1）、SVG概念
SVG，即：可縮放矢量圖形（Scalable Vector Graphics，SVG）基于 XML 標記語言，用于描述二維的矢量圖形。
SVG 是由萬維網聯盟（W3C）自 1999 年開始開發的開放標準。
作為一個基于文本的開放網絡標準，SVG 能夠優雅而簡潔地渲染不同大小的圖形，并和CSS、DOM、JavaScript 和 SMIL 等其他網絡標準無縫銜接。本質上，SVG 相對于圖像，就好比 HTML 相對于文本。
SVG 圖像及其相關行為被定義于 XML 文本文件之中，這意味著可以對它們進行搜索、索引、編寫腳本以及壓縮。此外，這也意味著可以使用任何文本編輯器和繪圖軟件來創建和編輯它們。
和傳統的點陣圖像模式（如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量圖，這意味著它的圖像能夠被無限放大而不失真或降低質量，并且可以方便地修改內容，無需圖形編輯器。通過使用合適的庫進行配合，SVG 文件甚至可以隨時進行本地化。
（2）、SVG發展史
SVG 誕生于 1999 年，
2001年9月4日，發布SVG 1.0
2003年1月4日，發布SVG 1.1
2003年1月14日，推出SVG移動子版本：SVG Tiny和SVG Basic
2008年12月22日，發布SVG Tiny 1.2
2011年8月16日，發布SVG 1.1（第2版），成為W3C目前推薦的標準
SVG 1.1 第 2 版是 W3C 推薦標準，是完整規范的最新版本。
W3C目前仍正在研究制定SVG 2
SVG 2目前正在開發中，工作組目前正在并行開發一組模塊，它將為SVG添加新的易用性功能，用于擴展以前的規范，以及與HTML，CSS和DOM更緊密地集成，并棄用并非所有瀏覽器都支持的功能，以跨所有設備和平臺工作。
（3）、SVG基本要素
HTML 提供了定義標題、段落、表格等等內容的元素。與此類似，SVG 也提供了一些元素，用于定義圓形、矩形、簡單或復雜的曲線。一個簡單的 SVG 文檔由 <svg> 根元素和基本的形狀元素構成。另外還有一個g元素，它用來把若干個基本形狀編成一個組。
（4）、SVG渲染順序
SVG 文件全局有效的渲染順序規則是“后來居上”，越后面的元素越可見。
（5）、SVG 文件類型
SVG 文件有兩種形式。普通 SVG 文件是包含 SVG 標記的簡單文本文件。一般使用“.svg”（全部小寫）作為此類文件的擴展名。
由于在某些應用（比如地圖應用等）中使用時，SVG 文件可能會很大，SVG支持利用gzip壓縮算法減少文件尺寸，壓縮后的文件通常用被稱為“SVGZ文件”，此時通常使用“.svgz”（全部小寫）作為此類文件擴展名。
注意：如果服務器是微軟的 IIS 服務器，使 gzip 壓縮的 SVG 文件在所有的可用 SVG 的用戶代理上可靠地起作用是相當困難的，而且 Firefox 不能在本地機器上加載 gzip 壓縮的 SVG 文件。除非知道處理發布內容的 Web 服務器可以正確的處理 gzip，否則要盡量避免使用 gzip 壓縮的 SVG。
（6）、支持 SVG 的瀏覽器
各種 SVG 瀏覽器是有差異的，因此很可能出現你制作了一個 SVG 圖形，并且調試正常后，卻在另外一個瀏覽器中無法正常顯示。這是因為不同的瀏覽器支持 SVG 標準的程度不同（如果你將其他技術和 SVG 一起使用（比如JavaScript和CSS），也會出現類似的情況。）
所有的現代瀏覽器都支持 SVG，在某些情況下甚至幾個版本都支持 SVG。
支持 SVG 的瀏覽器列表
?
（7）、SVG嵌入到 HTML 文件中的方法
?HTML5支持直接嵌入 SVG。為了符合 HTML5 標準，有時需要做一些語法調整。
?（a）、可以通過 object 元素引用 SVG 文件：
??????? <object data="image.svg" type="image/svg+xml" />
?（b）、可以使用 iframe 元素引用 SVG 文件：?
??????? <iframe src="image.svg"></iframe>?
（c）、可以使用 img 元素引用 SVG 文件(在低于 4.0 版本的 Firefox 中不起作用)。
（d）、可以通過 JavaScript 動態創建并注入SVG 到 HTML DOM 中。這種形式可以對瀏覽器使用替代技術，在不能解析 SVG 的情況下，可以替換創建的內容。
（8）、SVG支持的顯示對象
SVG提供的功能集涵蓋了嵌套轉換、裁剪路徑、Alpha通道、濾鏡效果、模板對象以及可擴展性。SVG可以實現動態和交互功能。在DOM模型的基礎上，SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或對象的操縱。
SVG主要允許支持以下幾種圖形對象類型：矢量圖形、柵格圖像以及文本。
柵格圖形對象——包括PNG、JPEG這些柵格圖像——能夠被編組、設計、轉換及集成進先前的渲染對象中。
矢量顯示對象——包括矩形、圓、橢圓、多邊形、直線、任意曲線等嵌入式外部圖像，包括PNG、JPEG、SVG等。
文字對象——文本可以在任何適用于應用程序的XML名字空間之內，從而提高SVG圖形的搜索能力和無障礙性。
（9）、SVG格式優點
（a）、可讀性好，有利于SEO與無障礙
（b）、圖像文件可讀，SVG圖像可以被任意的文本編輯器所創建和編輯，易于修改和編輯（理論如此，但實際上卻是因為各種不同的SVG檔編輯器而可能存儲成不易解讀的SVG文件）
（c）、與現有技術可以互動融合。例如，SVG技術本身的動態部分（包括時序控制和動畫）就是基于SMIL標準。另外，SVG文件還可嵌入JavaScript（嚴格地說，應該是ECMAScript）腳本來控制SVG對象
（d）、SVG圖形格式可以方便的創建文字索引，從而實現基于內容的圖像搜索，可以被搜索、索引化和腳本化，可壓縮性更強
（e）、SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現位圖格式中類似文字陰影的效果。
（f）、SVG圖形格式可以用來動態生成圖形。例如，可用SVG動態生成具有交互功能的地圖，嵌入網頁中，并顯示給終端用戶。
（g）、由于SVG采用的是XML語法，是標準的XML，繼承XML的優點（如可讀性高）。圖形的里面的文本內容可以直接被瀏覽器，搜索引擎SEO和無障礙讀屏軟件讀取，具體用法如下代碼設置title與desc標簽即可，
（h）、SVG圖像是可伸縮的，縮放不會導致質量下降，SVG圖像可在任何的分辨率下被高質量地打印
（10）、SVG格式缺點
SVG的運行受瀏覽器廠家支持程度決定。
舊版的SVG Viewer無法正確顯示出使用新版SVG格式的矢量圖形。
繼承XML的缺點，標記語法不夠簡潔
文本格式圖像的文件大小，某些情況下比二進制編碼的柵格化圖像要大（取決于所描述矢量元素的幾何復雜度）
?三、SVG應用實例
SVG可以做什么呢？
這個要看你自己咯，方法學會了，天空有多大有多美全由你自己創造。
創意無限，期待看你們的作品分享，有好作品記得告訴我一聲，讓我也學習學習~~~~
那個學費就不給了哈，因為你們看了我的，打平了，哈哈~~互相學習才能共同進步~
我的一些SVG應用實例：
?
?詳細代碼見：
別具一格，原創唯美浪漫情人節表白專輯，(復制就可用)（html5,css3,svg)表白愛心代碼
?
HTML+CSS+svg繪制精美彩色閃燈圣誕樹，HTML+CSS+Js實時新年時間倒數倒計時
?
?SVG時鐘動畫（此例子后續文章會有詳細教程）
此文為SVG實例詳解系列（一），文中部分文字概念摘錄自官方和網絡，近期會推出SVG實例詳解系列其他部分文章，想學習SVG的可以留意一下，大家一起來學習。歡迎各位大們來指點一二。大家都注意一下網絡使用安全。
????推薦閱讀：
| 29 | SVG實例詳解系列（一）(svg概述、位圖和矢量圖區別（圖解）、SVG應用實例） | |
| 28 | 查看jdk安裝路徑，在windows上實現多個java jdk的共存解決辦法，安裝java19后終端亂碼的解決 | |
| 27 | 別具一格，原創唯美浪漫情人節表白專輯，(復制就可用)（html5,css3,svg)表白愛心代碼(1) | |
| 26 | 2023年春節祝福第二彈——送你一只守護兔，讓它溫暖每一個你【html5 css3】畫會動的小兔子，炫酷充電，字體特 | |
| 25 | 2023春節祝福系列第一彈（上）（放飛祈福孔明燈，祝福大家身體健康）（附完整源代碼及資源免費下載） | |
| 24 | HTML+CSS+svg繪制精美彩色閃燈圣誕樹，HTML+CSS+Js實時新年時間倒數倒計時(附源代碼) | |
| 23 | ?草莓熊python繪圖（春節版，圣誕倒數雪花版）附源代碼 | |
| 22 | 【程序人生】卡塔爾世界杯元素python海龜繪圖（附源代碼），世界杯主題前端特效5個（附源碼） | |
| 21 | python愛心源代碼集錦（18款） | |
| 20 | 巴斯光年python turtle繪圖__附源代碼 | |
| 19 | Three.js實例詳解___旋轉的精靈女孩(附完整代碼和資源)（一） | |
| 18 | ?草莓熊python turtle繪圖代碼（玫瑰花版）附源代碼 | |
| 17 | 立體多層玫瑰繪圖源碼__玫瑰花python 繪圖源碼集錦 | |
| 16 | 皮卡丘python turtle海龜繪圖（電力球版）附源代碼 | |
| 15 | 【CSDN云IDE】個人使用體驗和建議（含超詳細操作教程）（python、webGL方向) | |
| 14 | 草莓熊python turtle繪圖（風車版）附源代碼 | |
| 13 | 用代碼過中秋，python海龜月餅你要不要嘗一口？ | |
| 12 | 《 Python List 列表全實例詳解系列（一）》__系列總目錄、列表概念 | |
| 11 | 用代碼寫出浪漫__合集（python、matplotlib、Matlab、java繪制愛心、玫瑰花、前端特效玫瑰、愛心） | |
| 10 | Python函數方法實例詳解全集(更新中...) | |
| 9 | matplotlib 自帶繪圖樣式效果展示速查（28種，全） | |
| 8 | 手機屏幕壞了____怎么把里面的資料導出（18種方法） | |
| 7 | 2023年3月TIOBE 指數頭條：編程語言 Go 進入 TIOBE 指數前 10 名，多家權威機構____編程語言排行榜__薪酬狀 | |
| 6 | Python中Print()函數的用法___實例詳解(全，例多） | |
| 5 | 色彩顏色對照表（一）(16進制、RGB、CMYK、HSV、中英文名) | |
| 4 | Node.js (v19.1.0npm 8.19.3) vue.js安裝配置教程（超詳細） | |
| 3 | Tomcat 啟動閃退問題解決集（八大類詳細） | |
| 2 | Tomcat端口配置（詳細） | |
| 1 | tomcat11、tomcat10 安裝配置（Windows環境）（詳細圖文） |
總結
以上是生活随笔為你收集整理的SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 四级535什么水平
- 下一篇： Delfoi CUT 3D切割和精加工工