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 的基本用法其实很简单，就是用不同的标签来描述不同的图形。
-
<rect></rect>：绘制矩形。你可以指定矩形的 x、y 坐标、宽度和高度。<svg width="200" height="100"> <rect x="10" y="10" width="180" height="80" fill="red" /> </svg>
-
<circle></circle>：绘制圆形。你需要指定圆心的 x、y 坐标和半径。<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
-
<line></line>：绘制直线。指定起点的 x、y 坐标和终点的 x、y 坐标。<svg width="100" height="100"> <line x1="10" y1="10" x2="90" y2="90" stroke="green" stroke-width="2" /> </svg>
-
<polyline></polyline>：绘制折线。用一系列的点来定义折线的路径。<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>
-
<path></path>：绘制路径。这是 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 绝对是一个不错的选择。
