SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 格式标记语言，它可以被浏览器直接渲染。SVG 图形具有良好的可伸缩性和清晰度，非常适合用于图标、图表、地图等应用场景。以下是编写 SVG 的基本语法和示例：
1. SVG 基本结构
SVG 图形可以直接写在 HTML 文件中的 <svg> 元素内部，或者作为一个独立的 .svg 文件。以下是一个简单的 SVG 示例：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
在这个例子中：
<svg>元素定义了 SVG 图形的容器。width和height属性定义了 SVG 图形的宽度和高度。xmlns属性指定了 XML 命名空间。<circle>元素定义了一个圆形，通过cx和cy属性指定圆心坐标，r属性指定半径，stroke和stroke-width属性定义了边框的颜色和宽度，fill属性定义了填充颜色。
2. SVG 基本形状
SVG 支持多种基本形状，如 circle、rect、line、polyline、polygon 等，每种形状有自己特定的属性。例如，rect 可以用来绘制矩形：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="blue" />
</svg>
3. SVG 路径（Path）
使用 <path> 元素可以创建复杂的形状和线条。路径由一系列的命令和参数组成，如 M（移动到）、L（直线到）、C（三次贝塞尔曲线）等。以下是一个例子：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 L90 90" stroke="black" stroke-width="2" />
</svg>
在这个例子中，d 属性定义了路径数据，M10 10 表示移动到 (10, 10) 点，L90 90 表示画一条直线到 (90, 90) 点。
4. SVG 文本
可以使用 <text> 元素在 SVG 中添加文本：
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="30" font-family="Arial" font-size="20" fill="black">Hello, SVG!</text>
</svg>
在这个例子中，x 和 y 属性定义了文本的位置，font-family 和 font-size 属性定义了字体和字号，fill 属性定义了文本颜色。
5. SVG 高级特性
除了基本形状和路径外，SVG 还支持渐变、滤镜、动画等高级特性，使得 SVG 图形能够实现更复杂的效果和交互。
总结
SVG 是一种强大的图形描述语言，通过 XML 格式描述二维矢量图形。它支持基本形状、路径、文本等元素，并且具有良好的可伸缩性和浏览器兼容性。通过合理利用 SVG，可以实现各种图形和动画效果，适用于 Web 开发中的多种场景。
svg画一个箭头的纯色图标案例
可以使用 SVG 来画一个简单的箭头图标。下面是一个例子，画一个指向右边的箭头，颜色为红色：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24">
<path fill="red" d="M5 12l7-8v6h10v4h-10v6z"/>
</svg>
解释：
-
<svg>元素定义了 SVG 图形的容器，设置了宽度、高度和视口框（viewBox）。xmlns="http://www.w3.org/2000/svg"声明了 SVG 的命名空间。width="100" height="100"设置了 SVG 图形的宽度和高度。viewBox="0 0 24 24"定义了 SVG 图形内容的坐标系，这里是从 (0,0) 到 (24,24)。
-
<path>元素用来定义路径，通过d属性来描述路径数据。fill="red"设置路径的填充颜色为红色。d="M5 12l7-8v6h10v4h-10v6z"描述了箭头的形状。M5 12表示移动到 (5, 12) 点。l7-8表示画一条从当前位置开始的相对直线到 (12, 4) 点。v6表示画一条垂直线（垂直增量）到 (12, 10) 点。h10表示画一条水平线（水平增量）到 (22, 10) 点。v4表示画一条垂直线（垂直增量）到 (22, 14) 点。h-10表示画一条水平线（水平减量）到 (12, 14) 点。v6表示画一条垂直线（垂直增量）到 (12, 20) 点。z表示闭合路径。
这段路径数据描述了一个简单的箭头形状，指向右边，并填充了红色。你可以根据需要调整 width、height、viewBox、fill 和 d 属性来定制箭头的大小、颜色和方向。
css如何修改svg纯色图标
要修改 SVG 纯色图标的颜色，可以通过 CSS 的 fill 属性来实现。fill 属性控制 SVG 元素的填充颜色，适用于大多数 SVG 图形元素，如 <path>、<circle>、<rect> 等。
方法一：直接在 SVG 元素内部定义颜色
最简单的方式是直接在 SVG 元素内部定义 fill 属性来设置颜色，如下所示：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24">
<path fill="red" d="M5 12l7-8v6h10v4h-10v6z"/>
</svg>
在这个例子中，<path> 元素的 fill 属性设置为 red，因此箭头图标被填充为红色。
方法二：通过 CSS 修改 SVG 的填充颜色
如果 SVG 是作为外部文件或者在 HTML 中嵌入，并且希望通过 CSS 来控制颜色，可以使用 fill 属性来覆盖内部的填充颜色。例如，假设 SVG 文件名为 arrow.svg，可以这样使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Color Example</title>
<style>
.svg-icon {
width: 100px;
height: 100px;
fill: blue; /* 设置填充颜色为蓝色 */
}
</style>
</head>
<body>
<svg class="svg-icon">
<use xlink:href="arrow.svg#icon"></use>
</svg>
</body>
</html>
在这个例子中：
.svg-icon类的fill属性设置为blue，这会覆盖 SVG 内部的fill属性。<use>元素用于在 HTML 中嵌入外部 SVG 文件，通过xlink:href属性引用文件，并使用#icon来指定 SVG 文件中的图标 ID。
注意事项：
- SVG 文件内部的
fill属性和 CSS 中的fill属性都可以控制颜色，但 CSS 中的样式会优先生效。 - 使用外部 SVG 文件时，确保浏览器支持
<use>元素和xlink:href属性。 - 可以在 CSS 中针对不同的类或者选择器来定义不同的填充颜色，从而动态地控制 SVG 图标的颜色。
通过以上方法，你可以灵活地使用 CSS 控制 SVG 纯色图标的填充颜色，实现不同样式和主题的展示需求。
png转svg实现
https://www.adobe.com/cn/express/feature/image/convert/png-to-svg
https://png2svg.com/zh/