···

       
101
       
 
       


     

       
102
       
 
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example1.png)](https://github.com/cduck/drawsvg/blob/master/examples/example1.svg)

     

       
103
       
 
       


     

       
104
       
-
       
### SVG-Native Animation with playback controls

     

       
105
       
 
       
```python

     

       
106
       
 
       
import drawsvg as draw

     

       
107
       
 
       


     
···

       
188
       
 
       


     

       
189
       
 
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example2.png)](https://github.com/cduck/drawsvg/blob/master/examples/example2.svg)

     

       
190
       
 
       


     

       
191
       
-
       
### Duplicate geometry and clip paths

     

       
192
       
 
       
```python

     

       
193
       
 
       
import drawsvg as draw

     

       
194
       
 
       


     
···

       
206
       
 
       


     

       
207
       
 
       
# Make a transparent copy, cropped again

     

       
208
       
 
       
g = draw.Group(opacity=0.5, clip_path=clip)

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
209
       
 
       
g.append(draw.Use(circle, 0.25, -0.1))

     

       
210
       
 
       
d.append(g)

     

       
211
       
 
       


     
···

       
215
       
 
       
```

     

       
216
       
 
       


     

       
217
       
 
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example3.png)](https://github.com/cduck/drawsvg/blob/master/examples/example3.svg)

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
218
       
 
       


     

       
219
       
 
       
### Implementing other SVG tags

     

       
220
       
 
       
```python

     

···

       
101
       
 
       


     

       
102
       
 
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example1.png)](https://github.com/cduck/drawsvg/blob/master/examples/example1.svg)

     

       
103
       
 
       


     

       
104
       
+
       
### SVG-native animation with playback controls

     

       
105
       
 
       
```python

     

       
106
       
 
       
import drawsvg as draw

     

       
107
       
 
       


     
···

       
188
       
 
       


     

       
189
       
 
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example2.png)](https://github.com/cduck/drawsvg/blob/master/examples/example2.svg)

     

       
190
       
 
       


     

       
191
       
+
       
### Duplicate geometry, clip paths

     

       
192
       
 
       
```python

     

       
193
       
 
       
import drawsvg as draw

     

       
194
       
 
       


     
···

       
206
       
 
       


     

       
207
       
 
       
# Make a transparent copy, cropped again

     

       
208
       
 
       
g = draw.Group(opacity=0.5, clip_path=clip)

     

       
209
       
+
       
# Here, circle is not directly appended to the drawing.

     

       
210
       
+
       
# drawsvg recognizes that `Use` references `circle` and automatically adds

     

       
211
       
+
       
# `circle` to the <defs></defs> section of the SVG.

     

       
212
       
 
       
g.append(draw.Use(circle, 0.25, -0.1))

     

       
213
       
 
       
d.append(g)

     

       
214
       
 
       


     
···

       
218
       
 
       
```

     

       
219
       
 
       


     

       
220
       
 
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example3.png)](https://github.com/cduck/drawsvg/blob/master/examples/example3.svg)

     

       
221
       
+
       


     

       
222
       
+
       
### Organizing and duplicating drawing elements

     

       
223
       
+
       
```python

     

       
224
       
+
       
import drawsvg as draw

     

       
225
       
+
       


     

       
226
       
+
       
d = draw.Drawing(300, 100)

     

       
227
       
+
       
d.set_pixel_scale(2)

     

       
228
       
+
       


     

       
229
       
+
       
# Use groups to contain other elements

     

       
230
       
+
       
# Children elements of groups inherit the coordinate system (transform)

     

       
231
       
+
       
# and attribute values

     

       
232
       
+
       
group = draw.Group(fill='orange', transform='rotate(-20)')

     

       
233
       
+
       
group.append(draw.Rectangle(0, 10, 20, 40))  # This rectangle will be orange

     

       
234
       
+
       
group.append(draw.Circle(30, 40, 10))  # This circle will also be orange

     

       
235
       
+
       
group.append(draw.Circle(50, 40, 10, fill='green'))  # This circle will not

     

       
236
       
+
       
d.append(group)

     

       
237
       
+
       


     

       
238
       
+
       
# Use the Use element to make duplicates of elements

     

       
239
       
+
       
# Each duplicate can be placed at an offset (x, y) location and any additional

     

       
240
       
+
       
# attributes (like fill color) are inherited if the element didn't specify them.

     

       
241
       
+
       
d.append(draw.Use(group, 80, 0, stroke='black', stroke_width=1))

     

       
242
       
+
       
d.append(draw.Use(group, 80, 20, stroke='blue', stroke_width=2))

     

       
243
       
+
       
d.append(draw.Use(group, 80, 40, stroke='red', stroke_width=3))

     

       
244
       
+
       


     

       
245
       
+
       
d.display_inline()

     

       
246
       
+
       
```

     

       
247
       
+
       


     

       
248
       
+
       
[![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example8.png)](https://github.com/cduck/drawsvg/blob/master/examples/example8.svg)

     

       
249
       
 
       


     

       
250
       
 
       
### Implementing other SVG tags

     

       
251
       
 
       
```python

     

···

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
+
       
<?xml version="1.0" encoding="UTF-8"?>

     

       
2
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       
3
       
+
       
    width="600" height="200" viewBox="0 0 300 100">

     

       
4
       
+
       
<defs>

     

       
5
       
+
       
<g fill="orange" transform="rotate(-20)" id="d0">

     

       
6
       
+
       
<rect x="0" y="10" width="20" height="40" />

     

       
7
       
+
       
<circle cx="30" cy="40" r="10" />

     

       
8
       
+
       
<circle cx="50" cy="40" r="10" fill="green" />

     

       
9
       
+
       
</g>

     

       
10
       
+
       
</defs>

     

       
11
       
+
       
<use xlink:href="#d0" />

     

       
12
       
+
       
<use xlink:href="#d0" x="80" y="0" stroke="black" stroke-width="1" />

     

       
13
       
+
       
<use xlink:href="#d0" x="80" y="20" stroke="blue" stroke-width="2" />

     

       
14
       
+
       
<use xlink:href="#d0" x="80" y="40" stroke="red" stroke-width="3" />

     

       
15
       
+
       
</svg>