• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Basics
2
3
4The **<svg>** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md).
5
6
7> **NOTE**
8> - The APIs of this component are supported since API version 7.
9>
10> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
11
12
13## Creating an <svg> Component
14
15Create a **<svg>** component in the .hml file under **pages/index**.
16
17
18```html
19<!-- xxx.hml -->
20<div class="container">
21  <svg width="400" height="400">  </svg>
22</div>
23```
24
25
26```css
27/* xxx.css */
28.container{
29  width: 100%;
30  height: 100%;
31  flex-direction: column;
32  align-items: center;
33  justify-content: center;
34  background-color: #F1F3F5;
35}
36svg{
37  background-color: blue;
38}
39```
40
41![en-us_image_0000001232162324](figures/en-us_image_0000001232162324.png)
42
43
44## Setting Attributes
45
46Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **&lt;svg&gt;** component.
47
48
49```html
50<!-- xxx.hml -->
51<div class="container">
52  <svg width="400" height="400" viewBox="0 0 100 100">
53    <svg class="rect" width="100" height="100" x="20" y="10">
54    </svg>
55  </svg>
56</div>
57```
58
59
60```css
61/* xxx.css */
62.container{
63  width: 100%;
64  height: 100%;
65  flex-direction: column;
66  align-items: center;
67  justify-content: center;
68  background-color: #F1F3F5;
69}
70svg{
71  background-color: yellow;
72}
73.rect{
74  background-color: red;
75}
76```
77
78![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png)
79
80> **NOTE**
81>
82> - If the **&lt;svg&gt;** component is the root node, the X-axis and Y-axis attributes are invalid.
83>
84> - If the width and height of **viewBox** are inconsistent with those of the **&lt;svg&gt;** component, the view box will be scaled in center-aligned mode.
85