# svg **** is a basic container, which is used as the root node of the SVG and can be nested in the SVG. >![](../../public_sys-resources/icon-note.gif) **NOTE:** >The APIs of this module are supported since API version 7. >Constraints: The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn. ## Permission List None ## Child Components **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polygon**, **polyline**, **text**, **animate**, and **animateTransform** are supported. ## Attributes The universal attributes as well as the attributes listed below are supported. The configured universal attributes are passed to the child components.

Name

Type

Default Value

Mandatory

Description

id

string

-

No

Unique ID of the component.

width

<length>|<percentage>

-

No

Component width.

height

<length>|<percentage>

-

No

Component height.

x

<length>|<percentage>

-

No

X-coordinate of the current <svg> component. The settings do not work for the root <svg> node.

y

<length>|<percentage>

   

No

Y-coordinate of the current <svg> component. The settings do not work for the root <svg> node.

viewBox

string

-

No

View box of the current <svg> component. The supported format is <number number number number>. The four parameters indicate the min-x, min-y, width, and height. The width and height of the view box are different from those of the <svg> component. The view box is scaled in center-aligned mode.
## Example ```
``` ![](figures/en-us_image_0000001173164789.png)