# SVG Tags Scalable 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. ## Basic Shapes The basic shape tags include the following: \, \, \, \, \, \, \ > **NOTE** > > Basic tags support the following universal attributes: > 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 | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Rectangle| **x**: x-axis offset.
**y**: y-axis offset.
**width**: width.
**height**: height.
**rx**: corner radius on the x-axis.
**ry**: corner radius on the y-axis.| | \ | Circle| **cx**: X coordinate of the circle center.
**cy**: Y coordinate of the circle center.
**r**: radius of the circle.| | | \ | Ellipse| **cx**: X coordinate.
**cy**: Y coordinate.
**rx**: x-axis radius.
**ry**: y-axis radius.
| | | \ | Line| **x1**: X coordinate of the start point.
**y1**: Y coordinate of the start point.
**x2**: X coordinate of the end point.
**y2**: Y coordinate of the end point.| | | \ | Polyline| **points**: vertex coordinates.| | | \ | Polygon| **points**: vertex coordinates.| | | \ | Path| **d**: path.| | ## Graphic Effects ### Filters The filter tags include the following: \, \, \, \, and \<. The tags are feComposite\>, \, \, where \ defines the filter area, and other tags define filter effects. | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Defines the filter area.| **x**: x-axis offset of the filter area.
**y**: y-axis offset of the filter area.
**width**: width of the filter area.
**height**: height of the filter area.| | \ | Defines the offset distance along x-axis and y-axis.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.
**result**: output after filter processing, which can be used as input for the next filter. The value can include dx and dy.| | \ | Defines the Gaussian blur effect.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.
**result**: output after filter processing, which can be used as input for the next filter. The value can include edgemode and stddeviation.| | \ | Defines the blending mode for two input images.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.
**result**: output after filter processing, which can be used as input for the next filter.
**in2**: second image source, which can be SourceGraphic, SourceAlpha, or result from other filter effects; mode| | \ | Defines composition of two input images.
Algorithm: result = k1 * in * in2 + k2 * in + k3 * in2 + k4| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.
**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| | | \ | Transforms colors based on a transformation matrix.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.
**result**: output after filter processing, which can be used as input for the next filter.
type ( matrix \| saturate \| hueRotate), values| | \ | Defines the fill color and opacity.| **in**: filter input, which can be SourceGraphic, SourceAlpha, or result from other filter effects.
**result**: output after filter processing, which can be used as input for the next filter; flood-color and flood-opacity| ### Masks The mask tags include the following: \ | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Defines the mask area.| **x**: x-axis offset of the mask area.
**y**: y-axis offset of the mask area.
**width**: width of the mask area
**height**: height of the mask area| ### Clipping The clipping tags include the following: \ | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Defines a clipping path.| **x**: x-axis offset of the clipping area.
**y**: y-axis offset of the clipping area.
**width**: width of the clipping area.
**height**: height of the clipping area.| ### Patterns The pattern tags include the following: \ | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Defines a fill pattern.| **x**: x-axis offset of the fill area.
**y**: y-axis offset of the fill area.
**width**: width of the fill area.
**height**: height of the fill area.| ### Gradients The gradient tags include the following: \, \, \ | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Linear gradient.| x1, y1, x2, y2| | \ | Radial gradient.| fx, fy, cx, cy, r| | \ | Color stop.| offset, stop-color| ## Static Images The image tags include the following: \ | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Displays an image.| **x**: x-axis offset of the image.
**y**: y-axis offset of the image.
**width**: width of the image.
**height**: height of the image.
**href**: target image, which can be in JPG, JPEG, PNG, BMP, WEBP, HEIC, or base64 format (SVG is not supported).| ## Animation The animation tags include the following: \, \ | Element| Description| Unique Attribute| | :-------- | :-------- | :-------- | | \ | Definies an element attribute animation.| **attributeName**: animatable attribute; values: (cx\| cy \| r \| fill \| stroke \| fill-opacity \| stroke-opacity \| stroke-miterlimit)
**begin**: animation start time.
**dur**: animation duration.
**from**: start value.
**to**: end value.
**fill**: end state of the animation.
**calcMode**: interpolation.
keyTimes, values, keySplines | | \ | Defines an element transformation animation.| **attributeName**: animatable attribute; value: transform
**type**: transformation type; values: (translate \| scale \| rotate \| skewX \| skewY);
**begin**: animation start time.
**dur**: animation duration.
**from**: start value.
**to**: end value.
**fill**: end state of the animation.
**calcMode**: interpolation.
keyTimes, values, keySplines| > **NOTE** > > Currently, only single element attribute or transformation animations are supported, not nested animations between elements. ## Other In addition to tags that identify graphic and image effects, there are also grouping and other tags, including the following: \, \, \, \ | Element| Description| Unique Attribute| Universal Attribute| | :-------- | :-------- | :-------- | :-------- | | \ | Defines an SVG segment.| **x**: x-axis offset.
**y**: y-axis offset.
**width**: width.
**height**: height.
**viewBox**: viewport.| fill, fill-rule, fill-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, transform| | \ | Groups other SVG elements.| **x**: x-axis offset.
**y**: y-axis offset.
**width**: width.
**height**: height.| fill, fill-rule, fill-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, transform| | \ | Reuses existing elements.| **x**: x-axis offset.
**y**: y-axis offset.
**href**: target element.| fill, fill-rule, fill-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, transform| | \ | Defines reusable objects.| | | > **NOTE** > > Currently supported color value formats include #rgb, #rrggbb, rgb(), rgba(), and common color keywords (such as red, black, blue, and more).