0
# SVG Elements
1

2
SVG element constructors for creating scalable vector graphics and data visualizations. ReactPy provides functions for all standard SVG elements following the same pattern as HTML elements.
3

4
## Capabilities
5

6
### Element Constructor Pattern
7

8
All SVG elements follow the same constructor pattern:
9

10
```python { .api }
11
def svg_element_name(*children, **attributes) -> VdomDict: ...
12
```
13

14
**Parameters:**
15
- `*children`: Child elements (text, other SVG elements, or Component instances)
16
- `**attributes`: SVG attributes as keyword arguments
17

18
**Returns:** VdomDict representing the SVG element
19

20
### Container Elements
21

22
Elements for grouping and organizing SVG content:
23

24
```python { .api }
25
def svg(*children, **attributes) -> VdomDict: ...
26
def g(*children, **attributes) -> VdomDict: ...
27
def defs(*children, **attributes) -> VdomDict: ...
28
def desc(*children, **attributes) -> VdomDict: ...
29
def metadata(*children, **attributes) -> VdomDict: ...
30
def title(*children, **attributes) -> VdomDict: ...
31
def symbol(*children, **attributes) -> VdomDict: ...
32
def use(**attributes) -> VdomDict: ...
33
def switch(*children, **attributes) -> VdomDict: ...
34
```
35

36
**Usage Examples:**
37

38
```python
39
from reactpy import svg
40

41
# Basic SVG container
42
my_svg = svg.svg(
43
    {"width": 200, "height": 200, "viewBox": "0 0 200 200"},
44
    svg.g(
45
        {"transform": "translate(50, 50)"},
46
        svg.circle({"cx": 50, "cy": 50, "r": 40, "fill": "blue"})
47
    )
48
)
49
```
50

51
### Shape Elements
52

53
Basic geometric shapes:
54

55
```python { .api }
56
def circle(**attributes) -> VdomDict: ...
57
def ellipse(**attributes) -> VdomDict: ...
58
def line(**attributes) -> VdomDict: ...
59
def polygon(**attributes) -> VdomDict: ...
60
def polyline(**attributes) -> VdomDict: ...
61
def rect(**attributes) -> VdomDict: ...
62
def path(**attributes) -> VdomDict: ...
63
```
64

65
**Usage Examples:**
66

67
```python
68
shapes = svg.svg(
69
    {"width": 300, "height": 200},
70
    svg.rect({"x": 10, "y": 10, "width": 50, "height": 30, "fill": "red"}),
71
    svg.circle({"cx": 100, "cy": 50, "r": 25, "fill": "green"}),
72
    svg.line({"x1": 150, "y1": 10, "x2": 200, "y2": 60, "stroke": "black"}),
73
    svg.polygon({"points": "220,10 250,50 190,50", "fill": "yellow"}),
74
    svg.path({"d": "M 10 80 Q 95 10 180 80", "stroke": "blue", "fill": "none"})
75
)
76
```
77

78
### Text Elements
79

80
Elements for text content in SVG:
81

82
```python { .api }
83
def text(*children, **attributes) -> VdomDict: ...
84
def textPath(*children, **attributes) -> VdomDict: ...
85
def tspan(*children, **attributes) -> VdomDict: ...
86
```
87

88
**Usage Examples:**
89

90
```python
91
text_svg = svg.svg(
92
    {"width": 300, "height": 100},
93
    svg.text(
94
        {"x": 10, "y": 30, "font-family": "Arial", "font-size": "16"},
95
        "Hello SVG!"
96
    ),
97
    svg.text(
98
        {"x": 10, "y": 60},
99
        svg.tspan({"fill": "red"}, "Red text "),
100
        svg.tspan({"fill": "blue"}, "Blue text")
101
    )
102
)
103
```
104

105
### Paint Server Elements
106

107
Elements for gradients and patterns:
108

109
```python { .api }
110
def linearGradient(*children, **attributes) -> VdomDict: ...
111
def radialGradient(*children, **attributes) -> VdomDict: ...
112
def pattern(*children, **attributes) -> VdomDict: ...
113
def stop(**attributes) -> VdomDict: ...
114
```
115

116
**Usage Examples:**
117

118
```python
119
gradient_svg = svg.svg(
120
    {"width": 200, "height": 100},
121
    svg.defs(
122
        svg.linearGradient(
123
            {"id": "grad1", "x1": "0%", "y1": "0%", "x2": "100%", "y2": "0%"},
124
            svg.stop({"offset": "0%", "stop-color": "rgb(255,255,0)"}),
125
            svg.stop({"offset": "100%", "stop-color": "rgb(255,0,0)"})
126
        )
127
    ),
128
    svg.rect({"width": 200, "height": 100, "fill": "url(#grad1)"})
129
)
130
```
131

132
### Structural Elements
133

134
Elements for clipping, masking, and markers:
135

136
```python { .api }
137
def clipPath(*children, **attributes) -> VdomDict: ...
138
def mask(*children, **attributes) -> VdomDict: ...
139
def marker(*children, **attributes) -> VdomDict: ...
140
```
141

142
### Filter Elements
143

144
Elements for visual effects and filters:
145

146
```python { .api }
147
def filter(*children, **attributes) -> VdomDict: ...
148
def feBlend(**attributes) -> VdomDict: ...
149
def feColorMatrix(**attributes) -> VdomDict: ...
150
def feComponentTransfer(*children, **attributes) -> VdomDict: ...
151
def feComposite(**attributes) -> VdomDict: ...
152
def feConvolveMatrix(**attributes) -> VdomDict: ...
153
def feDiffuseLighting(*children, **attributes) -> VdomDict: ...
154
def feDisplacementMap(**attributes) -> VdomDict: ...
155
def feDistantLight(**attributes) -> VdomDict: ...
156
def feDropShadow(**attributes) -> VdomDict: ...
157
def feFlood(**attributes) -> VdomDict: ...
158
def feFuncA(**attributes) -> VdomDict: ...
159
def feFuncB(**attributes) -> VdomDict: ...
160
def feFuncG(**attributes) -> VdomDict: ...
161
def feFuncR(**attributes) -> VdomDict: ...
162
def feGaussianBlur(**attributes) -> VdomDict: ...
163
def feImage(**attributes) -> VdomDict: ...
164
def feMerge(*children, **attributes) -> VdomDict: ...
165
def feMergeNode(**attributes) -> VdomDict: ...
166
def feMorphology(**attributes) -> VdomDict: ...
167
def feOffset(**attributes) -> VdomDict: ...
168
def fePointLight(**attributes) -> VdomDict: ...
169
def feSpecularLighting(*children, **attributes) -> VdomDict: ...
170
def feSpotLight(**attributes) -> VdomDict: ...
171
def feTile(**attributes) -> VdomDict: ...
172
def feTurbulence(**attributes) -> VdomDict: ...
173
```
174

175
**Usage Examples:**
176

177
```python
178
filtered_svg = svg.svg(
179
    {"width": 200, "height": 200},
180
    svg.defs(
181
        svg.filter(
182
            {"id": "blur"},
183
            svg.feGaussianBlur({"in": "SourceGraphic", "stdDeviation": "3"})
184
        )
185
    ),
186
    svg.circle({
187
        "cx": 100, "cy": 100, "r": 50,
188
        "fill": "red", "filter": "url(#blur)"
189
    })
190
)
191
```
192

193
### Animation Elements
194

195
Elements for SVG animations:
196

197
```python { .api }
198
def animate(**attributes) -> VdomDict: ...
199
def animateMotion(*children, **attributes) -> VdomDict: ...
200
def animateTransform(**attributes) -> VdomDict: ...
201
def set(**attributes) -> VdomDict: ...
202
```
203

204
**Usage Examples:**
205

206
```python
207
animated_svg = svg.svg(
208
    {"width": 200, "height": 200},
209
    svg.circle(
210
        {"cx": 100, "cy": 100, "r": 50, "fill": "blue"},
211
        svg.animate({
212
            "attributeName": "r",
213
            "values": "30;50;30",
214
            "dur": "2s",
215
            "repeatCount": "indefinite"
216
        })
217
    )
218
)
219
```
220

221
### Other Elements
222

223
Additional SVG elements:
224

225
```python { .api }
226
def foreignObject(*children, **attributes) -> VdomDict: ...
227
def image(**attributes) -> VdomDict: ...
228
def style(*children, **attributes) -> VdomDict: ...
229
```
230

231
### Common Attributes
232

233
SVG elements support various attributes:
234

235
```python
236
# Position and size
237
element = svg.rect({"x": 10, "y": 20, "width": 100, "height": 50})
238

239
# Styling
240
styled = svg.circle({
241
    "cx": 50, "cy": 50, "r": 25,
242
    "fill": "red",
243
    "stroke": "black",
244
    "stroke-width": 2,
245
    "opacity": 0.8
246
})
247

248
# Transforms
249
transformed = svg.g(
250
    {"transform": "rotate(45) translate(10, 10) scale(1.5)"},
251
    svg.rect({"width": 50, "height": 30})
252
)
253
```