0
# SVG Support
1

2
Complete SVG (Scalable Vector Graphics) element support for creating vector graphics, icons, illustrations, and interactive visual content. All SVG elements integrate with the same styling and event systems as HTML elements.
3

4
## Capabilities
5

6
### SVG Container
7

8
Root SVG element that defines the coordinate system and viewport for vector graphics.
9

10
```kotlin { .api }
11
/**
12
 * Root SVG element
13
 * @param viewBox Defines coordinate system and aspect ratio (format: "minX minY width height")
14
 * @param attrs Additional SVG attributes including width, height, preserveAspectRatio
15
 * @param content SVG content elements
16
 */
17
@ExperimentalComposeWebSvgApi
18
fun Svg(
19
    viewBox: String? = null,
20
    attrs: AttrBuilderContext<SVGElement>? = null,
21
    content: ContentBuilder<SVGElement>? = null
22
)
23
```
24

25
### SVG Shape Elements
26

27
Geometric shapes for creating vector graphics.
28

29
```kotlin { .api }
30
/**
31
 * Circle shape element
32
 * @param cx Center X coordinate
33
 * @param cy Center Y coordinate  
34
 * @param r Radius
35
 * @param attrs Additional attributes including fill, stroke, etc.
36
 * @param content Optional content
37
 */
38
@ExperimentalComposeWebSvgApi
39
fun Circle(
40
    cx: Number,
41
    cy: Number,
42
    r: Number,
43
    attrs: AttrBuilderContext<SVGElement>? = null,
44
    content: ContentBuilder<SVGElement>? = null
45
)
46

47
/**
48
 * Rectangle shape element
49
 * @param x Left edge X coordinate
50
 * @param y Top edge Y coordinate
51
 * @param width Rectangle width
52
 * @param height Rectangle height
53
 * @param attrs Additional attributes including rx, ry for rounded corners
54
 * @param content Optional content
55
 */
56
@ExperimentalComposeWebSvgApi
57
fun Rect(
58
    x: Number,
59
    y: Number,
60
    width: Number,
61
    height: Number,
62
    attrs: AttrBuilderContext<SVGElement>? = null,
63
    content: ContentBuilder<SVGElement>? = null
64
)
65

66
/**
67
 * Ellipse shape element
68
 * @param cx Center X coordinate
69
 * @param cy Center Y coordinate
70
 * @param rx Horizontal radius
71
 * @param ry Vertical radius
72
 * @param attrs Additional attributes
73
 * @param content Optional content
74
 */
75
@ExperimentalComposeWebSvgApi
76
fun Ellipse(
77
    cx: Number,
78
    cy: Number,
79
    rx: Number,
80
    ry: Number,
81
    attrs: AttrBuilderContext<SVGElement>? = null,
82
    content: ContentBuilder<SVGElement>? = null
83
)
84

85
/**
86
 * Line element
87
 * @param x1 Start point X coordinate
88
 * @param y1 Start point Y coordinate
89
 * @param x2 End point X coordinate
90
 * @param y2 End point Y coordinate
91
 * @param attrs Additional attributes
92
 * @param content Optional content
93
 */
94
@ExperimentalComposeWebSvgApi
95
fun Line(
96
    x1: Number,
97
    y1: Number,
98
    x2: Number,
99
    y2: Number,
100
    attrs: AttrBuilderContext<SVGElement>? = null,
101
    content: ContentBuilder<SVGElement>? = null
102
)
103

104
/**
105
 * Path element for complex shapes using path data
106
 * @param d Path data string with drawing commands (M, L, C, Q, A, Z, etc.)
107
 * @param attrs Additional attributes
108
 * @param content Optional content
109
 */
110
@ExperimentalComposeWebSvgApi
111
fun Path(
112
    d: String,
113
    attrs: AttrBuilderContext<SVGElement>? = null,
114
    content: ContentBuilder<SVGElement>? = null
115
)
116

117
/**
118
 * Polygon element (closed shape with straight sides)
119
 * @param points Variable number of coordinate pairs
120
 * @param attrs Additional attributes
121
 * @param content Optional content
122
 */
123
@ExperimentalComposeWebSvgApi
124
fun Polygon(
125
    vararg points: Pair<Number, Number>,
126
    attrs: AttrBuilderContext<SVGElement>? = null,
127
    content: ContentBuilder<SVGElement>? = null
128
)
129

130
/**
131
 * Polyline element (open shape with straight sides)
132
 * @param points Variable number of coordinate pairs
133
 * @param attrs Additional attributes
134
 * @param content Optional content
135
 */
136
@ExperimentalComposeWebSvgApi
137
fun Polyline(
138
    vararg points: Pair<Number, Number>,
139
    attrs: AttrBuilderContext<SVGElement>? = null,
140
    content: ContentBuilder<SVGElement>? = null
141
)
142
```
143

144
### SVG Text Elements
145

146
Text rendering within SVG graphics.
147

148
```kotlin { .api }
149
/**
150
 * SVG text element
151
 * @param text Text content to display
152
 * @param x X coordinate for text positioning
153
 * @param y Y coordinate for text positioning  
154
 * @param attrs Additional attributes including font properties, fill, etc.
155
 */
156
@ExperimentalComposeWebSvgApi
157
fun SvgText(
158
    text: String,
159
    x: Number? = null,
160
    y: Number? = null,
161
    attrs: AttrBuilderContext<SVGElement>? = null
162
)
163

164
/**
165
 * Text along a path element
166
 * @param href Reference to path element (e.g., "#pathId")
167
 * @param text Text content to display along path
168
 * @param attrs Additional attributes
169
 */
170
@ExperimentalComposeWebSvgApi
171
fun TextPath(
172
    href: String,
173
    text: String,
174
    attrs: AttrBuilderContext<SVGElement>? = null
175
)
176

177
/**
178
 * Text span element for styling portions of text
179
 * @param attrs Additional attributes including positioning and styling
180
 * @param content Text content or nested tspan elements
181
 */
182
@ExperimentalComposeWebSvgApi
183
fun Tspan(
184
    attrs: AttrBuilderContext<SVGElement>? = null,
185
    content: ContentBuilder<SVGElement>? = null
186
)
187
```
188

189
### SVG Structure Elements
190

191
Organizational elements for grouping and defining reusable graphics.
192

193
```kotlin { .api }
194
/**
195
 * Group element for organizing and transforming multiple elements
196
 * @param attrs Additional attributes including transform, fill, stroke
197
 * @param content Group content elements
198
 */
199
@ExperimentalComposeWebSvgApi
200
fun G(
201
    attrs: AttrBuilderContext<SVGElement>? = null,
202
    content: ContentBuilder<SVGElement>? = null
203
)
204

205
/**
206
 * Definitions container for reusable elements
207
 * @param attrs Additional attributes
208
 * @param content Definition elements (gradients, patterns, symbols, etc.)
209
 */
210
@ExperimentalComposeWebSvgApi
211
fun Defs(
212
    attrs: AttrBuilderContext<SVGElement>? = null,
213
    content: ContentBuilder<SVGElement>? = null
214
)
215

216
/**
217
 * Use element for instantiating defined elements
218
 * @param href Reference to element to instantiate (e.g., "#symbolId")
219
 * @param attrs Additional attributes including positioning and transforms
220
 * @param content Optional content
221
 */
222
@ExperimentalComposeWebSvgApi
223
fun Use(
224
    href: String,
225
    attrs: AttrBuilderContext<SVGElement>? = null,
226
    content: ContentBuilder<SVGElement>? = null
227
)
228

229
/**
230
 * Symbol element for defining reusable graphics
231
 * @param id Unique identifier for referencing
232
 * @param attrs Additional attributes including viewBox
233
 * @param content Symbol content elements
234
 */
235
@ExperimentalComposeWebSvgApi
236
fun Symbol(
237
    id: String? = null,
238
    attrs: AttrBuilderContext<SVGElement>? = null,
239
    content: ContentBuilder<SVGElement>? = null
240
)
241

242
/**
243
 * Marker element for line endings and decorations
244
 * @param attrs Additional attributes including markerWidth, markerHeight, orient
245
 * @param content Marker content
246
 */
247
@ExperimentalComposeWebSvgApi
248
fun Marker(
249
    attrs: AttrBuilderContext<SVGElement>? = null,
250
    content: ContentBuilder<SVGElement>? = null
251
)
252
```
253

254
### SVG Gradient Elements
255

256
Linear and radial gradients for advanced fill and stroke effects.
257

258
```kotlin { .api }
259
/**
260
 * Linear gradient definition
261
 * @param id Unique identifier for referencing
262
 * @param attrs Additional attributes including x1, y1, x2, y2, gradientUnits
263
 * @param content Stop elements defining gradient colors
264
 */
265
@ExperimentalComposeWebSvgApi
266
fun LinearGradient(
267
    id: String? = null,
268
    attrs: AttrBuilderContext<SVGElement>? = null,
269
    content: ContentBuilder<SVGElement>? = null
270
)
271

272
/**
273
 * Radial gradient definition
274
 * @param id Unique identifier for referencing
275
 * @param attrs Additional attributes including cx, cy, r, fx, fy, gradientUnits
276
 * @param content Stop elements defining gradient colors
277
 */
278
@ExperimentalComposeWebSvgApi
279
fun RadialGradient(
280
    id: String? = null,
281
    attrs: AttrBuilderContext<SVGElement>? = null,
282
    content: ContentBuilder<SVGElement>? = null
283
)
284

285
/**
286
 * Gradient stop element defining colors and positions
287
 * @param attrs Attributes including offset, stop-color, stop-opacity
288
 * @param content Optional content
289
 */
290
@ExperimentalComposeWebSvgApi
291
fun Stop(
292
    attrs: AttrBuilderContext<SVGElement>? = null,
293
    content: ContentBuilder<SVGElement>? = null
294
)
295
```
296

297
### SVG Effects Elements
298

299
Visual effects including clipping, masking, filters, and patterns.
300

301
```kotlin { .api }
302
/**
303
 * Clipping path definition for masking content
304
 * @param id Unique identifier for referencing
305
 * @param attrs Additional attributes including clipPathUnits
306
 * @param content Shape elements defining clipping area
307
 */
308
@ExperimentalComposeWebSvgApi
309
fun ClipPath(
310
    id: String,
311
    attrs: AttrBuilderContext<SVGElement>? = null,
312
    content: ContentBuilder<SVGElement>? = null
313
)
314

315
/**
316
 * Mask definition for transparency effects
317
 * @param id Unique identifier for referencing
318
 * @param attrs Additional attributes including maskUnits, maskContentUnits
319
 * @param content Mask content elements
320
 */
321
@ExperimentalComposeWebSvgApi
322
fun Mask(
323
    id: String? = null,
324
    attrs: AttrBuilderContext<SVGElement>? = null,
325
    content: ContentBuilder<SVGElement>? = null
326
)
327

328
/**
329
 * Filter definition for visual effects
330
 * @param attrs Additional attributes including id, filterUnits, primitiveUnits
331
 * @param content Filter primitive elements
332
 */
333
@ExperimentalComposeWebSvgApi
334
fun Filter(
335
    attrs: AttrBuilderContext<SVGElement>? = null,
336
    content: ContentBuilder<SVGElement>? = null
337
)
338

339
/**
340
 * Pattern definition for repeating graphics
341
 * @param id Unique identifier for referencing
342
 * @param attrs Additional attributes including patternUnits, patternContentUnits, width, height
343
 * @param content Pattern content elements
344
 */
345
@ExperimentalComposeWebSvgApi
346
fun Pattern(
347
    id: String,
348
    attrs: AttrBuilderContext<SVGElement>? = null,
349
    content: ContentBuilder<SVGElement>? = null
350
)
351
```
352

353
### SVG Animation Elements
354

355
Animation elements for creating dynamic SVG graphics.
356

357
```kotlin { .api }
358
/**
359
 * Animate element for animating attribute values
360
 * @param attrs Animation attributes including attributeName, values, dur, repeatCount
361
 * @param content Optional content
362
 */
363
@ExperimentalComposeWebSvgApi
364
fun Animate(
365
    attrs: AttrBuilderContext<SVGElement>? = null,
366
    content: ContentBuilder<SVGElement>? = null
367
)
368

369
/**
370
 * Animate motion element for path-based animation
371
 * @param attrs Animation attributes including path, dur, repeatCount
372
 * @param content Optional content including mpath
373
 */
374
@ExperimentalComposeWebSvgApi
375
fun AnimateMotion(
376
    attrs: AttrBuilderContext<SVGElement>? = null,
377
    content: ContentBuilder<SVGElement>? = null
378
)
379

380
/**
381
 * Animate transform element for transform animations
382
 * @param attrs Animation attributes including attributeName, type, values, dur
383
 * @param content Optional content
384
 */
385
@ExperimentalComposeWebSvgApi
386
fun AnimateTransform(
387
    attrs: AttrBuilderContext<SVGElement>? = null,
388
    content: ContentBuilder<SVGElement>? = null
389
)
390

391
/**
392
 * Set element for setting attribute values at specific times
393
 * @param attributeName Name of attribute to set
394
 * @param to Value to set
395
 * @param attrs Additional animation attributes
396
 * @param content Optional content
397
 */
398
@ExperimentalComposeWebSvgApi
399
fun Set(
400
    attributeName: String,
401
    to: String,
402
    attrs: AttrBuilderContext<SVGElement>? = null,
403
    content: ContentBuilder<SVGElement>? = null
404
)
405
```
406

407
### SVG Utility Elements
408

409
Additional utility elements for metadata and accessibility.
410

411
```kotlin { .api }
412
/**
413
 * Title element for accessibility and tooltips
414
 * @param text Title text content
415
 * @param attrs Additional attributes
416
 */
417
@ExperimentalComposeWebSvgApi
418
fun Title(
419
    text: String,
420
    attrs: AttrBuilderContext<SVGElement>? = null
421
)
422

423
/**
424
 * Description element for accessibility
425
 * @param content Description text content
426
 * @param attrs Additional attributes
427
 */
428
@ExperimentalComposeWebSvgApi
429
fun Desc(
430
    content: String,
431
    attrs: AttrBuilderContext<SVGElement>? = null
432
)
433

434
/**
435
 * Image element for embedding raster images in SVG
436
 * @param href Image source URL
437
 * @param attrs Additional attributes including x, y, width, height
438
 * @param content Optional content
439
 */
440
@ExperimentalComposeWebSvgApi
441
fun Image(
442
    href: String,
443
    attrs: AttrBuilderContext<SVGElement>? = null,
444
    content: ContentBuilder<SVGElement>? = null
445
)
446

447
/**
448
 * Switch element for conditional rendering
449
 * @param attrs Additional attributes
450
 * @param content Conditional content elements
451
 */
452
@ExperimentalComposeWebSvgApi
453
fun Switch(
454
    attrs: AttrBuilderContext<SVGElement>? = null,
455
    content: ContentBuilder<SVGElement>? = null
456
)
457

458
/**
459
 * View element for defining viewports
460
 * @param id Unique identifier
461
 * @param viewBox Viewport definition
462
 * @param attrs Additional attributes
463
 */
464
@ExperimentalComposeWebSvgApi
465
fun View(
466
    id: String,
467
    viewBox: String,
468
    attrs: AttrBuilderContext<SVGElement>? = null
469
)
470

471
/**
472
 * Motion path element for animation paths
473
 * @param attrs Path attributes including href
474
 * @param content Optional content
475
 */
476
@ExperimentalComposeWebSvgApi
477
fun Mpath(
478
    attrs: AttrBuilderContext<SVGElement>? = null,
479
    content: ContentBuilder<SVGElement>? = null
480
)
481
```
482

483
### Generic SVG Element
484

485
For creating any SVG element by name.
486

487
```kotlin { .api }
488
/**
489
 * Generic SVG element creator
490
 * @param name SVG element name
491
 * @param attrs Additional attributes
492
 * @param content Element content
493
 */
494
@ExperimentalComposeWebSvgApi
495
fun SvgElement(
496
    name: String,
497
    attrs: AttrBuilderContext<SVGElement>? = null,
498
    content: ContentBuilder<SVGElement>? = null
499
)
500
```
501

502
**Usage Examples:**
503

504
```kotlin
505
import org.jetbrains.compose.web.svg.*
506
import org.jetbrains.compose.web.dom.*
507

508
// Basic SVG shapes
509
Div {
510
    Svg(viewBox = "0 0 200 200", {
511
        attr("width", "200")
512
        attr("height", "200")
513
        style { border(1.px, LineStyle.Solid, Color.black) }
514
    }) {
515
        // Circle with gradient fill
516
        Circle(cx = 50, cy = 50, r = 30, {
517
            attr("fill", "url(#redGradient)")
518
            attr("stroke", "blue")
519
            attr("stroke-width", "2")
520
        })
521
        
522
        // Rectangle with rounded corners
523
        Rect(x = 100, y = 20, width = 60, height = 60, {
524
            attr("rx", "10")
525
            attr("ry", "10")
526
            attr("fill", "green")
527
            attr("opacity", "0.7")
528
        })
529
        
530
        // Triangle using polygon
531
        Polygon(
532
            25 to 150, 75 to 150, 50 to 100,
533
            attrs = {
534
                attr("fill", "orange")
535
                attr("stroke", "red")
536
                attr("stroke-width", "2")
537
            }
538
        )
539
        
540
        // Complex path
541
        Path(d = "M 100 150 Q 150 100 200 150 T 250 150", {
542
            attr("fill", "none")
543
            attr("stroke", "purple")
544
            attr("stroke-width", "3")
545
        })
546
    }
547
}
548

549
// SVG with gradients and text
550
Div {
551
    Svg(viewBox = "0 0 300 200") {
552
        // Define gradients in defs
553
        Defs {
554
            LinearGradient(id = "blueGradient", {
555
                attr("x1", "0%")
556
                attr("y1", "0%")
557
                attr("x2", "100%")
558
                attr("y2", "100%")
559
            }) {
560
                Stop({ attr("offset", "0%"); attr("stop-color", "lightblue") })
561
                Stop({ attr("offset", "100%"); attr("stop-color", "darkblue") })
562
            }
563
            
564
            RadialGradient(id = "sunGradient", {
565
                attr("cx", "50%")
566
                attr("cy", "50%")
567
                attr("r", "50%")
568
            }) {
569
                Stop({ attr("offset", "0%"); attr("stop-color", "yellow") })
570
                Stop({ attr("offset", "100%"); attr("stop-color", "orange") })
571
            }
572
        }
573
        
574
        // Background rectangle
575
        Rect(x = 0, y = 0, width = 300, height = 200, {
576
            attr("fill", "url(#blueGradient)")
577
        })
578
        
579
        // Sun
580
        Circle(cx = 250, cy = 50, r = 30, {
581
            attr("fill", "url(#sunGradient)")
582
        })
583
        
584
        // Mountain using polygon
585
        Polygon(
586
            0 to 200, 100 to 120, 200 to 140, 300 to 200,
587
            attrs = { attr("fill", "brown") }
588
        )
589
        
590
        // Text
591
        SvgText("Beautiful Landscape", x = 50, y = 180, {
592
            attr("font-family", "serif")
593
            attr("font-size", "18")
594
            attr("fill", "white")
595
        })
596
    }
597
}
598

599
// Interactive SVG with events
600
var circleColor by remember { mutableStateOf("red") }
601

602
Div {
603
    Svg(viewBox = "0 0 200 200") {
604
        Circle(cx = 100, cy = 100, r = 50, {
605
            attr("fill", circleColor)
606
            attr("cursor", "pointer")
607
            
608
            onClick {
609
                circleColor = if (circleColor == "red") "blue" else "red"
610
            }
611
            
612
            onMouseEnter {
613
                // Could trigger hover effects
614
            }
615
        })
616
        
617
        SvgText("Click the circle!", x = 100, y = 180, {
618
            attr("text-anchor", "middle")
619
            attr("font-family", "sans-serif")
620
        })
621
    }
622
}
623

624
// SVG icon system using symbols
625
Div {
626
    // Define icons in hidden SVG
627
    Svg({
628
        attr("width", "0")
629
        attr("height", "0")
630
        style { display(DisplayStyle.None) }
631
    }) {
632
        Defs {
633
            Symbol(id = "homeIcon", {
634
                attr("viewBox", "0 0 24 24")
635
            }) {
636
                Path(d = "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z", {
637
                    attr("fill", "currentColor")
638
                })
639
            }
640
            
641
            Symbol(id = "userIcon", {
642
                attr("viewBox", "0 0 24 24")
643
            }) {
644
                Circle(cx = 12, cy = 7, r = 4, {
645
                    attr("fill", "currentColor")
646
                })
647
                Path(d = "M12 14c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z", {
648
                    attr("fill", "currentColor")
649
                })
650
            }
651
        }
652
    }
653
    
654
    // Use the icons
655
    P {
656
        Svg({
657
            attr("width", "24")
658
            attr("height", "24")
659
            style { color(Color.blue) }
660
        }) {
661
            Use(href = "#homeIcon")
662
        }
663
        Text(" Home")
664
    }
665
    
666
    P {
667
        Svg({
668
            attr("width", "24")
669
            attr("height", "24")
670
            style { color(Color.green) }
671
        }) {
672
            Use(href = "#userIcon")
673
        }
674
        Text(" User Profile")
675
    }
676
}
677

678
// Animated SVG
679
Div {
680
    Svg(viewBox = "0 0 200 200") {
681
        Circle(cx = 100, cy = 100, r = 20, {
682
            attr("fill", "red")
683
        }) {
684
            // Animate position
685
            AnimateMotion({
686
                attr("dur", "3s")
687
                attr("repeatCount", "indefinite")
688
                attr("path", "M 50 100 Q 100 50 150 100 Q 100 150 50 100")
689
            })
690
            
691
            // Animate radius
692
            Animate({
693
                attr("attributeName", "r")
694
                attr("values", "20;40;20")
695
                attr("dur", "2s")
696
                attr("repeatCount", "indefinite")
697
            })
698
        }
699
        
700
        // Rotating rectangle
701
        Rect(x = 80, y = 20, width = 40, height = 40, {
702
            attr("fill", "blue")
703
            attr("transform-origin", "100 40")
704
        }) {
705
            AnimateTransform({
706
                attr("attributeName", "transform")
707
                attr("type", "rotate")
708
                attr("values", "0;360")
709
                attr("dur", "4s")
710
                attr("repeatCount", "indefinite")
711
            })
712
        }
713
    }
714
}
715
```