0
# SVG Graphics
1

2
SVG elements for vector graphics creation with automatic attribute name conversion (underscore to dash) and support for shapes, paths, gradients, filters, and animations.
3

4
## Capabilities
5

6
### Base SVG Tag Class
7

8
Foundation class for all SVG elements with automatic attribute name conversion for SVG-specific naming conventions.
9

10
```python { .api }
11
class svg_tag(html_tag):
12
    @staticmethod
13
    def clean_attribute(attribute):
14
        """
15
        Convert Python attribute names to SVG attribute names.
16
        Converts underscore-separated names to dash-separated for SVG attributes.
17
        
18
        Parameters:
19
        - attribute (str): Python attribute name
20
        
21
        Returns:
22
        - str: SVG-compatible attribute name
23
        """
24
```
25

26
#### Usage Example
27

28
```python
29
from dominate.svg import *
30

31
# Attributes with underscores become dashes
32
circle_element = circle(stroke_width='2', fill_opacity='0.5')
33
# Renders as: <circle stroke-width="2" fill-opacity="0.5"></circle>
34
```
35

36
### Core SVG Elements
37

38
Root SVG container and basic grouping elements.
39

40
```python { .api }
41
def svg(*args, **kwargs): ...     # Root SVG element
42
def g(*args, **kwargs): ...       # Grouping element
43
def defs(*args, **kwargs): ...    # Definitions container
44
def use(*args, **kwargs): ...     # Element reuse
45
def symbol(*args, **kwargs): ... # Reusable graphics symbol
46
def switch(*args, **kwargs): ...  # Conditional rendering
47
def view(*args, **kwargs): ...    # View definition
48
```
49

50
#### Usage Example
51

52
```python
53
# Basic SVG structure
54
svg_graphic = svg(
55
    defs(
56
        # Define reusable elements
57
        symbol(
58
            circle(r='10', fill='red'),
59
            id='red-dot'
60
        )
61
    ),
62
    g(
63
        # Group related elements
64
        use(href='#red-dot', x='10', y='10'),
65
        use(href='#red-dot', x='30', y='30'),
66
        transform='scale(2)'
67
    ),
68
    viewBox='0 0 100 100',
69
    width='200',
70
    height='200'
71
)
72
```
73

74
### Basic Shapes
75

76
Fundamental SVG shape elements for creating geometric graphics.
77

78
```python { .api }
79
def circle(*args, **kwargs): ...   # Circle shape
80
def ellipse(*args, **kwargs): ...  # Ellipse shape
81
def rect(*args, **kwargs): ...     # Rectangle shape
82
def line(*args, **kwargs): ...     # Line shape
83
def polygon(*args, **kwargs): ...  # Polygon shape
84
def polyline(*args, **kwargs): ... # Polyline shape
85
def path(*args, **kwargs): ...     # Complex path shape
86
```
87

88
#### Usage Example
89

90
```python
91
# Basic shapes
92
shapes = svg(
93
    # Circle
94
    circle(cx='50', cy='50', r='20', fill='blue', stroke='black', stroke_width='2'),
95
    
96
    # Rectangle
97
    rect(x='10', y='80', width='40', height='20', fill='green', rx='5'),
98
    
99
    # Ellipse
100
    ellipse(cx='120', cy='50', rx='30', ry='15', fill='yellow'),
101
    
102
    # Line
103
    line(x1='0', y1='0', x2='100', y2='100', stroke='red', stroke_width='3'),
104
    
105
    # Polygon
106
    polygon(points='150,10 180,40 150,70 120,40', fill='purple'),
107
    
108
    # Complex path
109
    path(d='M 200,50 Q 220,10 240,50 T 280,50', stroke='orange', fill='none'),
110
    
111
    viewBox='0 0 300 150'
112
)
113
```
114

115
### Text Elements
116

117
SVG text rendering with path-following capabilities.
118

119
```python { .api }
120
def text(*args, **kwargs): ...     # Text content
121
def textPath(*args, **kwargs): ... # Text following a path
122
def tspan(*args, **kwargs): ...    # Text span within text
123
def title(*args, **kwargs): ...    # Accessible title
124
def desc(*args, **kwargs): ...     # Accessible description
125
```
126

127
#### Usage Example
128

129
```python
130
# SVG text
131
text_graphic = svg(
132
    defs(
133
        path(d='M 10,50 Q 50,10 90,50', id='text-path')
134
    ),
135
    text(
136
        'Hello SVG World!',
137
        x='10', y='30',
138
        font_family='Arial',
139
        font_size='16',
140
        fill='blue'
141
    ),
142
    text(
143
        textPath(
144
            'Text following a curved path',
145
            href='#text-path'
146
        ),
147
        font_size='12'
148
    ),
149
    text(
150
        'Multi-span text with ',
151
        tspan('different', fill='red', font_weight='bold'),
152
        tspan(' styles', fill='green', font_style='italic'),
153
        x='10', y='80'
154
    ),
155
    title('SVG Text Example'),
156
    desc('Demonstrates various SVG text capabilities'),
157
    viewBox='0 0 200 100'
158
)
159
```
160

161
### Gradients and Patterns
162

163
Fill and stroke definitions for advanced styling.
164

165
```python { .api }
166
def linearGradient(*args, **kwargs): ... # Linear gradient
167
def radialGradient(*args, **kwargs): ... # Radial gradient
168
def pattern(*args, **kwargs): ...        # Pattern definition
169
def stop(*args, **kwargs): ...           # Gradient color stop
170
```
171

172
#### Usage Example
173

174
```python
175
# Gradients and patterns
176
styled_graphics = svg(
177
    defs(
178
        # Linear gradient
179
        linearGradient(
180
            stop(offset='0%', stop_color='red'),
181
            stop(offset='50%', stop_color='yellow'),
182
            stop(offset='100%', stop_color='blue'),
183
            id='linear-grad',
184
            x1='0%', y1='0%', x2='100%', y2='0%'
185
        ),
186
        
187
        # Radial gradient
188
        radialGradient(
189
            stop(offset='0%', stop_color='white'),
190
            stop(offset='100%', stop_color='black'),
191
            id='radial-grad',
192
            cx='50%', cy='50%', r='50%'
193
        ),
194
        
195
        # Pattern
196
        pattern(
197
            rect(width='10', height='10', fill='lightblue'),
198
            circle(cx='5', cy='5', r='3', fill='darkblue'),
199
            id='dot-pattern',
200
            patternUnits='userSpaceOnUse',
201
            width='10', height='10'
202
        )
203
    ),
204
    
205
    # Use gradients and patterns
206
    rect(x='10', y='10', width='60', height='40', fill='url(#linear-grad)'),
207
    circle(cx='120', cy='30', r='25', fill='url(#radial-grad)'),
208
    rect(x='160', y='10', width='60', height='40', fill='url(#dot-pattern)'),
209
    
210
    viewBox='0 0 240 60'
211
)
212
```
213

214
### Clipping and Masking
215

216
Advanced graphics manipulation for complex visual effects.
217

218
```python { .api }
219
def clipPath(*args, **kwargs): ... # Clipping path definition
220
def mask(*args, **kwargs): ...     # Masking definition
221
```
222

223
#### Usage Example
224

225
```python
226
# Clipping and masking
227
clipped_graphics = svg(
228
    defs(
229
        # Clipping path
230
        clipPath(
231
            circle(cx='50', cy='50', r='40'),
232
            id='circle-clip'
233
        ),
234
        
235
        # Mask
236
        mask(
237
            rect(width='100', height='100', fill='white'),
238
            circle(cx='50', cy='50', r='20', fill='black'),
239
            id='hole-mask'
240
        )
241
    ),
242
    
243
    # Apply clipping
244
    g(
245
        rect(x='0', y='0', width='100', height='100', fill='red'),
246
        clip_path='url(#circle-clip)'
247
    ),
248
    
249
    # Apply masking
250
    g(
251
        rect(x='110', y='0', width='100', height='100', fill='blue'),
252
        mask='url(#hole-mask)'
253
    ),
254
    
255
    viewBox='0 0 220 110'
256
)
257
```
258

259
### Markers
260

261
Arrowheads and decorative markers for paths and lines.
262

263
```python { .api }
264
def marker(*args, **kwargs): ... # Marker definition
265
```
266

267
#### Usage Example
268

269
```python
270
# Markers
271
marked_lines = svg(
272
    defs(
273
        marker(
274
            path(d='M 0,0 L 10,5 L 0,10 z', fill='red'),
275
            id='arrowhead',
276
            markerWidth='10',
277
            markerHeight='10',
278
            refX='10',
279
            refY='5',
280
            orient='auto'
281
        )
282
    ),
283
    
284
    line(
285
        x1='10', y1='10', x2='90', y2='50',
286
        stroke='black',
287
        stroke_width='2',
288
        marker_end='url(#arrowhead)'
289
    ),
290
    
291
    viewBox='0 0 100 60'
292
)
293
```
294

295
### Animation Elements
296

297
SVG animation capabilities for dynamic graphics.
298

299
```python { .api }
300
def animate(*args, **kwargs): ...          # Attribute animation
301
def animateMotion(*args, **kwargs): ...    # Motion animation
302
def animateTransform(*args, **kwargs): ... # Transform animation (self-closing)
303
def mpath(*args, **kwargs): ...            # Motion path reference
304
```
305

306
#### Usage Example
307

308
```python
309
# Animated SVG
310
animated_graphics = svg(
311
    circle(
312
        cx='50', cy='50', r='20', fill='blue',
313
        animate(
314
            attributeName='r',
315
            values='20;30;20',
316
            dur='2s',
317
            repeatCount='indefinite'
318
        )
319
    ),
320
    
321
    rect(
322
        x='100', y='40', width='20', height='20', fill='red',
323
        animateTransform(
324
            attributeName='transform',
325
            type='rotate',
326
            values='0 110 50;360 110 50',
327
            dur='3s',
328
            repeatCount='indefinite'
329
        )
330
    ),
331
    
332
    circle(
333
        cx='0', cy='0', r='5', fill='green',
334
        animateMotion(
335
            dur='4s',
336
            repeatCount='indefinite',
337
            mpath(href='#motion-path')
338
        )
339
    ),
340
    
341
    # Hidden path for motion
342
    defs(
343
        path(d='M 200,50 Q 250,20 300,50 Q 250,80 200,50', id='motion-path')
344
    ),
345
    
346
    viewBox='0 0 350 100'
347
)
348
```
349

350
### Filter Effects
351

352
Advanced visual effects and filters for graphics enhancement.
353

354
```python { .api }
355
def filter(*args, **kwargs): ...             # Filter container
356

357
# Filter primitives
358
def feBlend(*args, **kwargs): ...            # Blending
359
def feColorMatrix(*args, **kwargs): ...      # Color transformation
360
def feComponentTransfer(*args, **kwargs): ... # Component transfer
361
def feComposite(*args, **kwargs): ...        # Compositing
362
def feConvolveMatrix(*args, **kwargs): ...   # Convolution
363
def feDiffuseLighting(*args, **kwargs): ...  # Diffuse lighting
364
def feDisplacementMap(*args, **kwargs): ...  # Displacement mapping
365
def feFlood(*args, **kwargs): ...            # Flood fill
366
def feGaussianBlur(*args, **kwargs): ...     # Gaussian blur
367
def feImage(*args, **kwargs): ...            # Image source
368
def feMerge(*args, **kwargs): ...            # Merge multiple inputs
369
def feMorphology(*args, **kwargs): ...       # Morphological operations
370
def feOffset(*args, **kwargs): ...           # Offset
371
def feSpecularLighting(*args, **kwargs): ... # Specular lighting
372
def feTile(*args, **kwargs): ...             # Tiling
373
def feTurbulence(*args, **kwargs): ...       # Turbulence generation
374

375
# Lighting sources
376
def feDistantLight(*args, **kwargs): ...     # Distant light source
377
def fePointLight(*args, **kwargs): ...       # Point light source
378
def feSpotLight(*args, **kwargs): ...        # Spot light source
379
```
380

381
#### Usage Example
382

383
```python
384
# Filter effects
385
filtered_graphics = svg(
386
    defs(
387
        filter(
388
            feGaussianBlur(stdDeviation='3', in_='SourceGraphic'),
389
            id='blur-filter'
390
        ),
391
        
392
        filter(
393
            feOffset(dx='3', dy='3', in_='SourceGraphic', result='offset'),
394
            feGaussianBlur(stdDeviation='2', in_='offset', result='shadow'),
395
            feFlood(flood_color='black', flood_opacity='0.3', result='flood'),
396
            feComposite(in_='flood', in2='shadow', operator='in', result='shadow'),
397
            feMerge(
398
                feMergeNode(in_='shadow'),
399
                feMergeNode(in_='SourceGraphic')
400
            ),
401
            id='drop-shadow'
402
        )
403
    ),
404
    
405
    # Apply filters
406
    rect(x='10', y='10', width='80', height='40', fill='blue', filter='url(#blur-filter)'),
407
    text('Drop Shadow', x='120', y='35', font_size='16', filter='url(#drop-shadow)'),
408
    
409
    viewBox='0 0 250 60'
410
)
411
```
412

413
## Complete SVG Example
414

415
```python
416
from dominate.svg import *
417

418
# Complete SVG graphic with multiple features
419
complete_svg = svg(
420
    # Definitions
421
    defs(
422
        # Gradient
423
        linearGradient(
424
            stop(offset='0%', stop_color='#ff6b6b'),
425
            stop(offset='100%', stop_color='#4ecdc4'),
426
            id='main-gradient',
427
            x1='0%', y1='0%', x2='100%', y2='100%'
428
        ),
429
        
430
        # Pattern
431
        pattern(
432
            rect(width='20', height='20', fill='#f0f0f0'),
433
            circle(cx='10', cy='10', r='5', fill='#333'),
434
            id='dot-bg',
435
            patternUnits='userSpaceOnUse',
436
            width='20', height='20'
437
        ),
438
        
439
        # Filter
440
        filter(
441
            feGaussianBlur(stdDeviation='2'),
442
            id='soft-glow'
443
        )
444
    ),
445
    
446
    # Background
447
    rect(x='0', y='0', width='100%', height='100%', fill='url(#dot-bg)'),
448
    
449
    # Main graphics
450
    g(
451
        circle(
452
            cx='150', cy='100', r='60',
453
            fill='url(#main-gradient)',
454
            stroke='white',
455
            stroke_width='4',
456
            filter='url(#soft-glow)'
457
        ),
458
        
459
        text(
460
            'SVG Graphics',
461
            x='150', y='110',
462
            text_anchor='middle',
463
            font_family='Arial, sans-serif',
464
            font_size='16',
465
            font_weight='bold',
466
            fill='white'
467
        ),
468
        
469
        # Animated element
470
        rect(
471
            x='100', y='200', width='100', height='20',
472
            fill='#ff6b6b',
473
            animateTransform(
474
                attributeName='transform',
475
                type='scale',
476
                values='1;1.1;1',
477
                dur='2s',
478
                repeatCount='indefinite'
479
            )
480
        )
481
    ),
482
    
483
    # Metadata
484
    title('Complete SVG Example'),
485
    desc('Demonstrates gradients, patterns, filters, and animation'),
486
    
487
    # SVG attributes
488
    viewBox='0 0 300 250',
489
    width='600',
490
    height='500',
491
    xmlns='http://www.w3.org/2000/svg'
492
)
493
```