SVG(Scalable Vector Graphics)是可缩放矢量图形，它是一种基于XML(可扩展标记语言)的图形格式，用于描述二维图形和图像。Image组件支持的SVG范围，为SVG1.1规范的部分功能。支持的标签以及属性如下：

基础形状

基础形状标签包括： 、 、 、 、 、 、

说明：

基础标签支持通用属性 id、fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、opacity、transform、clip-path、clip-rule

元素	说明	特有属性
	矩形	x：x轴方向偏移分量； y：y轴方向偏移分量； width：宽度； height：高度； rx：圆角x轴半径； ry：圆角y轴半径。
	圆形	cx：圆心x轴坐标； cy：圆心y轴坐标； r：圆形半径。
	椭圆	cx：x轴坐标； cy：y轴坐标； rx：x轴半径； ry：y轴半径。
	线	x1：起点x轴坐标； y1：起点y轴坐标； x2：终点x轴坐标； y2：终点y轴坐标。
	折线	points：顶点坐标。
	多边形	points：顶点坐标。
	路径	d：路径。

图形效果

滤镜

滤镜标签包括：、、、、、、，其中定义滤镜范围，其它标签定义滤镜效果。

元素	说明	特有属性
	定义滤镜	x：滤镜区域x轴偏移分量，默认值为0； y：滤镜区域y轴偏移分量，默认值为0； width：滤镜区域宽； height：滤镜区域高。
	定义沿x、y方向偏移距离	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）; result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入，dx，dy。
	定义高斯模糊效果	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）; result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入，edgemode，stddeviation。
	定义两张输入图像混合模式	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）; result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入； in2：第二图源（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result），mode。
	定义两张输入图像合成方式， 算法：result = k1 * in * in2 + k2 * in + k3 * in2 + k4	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）； in2：第二图源（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result），operator( over
	基于转换矩阵对颜色进行变换	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）； result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入； type ( matrix
	定义填充颜色和透明度	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）； result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入；flood-color、flood-opacity。

遮罩

遮罩标签：

元素	说明	特有属性
	定义遮罩	x：遮罩区域x轴偏移分量； y：遮罩区域y轴偏移分量； width：遮罩区域宽； height：遮罩区域高。

裁剪

裁剪标签：

元素	说明	特有属性
	定义一条剪切路径	x：裁剪区域x轴偏移分量； y：裁剪区域y轴偏移分量； width：裁剪区域宽； height：裁剪区域高。

图案

裁剪标签：

元素	说明	特有属性
	定义填充图案	x：填充区域x轴偏移分量； y：填充区域y轴偏移分量； width：填充区域宽； height：填充区域高。

渐变色

渐变色相关的标签包括：、、

元素	说明	特有属性
	线性渐变	x1，y1，x2，y2
	放射渐变	fx，fy，cx，cy，r
	色阶	offset、stop-color

静态图片

图片标签：

元素	说明	特有属性
	用于图像显示	x：图像x轴偏移； y：图像y轴偏移； width：图像宽； height：图像高； href：目标图片(支持：jpg、jpeg、png、bmp、webp、heic、base64，不支持svg)。

动画

动画标签：、

元素	说明	特有属性
	定义元素属性动画	attributeName：定义可动画属性，取值：( cx
	定义元素变形动画	attributeName： 定义可动画属性，取值：transform； type：属性定义转换类型取值：( translate

说明： 当前仅支持单个元素的属性动画或者变形动画，不支持元素间动画嵌套。

其它

除了标识图形图像效果的标签，还支持分组等标签，分别有：

元素	说明	特有属性	通用属性
	容器，定义个svg片段	x：x轴偏移分量； y：y轴偏移分量； width：宽度； height：高度； viewBox：视口	fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform
	分组	x：x轴偏移分量； y：y轴偏移分量； width：宽度； height：高度	fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform
	复用已有元素	x：x轴偏移分量； y：y轴偏移分量；href：目标元素	fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform
	定义可复用对象

说明： 当前支持的颜色值格式包括：#rgb、#rrggbb、rgb()、rgba()，以及常用颜色关键字（如：red、black、blue等）。

更多鸿蒙开发学习：

尽在↓