1# svg
2
3The **\<svg>** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document.
4
5
6>  **NOTE**
7>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8>
9>  - The width and height must be defined for the **\<svg>** parent component or **\<svg>** component. Otherwise, the component is not drawn.
10
11## Required Permissions
12
13None
14
15
16## Child Components
17
18The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](js-components-svg-line.md), [\<polygon>](js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
19
20
21## Attributes
22
23The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
24
25| Name    | Type                               | Default Value | Mandatory | Description                              |
26| ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- |
27| id      | string                             | -             | No        | Unique ID of the component.              |
28| width   | &lt;length&gt;\|&lt;percentage&gt; | -             | No        | Component width.                         |
29| height  | &lt;length&gt;\|&lt;percentage&gt; | -             | No        | Component height.                        |
30| x       | &lt;length&gt;\|&lt;percentage&gt; | -             | No        | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
31| y       | &lt;length&gt;\|&lt;percentage&gt; |               | No        | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
32| viewBox | string                             | -             | No        | View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. 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. |
33
34
35## Example
36
37```html
38<!-- xxx.hml -->
39<div class="container">
40  <svg width="400" height="400">
41    <svg width="200" height="200" viewBox="0 0 100 100">
42      <rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
43    </svg>
44    <rect x="10" y="10" width="80" height="80" fill="red" ></rect>
45    <svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
46      <rect x="10" y="10" width="80" height="80" fill="red"></rect>
47    </svg>
48    <svg x="0" y="0" width="200" height="200" viewBox="0 0 400 400">
49      <rect x="10" y="10" width="80" height="80" fill="blue"></rect>
50    </svg>
51  </svg>
52</div>
53```
54
55
56![en-us_image_0000001173164789](figures/en-us_image_0000001173164789.png)
57