1# SVG Tags
2
3Scalable Vector Graphics (SVG) is an XML-based graphics format for describing two-dimensional graphics and images. The **Image** component supports a subset of the SVG 1.1 specification. The supported tags and attributes are as follows.
4
5## Basic Shapes
6
7The basic shape tags include the following: \<rect\>, \<circle\>, \<ellipse\>, \<line\>, \<polyline\>, \<polygon\>, \<path\>
8
9>  **NOTE**
10>
11>  Basic tags support the following universal attributes:
12>  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
13
14| Element| Description| Unique Attribute|
15| :-------- | :-------- | :-------- |
16| \<rect\> | Rectangle| **x**: x-axis offset.<br>**y**: y-axis offset.<br>**width**: width.<br>**height**: height.<br>**rx**: corner radius on the x-axis.<br>**ry**: corner radius on the y-axis.|
17| \<circle\> | Circle| **cx**: X coordinate of the circle center.<br> **cy**: Y coordinate of the circle center.<br> **r**: radius of the circle.|  |
18| \<ellipse\> | Ellipse| **cx**: X coordinate.<br> **cy**: Y coordinate.<br> **rx**: x-axis radius.<br> **ry**: y-axis radius.<br>|  |
19| \<line\> | Line| **x1**: X coordinate of the start point.<br> **y1**: Y coordinate of the start point.<br> **x2**: X coordinate of the end point.<br> **y2**: Y coordinate of the end point.|  |
20| \<polyline\> | Polyline| **points**: vertex coordinates.|  |
21| \<polygon\> | Polygon| **points**: vertex coordinates.|  |
22| \<path\> | Path| **d**: path.|  |
23
24## Graphic Effects
25
26### Filters
27
28The filter tags include the following: \<filter\>, \<feOffset\>, \<feGaussianBlur\>, \<feBlend\>, and \<. The tags are feComposite\>, \<feColorMatrix\>, \<feFlood\>, where \<filter\> defines the filter area, and other tags define filter effects.
29
30| Element| Description| Unique Attribute|
31| :-------- | :-------- | :-------- |
32| \<filter\> | Defines the filter area.| **x**: x-axis offset of the filter area.<br>**y**: y-axis offset of the filter area.<br>**width**: width of the filter area.<br>**height**: height of the filter area.|
33| \<feOffset\> | Defines the offset distance along x-axis and y-axis.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.<br> **result**: output after filter processing, which can be used as input for the next filter. The value can include dx and dy.|
34| \<feGaussianBlur\> | Defines the Gaussian blur effect.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.<br> **result**: output after filter processing, which can be used as input for the next filter. The value can include edgemode and stddeviation.|
35| \<feBlend\> | Defines the blending mode for two input images.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.<br> **result**: output after filter processing, which can be used as input for the next filter.<br>**in2**: second image source, which can be SourceGraphic, SourceAlpha, or result from other filter effects; mode|
36| \<feComposite\> | Defines composition of two input images.<br>Algorithm: result = k1 * in * in2 + k2 * in + k3 * in2 + k4| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.<br>**in2**: second image source, which can be SourceGraphic, SourceAlpha, or result from other filter effects; operator( over \| in \| out \| atop \| xor \| lighter \| arithmetic ), k1, k2, k3, k4|  |
37| \<feColorMatrix\> | Transforms colors based on a transformation matrix.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.<br> **result**: output after filter processing, which can be used as input for the next filter.<br>type ( matrix \| saturate \| hueRotate), values|
38| \<feFlood\> | Defines the fill color and opacity.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.<br> **result**: output after filter processing, which can be used as input for the next filter; flood-color and flood-opacity|
39
40### Masks
41
42The mask tags include the following: \<mask\>
43| Element| Description| Unique Attribute|
44| :-------- | :-------- | :-------- |
45| \<mask\> | Defines the mask area.| **x**: x-axis offset of the mask area.<br>**y**: y-axis offset of the mask area.<br>**width**: width of the mask area<br>**height**: height of the mask area|
46
47### Clipping
48
49The clipping tags include the following: \<clippath\>
50| Element| Description| Unique Attribute|
51| :-------- | :-------- | :-------- |
52| \<clippath\> | Defines a clipping path.| **x**: x-axis offset of the clipping area.<br>**y**: y-axis offset of the clipping area.<br>**width**: width of the clipping area.<br>**height**: height of the clipping area.|
53
54### Patterns
55
56The pattern tags include the following: \<pattern\>
57| Element| Description| Unique Attribute|
58| :-------- | :-------- | :-------- |
59| \<pattern\> | Defines a fill pattern.| **x**: x-axis offset of the fill area.<br>**y**: y-axis offset of the fill area.<br>**width**: width of the fill area.<br>**height**: height of the fill area.|
60
61### Gradients
62
63The gradient tags include the following: \<linearGradient\>, \<racialGradient\>, \<stop\>
64
65| Element| Description| Unique Attribute|
66| :-------- | :-------- | :-------- |
67| \<linearGradient\> | Linear gradient.| x1, y1, x2, y2|
68| \<racialGradient\> | Radial gradient.| fx, fy, cx, cy, r|
69| \<stop\> | Color stop.| offset, stop-color|
70
71## Static Images
72
73The image tags include the following: \<image\>
74| Element| Description| Unique Attribute|
75| :-------- | :-------- | :-------- |
76| \<image\> | Displays an image.| **x**: x-axis offset of the image.<br> **y**: y-axis offset of the image.<br> **width**: width of the image.<br> **height**: height of the image.<br> **href**: target image, which can be in JPG, JPEG, PNG, BMP, WEBP, HEIC, or base64 format (SVG is not supported).|
77
78## Animation
79
80The animation tags include the following: \<animate\>, \<animateTransform\>
81| Element| Description| Unique Attribute|
82| :-------- | :-------- | :-------- |
83| \<animate\> | Definies an element attribute animation.| **attributeName**: animatable attribute; values: (cx\| cy \| r \| fill \| stroke \| fill-opacity \| stroke-opacity \| stroke-miterlimit)<br>**begin**: animation start time.<br> **dur**: animation duration.<br>**from**: start value.<br>**to**: end value.<br>**fill**: end state of the animation.<br> **calcMode**: interpolation.<br> keyTimes, values, keySplines |
84| \<animateTransform\> | Defines an element transformation animation.| **attributeName**: animatable attribute; value: transform<br>**type**: transformation type; values: (translate \| scale \| rotate \| skewX \| skewY);<br>**begin**: animation start time.<br> **dur**: animation duration.<br>**from**: start value.<br>**to**: end value.<br>**fill**: end state of the animation.<br> **calcMode**: interpolation.<br> keyTimes, values, keySplines|
85
86> **NOTE**
87>
88> Currently, only single element attribute or transformation animations are supported, not nested animations between elements.
89
90## Other
91
92In addition to tags that identify graphic and image effects, there are also grouping and other tags, including the following:
93\<svg\>, \<g\>, \<use\>, \<defs\>
94
95| Element| Description| Unique Attribute| Universal Attribute|
96| :-------- | :-------- | :-------- | :-------- |
97| \<svg\> | Defines an SVG segment.| **x**: x-axis offset.<br> **y**: y-axis offset.<br> **width**: width.<br>**height**: height.<br> **viewBox**: viewport.| fill, fill-rule, fill-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, transform|
98| \<g\> | Groups other SVG elements.| **x**: x-axis offset.<br> **y**: y-axis offset.<br> **width**: width.<br> **height**: height.| fill, fill-rule, fill-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, transform|
99| \<use\> | Reuses existing elements.| **x**: x-axis offset.<br> **y**: y-axis offset.<br>**href**: target element.| fill, fill-rule, fill-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, transform|
100| \<defs\> | Defines reusable objects.| | |
101
102> **NOTE**
103>
104> Currently supported color value formats include #rgb, #rrggbb, rgb(), rgba(), and common color keywords (such as red, black, blue, and more).