• 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>
9> The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
10
11
12## Creating an <svg> Component
13
14Create a **<svg>** component in the .hml file under **pages/index**.
15
16
17```html
18<!-- xxx.hml -->
19<div class="container">
20  <svg width="400" height="400">  </svg>
21</div>
22```
23
24
25```css
26/* xxx.css */
27.container{
28  width: 100%;
29  height: 100%;
30  flex-direction: column;
31  align-items: center;
32  justify-content: center;
33  background-color: #F1F3F5;
34}
35svg{
36  background-color: blue;
37}
38```
39
40![en-us_image_0000001232162324](figures/en-us_image_0000001232162324.png)
41
42
43## Setting Attributes
44
45Set 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.
46
47
48```html
49<!-- xxx.hml -->
50<div class="container">
51  <svg width="400" height="400" viewBox="0 0 100 100">
52    <svg class="rect" width="100" height="100" x="20" y="10">
53    </svg>
54  </svg>
55</div>
56```
57
58
59```css
60/* xxx.css */
61.container{
62  width: 100%;
63  height: 100%;
64  flex-direction: column;
65  align-items: center;
66  justify-content: center;
67  background-color: #F1F3F5;
68}
69svg{
70  background-color: yellow;
71}
72.rect{
73  background-color: red;
74}
75```
76
77![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png)
78
79> **NOTE**
80>
81> - If the **&lt;svg&gt;** component is the root node, the X-axis and Y-axis attributes are invalid.
82>
83> - 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.
84