svg標簽是html中用于繪制矢量圖的技術，它基于xml格式描述二維圖形，支持無損縮放，并可通過css和JavaScript控制樣式與交互。1. svg是矢量圖，基于數學公式描述，放大不失真；2. 支持css樣式設置，如fill、stroke等屬性；3. 可通過javascript實現交互效果，如點擊變色；4. 常用于圖標、數據可視化、動畫及地圖等場景；5. 相比位圖更清晰且文件體積更小，適合網頁優化。
SVG標簽，簡單來說，就是在HTML里畫矢量圖的。它提供了一種用XML格式描述二維圖形的方式，讓圖形可以無損縮放，而且能通過CSS和JavaScript進行控制，這使得它在網頁設計中變得非常實用。
SVG 是一種使用 XML 描述 2D 圖形的語言。這意味著你可以用文本來定義形狀、路徑、顏色等，然后在瀏覽器中渲染成圖像。
SVG 的作用遠不止于顯示靜態圖像。由于它是基于 XML 的，所以可以像操作 HTML 元素一樣，使用 CSS 來設置樣式，使用 JavaScript 來添加交互。這使得 SVG 非常適合創建動態、交互式的圖形和動畫。
立即學習“前端免費學習筆記（深入）”；
SVG和普通圖片有什么區別？
這絕對是很多人的疑問。最大的區別在于，SVG 是矢量圖，而常見的 JPG、PNG 等是位圖。矢量圖是基于數學公式描述的，所以無論放大多少倍，都不會失真。而位圖是由像素點組成的，放大后會變得模糊。
另一個區別是，SVG 文件通常比位圖文件小，尤其是在描述簡單圖形時。而且，SVG 可以直接嵌入到 HTML 中，減少了 http 請求。
SVG有哪些基本用法？
SVG 的基本用法其實很簡單，就是用不同的標簽來描述不同的圖形。
-
：繪制矩形。你可以指定矩形的 x、y 坐標、寬度和高度。 <svg width="200" height="100"> <rect x="10" y="10" width="180" height="80" fill="red" /> </svg>
-
：繪制圓形。你需要指定圓心的 x、y 坐標和半徑。 <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
-
：繪制直線。指定起點的 x、y 坐標和終點的 x、y 坐標。 <svg width="100" height="100"> <line x1="10" y1="10" x2="90" y2="90" stroke="green" stroke-width="2" /> </svg>
-
：繪制折線。用一系列的點來定義折線的路徑。 <svg width="200" height="100"> <polyline points="10,10 50,50 90,10 130,50 170,10" stroke="purple" stroke-width="2" fill="none" /> </svg>
-
：繪制路徑。這是 SVG 中最強大的元素，可以用它來繪制任意形狀。你需要使用一系列的命令來定義路徑。例如，M 表示移動到，L 表示畫直線，C 表示畫貝塞爾曲線。 <svg width="200" height="200"> <path d="M10,10 C20,20 40,20 50,10 A30,30 0 0,1 150,10 C160,20 180,20 190,10" stroke="orange" stroke-width="2" fill="none" /> </svg>
這些只是 SVG 的一些基本用法。實際上，SVG 還有很多高級特性，比如漸變、濾鏡、動畫等，可以用來創建更復雜的圖形效果。
如何使用CSS控制SVG樣式？
SVG 的一個很大的優點是可以使用 CSS 來控制樣式。你可以像操作 HTML 元素一樣，使用 CSS 選擇器來選取 SVG 元素，然后設置它們的樣式。
<svg width="200" height="100"> <rect id="myRect" x="10" y="10" width="180" height="80" fill="red" /> </svg> <style> #myRect { fill: green; stroke: black; stroke-width: 2; } </style>
在這個例子中，我們使用 CSS 選擇器 #myRect 來選取 ID 為 myRect 的矩形，然后設置它的填充顏色為綠色，邊框顏色為黑色，邊框寬度為 2 像素。
需要注意的是，有些 CSS 屬性在 SVG 中有不同的名稱。例如，fill 對應于填充顏色，stroke 對應于邊框顏色，stroke-width 對應于邊框寬度。
如何使用JavaScript控制SVG？
除了 CSS，你還可以使用 JavaScript 來控制 SVG。你可以像操作 HTML 元素一樣，使用 JavaScript 來選取 SVG 元素，然后修改它們的屬性。
<svg width="200" height="100"> <rect id="myRect" x="10" y="10" width="180" height="80" fill="red" /> </svg> <script> const rect = document.getElementById('myRect'); rect.addEventListener('click', () => { rect.setAttribute('fill', 'yellow'); }); </script>
在這個例子中，我們使用 JavaScript 獲取 ID 為 myRect 的矩形，然后添加一個點擊事件監聽器。當矩形被點擊時，我們將它的填充顏色設置為黃色。
使用 JavaScript 可以實現更復雜的交互效果，比如動畫、拖拽、縮放等。
SVG在實際項目中的應用場景有哪些？
SVG 在實際項目中的應用非常廣泛。
- 圖標：SVG 非常適合用來創建圖標。由于它是矢量圖，所以無論放大多少倍，都不會失真。而且，SVG 文件通常比位圖文件小，可以提高網頁的加載速度。
- 數據可視化：SVG 可以用來創建各種圖表，比如折線圖、柱狀圖、餅圖等。你可以使用 JavaScript 來動態更新圖表的數據，實現交互式的數據可視化效果。
- 動畫：SVG 可以用來創建各種動畫效果。你可以使用 CSS 或 JavaScript 來控制 SVG 元素的屬性，實現平滑的過渡效果。
- 地圖：SVG 可以用來創建地圖。你可以使用 SVG 元素來表示地圖上的各個區域，然后使用 JavaScript 來添加交互功能，比如點擊區域顯示詳細信息。
總的來說，SVG 是一種非常強大的圖形技術，可以用來創建各種各樣的圖形效果。如果你想在網頁設計中添加一些動態、交互式的圖形，那么 SVG 絕對是一個不錯的選擇。
