or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

advanced.mdcore.mdindex.mdshapes.mdtext.mdutilities.md

advanced.mddocs/

0

# Advanced Features

1

2

Professional graphics capabilities including gradients, patterns, filters, animations, and masking effects for creating sophisticated SVG graphics.

3

4

## Capabilities

5

6

### Gradient Paint Servers

7

8

Advanced color gradient systems for creating smooth color transitions and professional visual effects.

9

10

```python { .api }

11

def linearGradient(start=None, end=None, inherit=None, **extra):

12

"""

13

Create linear color gradient between two points

14

15

Args:

16

start: Starting point as (x1, y1) tuple (default: None)

17

end: Ending point as (x2, y2) tuple (default: None)

18

inherit: Inherit from another gradient reference (default: None)

19

**extra: Additional SVG attributes (gradientUnits, spreadMethod, etc.)

20

21

Returns:

22

LinearGradient: Linear gradient element with gradient methods

23

"""

24

25

def radialGradient(center=None, r=None, focal=None, inherit=None, **extra):

26

"""

27

Create radial color gradient from center point

28

29

Args:

30

center: Center point as (cx, cy) tuple (default: None)

31

r: Gradient radius (default: None)

32

focal: Focal point as (fx, fy) tuple (default: None)

33

inherit: Inherit from another gradient reference (default: None)

34

**extra: Additional SVG attributes (gradientUnits, spreadMethod, etc.)

35

36

Returns:

37

RadialGradient: Radial gradient element with gradient methods

38

"""

39

40

# Gradient methods (available on both linear and radial gradients)

41

def add_stop_color(offset=None, color=None, opacity=None):

42

"""

43

Add color stop to gradient

44

45

Args:

46

offset: Position along gradient (0.0 to 1.0 or percentage)

47

color: Color value at this stop

48

opacity: Color opacity at this stop (default: None)

49

"""

50

51

def add_colors(colors, sweep=(0., 1.), opacity=None):

52

"""

53

Add multiple colors with automatic linear distribution

54

55

Args:

56

colors: List of color values

57

sweep: Range tuple (start, end) for color distribution (default: (0., 1.))

58

opacity: Opacity value or list of opacities (default: None)

59

"""

60

61

def get_paint_server(default='none'):

62

"""

63

Get functional IRI reference for use in fill or stroke

64

65

Args:

66

default: Fallback value if gradient not available (default: 'none')

67

68

Returns:

69

str: FuncIRI reference like 'url(#gradient-id)'

70

"""

71

```

72

73

**Usage Examples:**

74

75

```python

76

import svgwrite

77

78

dwg = svgwrite.Drawing('gradients.svg', size=('400px', '300px'))

79

80

# Create definitions container

81

defs = dwg.defs()

82

83

# Linear gradient from red to blue

84

linear_grad = dwg.linearGradient(start=(0, 0), end=(100, 0), id='linear1')

85

linear_grad.add_stop_color(0, 'red')

86

linear_grad.add_stop_color(0.5, 'yellow')

87

linear_grad.add_stop_color(1, 'blue')

88

defs.add(linear_grad)

89

90

# Radial gradient with opacity

91

radial_grad = dwg.radialGradient(center=(50, 50), r=40, id='radial1')

92

radial_grad.add_stop_color(0, 'white', opacity=1.0)

93

radial_grad.add_stop_color(1, 'black', opacity=0.3)

94

defs.add(radial_grad)

95

96

# Multi-color gradient using add_colors

97

rainbow_grad = dwg.linearGradient(start=(0, 0), end=(200, 0), id='rainbow')

98

rainbow_colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

99

rainbow_grad.add_colors(rainbow_colors)

100

defs.add(rainbow_grad)

101

102

dwg.add(defs)

103

104

# Apply gradients to shapes

105

linear_rect = dwg.rect(insert=(20, 20), size=(150, 60),

106

fill=linear_grad.get_paint_server())

107

dwg.add(linear_rect)

108

109

radial_circle = dwg.circle(center=(300, 70), r=50,

110

fill=radial_grad.get_paint_server())

111

dwg.add(radial_circle)

112

113

rainbow_rect = dwg.rect(insert=(50, 150), size=(300, 40),

114

fill=rainbow_grad.get_paint_server())

115

dwg.add(rainbow_rect)

116

117

# Gradient with custom spread method

118

spread_grad = dwg.linearGradient(start=(0, 0), end=(50, 0), id='spread',

119

spreadMethod='reflect')

120

spread_grad.add_stop_color(0, 'purple')

121

spread_grad.add_stop_color(1, 'cyan')

122

defs.add(spread_grad)

123

124

spread_rect = dwg.rect(insert=(50, 220), size=(200, 50),

125

fill=spread_grad.get_paint_server())

126

dwg.add(spread_rect)

127

```

128

129

### Patterns

130

131

Repeating pattern definitions for complex fill and stroke effects.

132

133

```python { .api }

134

def pattern(insert=None, size=None, inherit=None, **extra):

135

"""

136

Create repeating pattern for fill and stroke

137

138

Args:

139

insert: Pattern origin as (x, y) tuple (default: None)

140

size: Pattern tile size as (width, height) tuple (default: None)

141

inherit: Inherit from another pattern reference (default: None)

142

**extra: Additional SVG attributes (patternUnits, patternTransform, etc.)

143

144

Returns:

145

Pattern: Pattern element with ViewBox, Transform, and Presentation mixins

146

"""

147

148

def get_paint_server(default='none'):

149

"""

150

Get functional IRI reference for use in fill or stroke

151

152

Args:

153

default: Fallback value if pattern not available (default: 'none')

154

155

Returns:

156

str: FuncIRI reference like 'url(#pattern-id)'

157

"""

158

```

159

160

**Usage Examples:**

161

162

```python

163

import svgwrite

164

165

dwg = svgwrite.Drawing('patterns.svg', size=('400px', '300px'))

166

167

defs = dwg.defs()

168

169

# Checkerboard pattern

170

checker_pattern = dwg.pattern(insert=(0, 0), size=(20, 20), id='checkerboard')

171

checker_pattern.add(dwg.rect((0, 0), (10, 10), fill='black'))

172

checker_pattern.add(dwg.rect((10, 10), (10, 10), fill='black'))

173

checker_pattern.add(dwg.rect((0, 10), (10, 10), fill='white'))

174

checker_pattern.add(dwg.rect((10, 0), (10, 10), fill='white'))

175

defs.add(checker_pattern)

176

177

# Dot pattern

178

dot_pattern = dwg.pattern(insert=(0, 0), size=(15, 15), id='dots')

179

dot_pattern.add(dwg.circle((7.5, 7.5), 3, fill='red'))

180

defs.add(dot_pattern)

181

182

# Stripe pattern with gradient

183

stripe_pattern = dwg.pattern(insert=(0, 0), size=(10, 10), id='stripes')

184

stripe_gradient = dwg.linearGradient((0, 0), (10, 0), id='stripe-grad')

185

stripe_gradient.add_stop_color(0, 'blue')

186

stripe_gradient.add_stop_color(1, 'lightblue')

187

defs.add(stripe_gradient)

188

189

stripe_pattern.add(dwg.rect((0, 0), (5, 10), fill=stripe_gradient.get_paint_server()))

190

stripe_pattern.add(dwg.rect((5, 0), (5, 10), fill='white'))

191

defs.add(stripe_pattern)

192

193

dwg.add(defs)

194

195

# Apply patterns to shapes

196

checker_rect = dwg.rect(insert=(20, 20), size=(120, 80),

197

fill=checker_pattern.get_paint_server(),

198

stroke='black', stroke_width=2)

199

dwg.add(checker_rect)

200

201

dot_circle = dwg.circle(center=(250, 60), r=40,

202

fill=dot_pattern.get_paint_server(),

203

stroke='darkred', stroke_width=2)

204

dwg.add(dot_circle)

205

206

stripe_ellipse = dwg.ellipse(center=(200, 180), r=(80, 40),

207

fill=stripe_pattern.get_paint_server())

208

dwg.add(stripe_ellipse)

209

```

210

211

### Animation Elements

212

213

SVG animation system for creating dynamic and interactive graphics.

214

215

```python { .api }

216

def animate(attributeName=None, values=None, href=None, **extra):

217

"""

218

Create attribute interpolation animation

219

220

Args:

221

attributeName: SVG attribute to animate

222

values: Semicolon-separated list of values (default: None)

223

href: Target element reference (default: None)

224

**extra: Animation timing attributes (dur, begin, end, etc.)

225

226

Returns:

227

Animate: Animation element with timing control methods

228

"""

229

230

def set(href=None, **extra):

231

"""

232

Create simple attribute value setting animation

233

234

Args:

235

href: Target element reference (default: None)

236

**extra: Animation and timing attributes

237

238

Returns:

239

Set: Set animation element with timing methods

240

"""

241

242

def animateColor(attributeName=None, values=None, href=None, **extra):

243

"""

244

Create color transformation animation

245

246

Args:

247

attributeName: Color attribute to animate (fill, stroke, etc.)

248

values: Semicolon-separated color values (default: None)

249

href: Target element reference (default: None)

250

**extra: Animation timing attributes

251

252

Returns:

253

AnimateColor: Color animation element

254

"""

255

256

def animateTransform(transform, element=None, **extra):

257

"""

258

Create transform attribute animation

259

260

Args:

261

transform: Transform type ('translate', 'scale', 'rotate', 'skewX', 'skewY')

262

element: Target element reference (default: None)

263

**extra: Transform values and timing attributes

264

265

Returns:

266

AnimateTransform: Transform animation element

267

"""

268

269

def animateMotion(path=None, href=None, **extra):

270

"""

271

Create motion animation along a path

272

273

Args:

274

path: SVG path data for motion (default: None)

275

href: Target element reference (default: None)

276

**extra: Motion and timing attributes (dur, rotate, etc.)

277

278

Returns:

279

AnimateMotion: Motion animation element

280

"""

281

282

# Animation timing methods (available on all animation elements)

283

def set_timing(begin=None, end=None, dur=None, min=None, max=None,

284

restart=None, repeatCount=None, repeatDur=None):

285

"""Set animation timing parameters"""

286

287

def set_target(attributeName, attributeType=None):

288

"""Set animation target attribute"""

289

290

def set_value(values, calcMode=None, keyTimes=None, keySplines=None,

291

from_=None, to=None, by=None):

292

"""Set animation values and interpolation"""

293

```

294

295

**Usage Examples:**

296

297

```python

298

import svgwrite

299

300

dwg = svgwrite.Drawing('animations.svg', size=('400px', '300px'))

301

302

# Animated circle with changing radius

303

circle = dwg.circle(center=(100, 100), r=20, fill='red', id='animated-circle')

304

radius_anim = dwg.animate(attributeName='r', values='20;40;20', dur='2s',

305

repeatCount='indefinite')

306

circle.add(radius_anim)

307

dwg.add(circle)

308

309

# Color animation

310

color_rect = dwg.rect(insert=(200, 50), size=(80, 60), fill='blue')

311

color_anim = dwg.animateColor(attributeName='fill',

312

values='blue;red;green;blue',

313

dur='3s', repeatCount='indefinite')

314

color_rect.add(color_anim)

315

dwg.add(color_rect)

316

317

# Transform animation - rotation

318

rotating_rect = dwg.rect(insert=(320, 80), size=(30, 30), fill='purple')

319

rotate_anim = dwg.animateTransform(

320

transform='rotate',

321

values='0 335 95;360 335 95', # Rotate around center

322

dur='2s',

323

repeatCount='indefinite'

324

)

325

rotating_rect.add(rotate_anim)

326

dwg.add(rotating_rect)

327

328

# Motion along path

329

motion_circle = dwg.circle(center=(0, 0), r=8, fill='orange')

330

motion_anim = dwg.animateMotion(

331

path='M 50,200 Q 200,150 350,200 T 350,250',

332

dur='4s',

333

repeatCount='indefinite',

334

rotate='auto' # Auto-orient along path

335

)

336

motion_circle.add(motion_anim)

337

dwg.add(motion_circle)

338

339

# Show the motion path for reference

340

motion_path = dwg.path(d='M 50,200 Q 200,150 350,200 T 350,250',

341

stroke='lightgray', stroke_width=1, fill='none')

342

dwg.add(motion_path)

343

344

# Complex animation with multiple attributes

345

complex_rect = dwg.rect(insert=(50, 250), size=(20, 20), fill='green')

346

347

# Animate position

348

pos_anim = dwg.animateTransform(

349

transform='translate',

350

values='0,0;100,0;100,-50;0,-50;0,0',

351

dur='5s',

352

repeatCount='indefinite'

353

)

354

355

# Animate size

356

size_anim = dwg.animate(attributeName='width', values='20;40;20',

357

dur='2.5s', repeatCount='indefinite')

358

359

complex_rect.add(pos_anim)

360

complex_rect.add(size_anim)

361

dwg.add(complex_rect)

362

```

363

364

### Filter Effects

365

366

Advanced filter system for creating visual effects like blurs, lighting, and compositing.

367

368

```python { .api }

369

def filter(start=None, size=None, resolution=None, inherit=None, **extra):

370

"""

371

Create filter container for visual effects

372

373

Args:

374

start: Filter region start as (x, y) tuple (default: None)

375

size: Filter region size as (width, height) tuple (default: None)

376

resolution: Filter resolution (default: None)

377

inherit: Inherit from another filter (default: None)

378

**extra: Additional filter attributes (filterUnits, primitiveUnits)

379

380

Returns:

381

Filter: Filter container element for adding filter primitives

382

"""

383

384

# Filter primitives (accessed via Filter instance dynamic attributes)

385

def feGaussianBlur(**kwargs):

386

"""Gaussian blur effect"""

387

388

def feOffset(**kwargs):

389

"""Offset/displacement effect"""

390

391

def feColorMatrix(**kwargs):

392

"""Color transformation matrix"""

393

394

def feFlood(**kwargs):

395

"""Solid color flood"""

396

397

def feBlend(**kwargs):

398

"""Blending of two inputs"""

399

400

def feComposite(**kwargs):

401

"""Compositing operations"""

402

403

def feMorphology(**kwargs):

404

"""Morphological operations (dilate, erode)"""

405

406

def feConvolveMatrix(**kwargs):

407

"""Convolution matrix filter"""

408

409

def feTurbulence(**kwargs):

410

"""Procedural noise generation"""

411

```

412

413

**Usage Examples:**

414

415

```python

416

import svgwrite

417

418

dwg = svgwrite.Drawing('filters.svg', size=('400px', '300px'))

419

420

defs = dwg.defs()

421

422

# Drop shadow filter

423

shadow_filter = dwg.filter(id='drop-shadow')

424

shadow_filter.feOffset(in_='SourceGraphic', dx=3, dy=3, result='offset')

425

shadow_filter.feGaussianBlur(in_='offset', stdDeviation=2, result='blur')

426

shadow_filter.feFlood(flood_color='black', flood_opacity=0.3, result='flood')

427

shadow_filter.feComposite(in_='flood', in2='blur', operator='in', result='shadow')

428

shadow_filter.feMerge(

429

feMergeNode(in_='shadow'),

430

feMergeNode(in_='SourceGraphic')

431

)

432

defs.add(shadow_filter)

433

434

# Glow filter

435

glow_filter = dwg.filter(id='glow')

436

glow_filter.feGaussianBlur(stdDeviation=4, result='coloredBlur')

437

glow_filter.feMerge(

438

feMergeNode(in_='coloredBlur'),

439

feMergeNode(in_='SourceGraphic')

440

)

441

defs.add(glow_filter)

442

443

# Emboss filter

444

emboss_filter = dwg.filter(id='emboss')

445

emboss_filter.feConvolveMatrix(

446

kernelMatrix='-2 -1 0 -1 1 1 0 1 2',

447

result='emboss'

448

)

449

defs.add(emboss_filter)

450

451

dwg.add(defs)

452

453

# Apply filters to elements

454

shadow_rect = dwg.rect(insert=(50, 50), size=(100, 60), fill='lightblue',

455

filter='url(#drop-shadow)')

456

dwg.add(shadow_rect)

457

458

glow_text = dwg.text('Glowing Text', insert=(200, 80), font_size='20px',

459

fill='yellow', filter='url(#glow)')

460

dwg.add(glow_text)

461

462

emboss_circle = dwg.circle(center=(300, 200), r=40, fill='lightgreen',

463

filter='url(#emboss)')

464

dwg.add(emboss_circle)

465

```

466

467

### Masking and Clipping

468

469

Advanced masking and clipping capabilities for complex visibility control.

470

471

```python { .api }

472

def mask(start=None, size=None, **extra):

473

"""

474

Create alpha mask for compositing operations

475

476

Args:

477

start: Mask region start as (x, y) tuple (default: None)

478

size: Mask region size as (width, height) tuple (default: None)

479

**extra: Additional mask attributes (maskUnits, maskContentUnits)

480

481

Returns:

482

Mask: Mask definition element

483

"""

484

485

def clipPath(**extra):

486

"""

487

Create clipping path for restricting paint regions

488

489

Args:

490

**extra: Additional clipPath attributes (clipPathUnits, etc.)

491

492

Returns:

493

ClipPath: Clipping path element with Transform mixin

494

"""

495

```

496

497

**Usage Examples:**

498

499

```python

500

import svgwrite

501

502

dwg = svgwrite.Drawing('masking.svg', size=('400px', '300px'))

503

504

defs = dwg.defs()

505

506

# Create circular clipping path

507

circle_clip = dwg.clipPath(id='circle-clip')

508

circle_clip.add(dwg.circle(center=(100, 100), r=50))

509

defs.add(circle_clip)

510

511

# Create gradient mask

512

gradient_mask = dwg.mask(id='fade-mask')

513

mask_gradient = dwg.linearGradient(start=(0, 0), end=(100, 0), id='mask-grad')

514

mask_gradient.add_stop_color(0, 'white')

515

mask_gradient.add_stop_color(1, 'black')

516

defs.add(mask_gradient)

517

518

mask_rect = dwg.rect(insert=(0, 0), size=(200, 100),

519

fill=mask_gradient.get_paint_server())

520

gradient_mask.add(mask_rect)

521

defs.add(gradient_mask)

522

523

# Text mask

524

text_mask = dwg.mask(id='text-mask')

525

text_mask.add(dwg.text('MASK', insert=(150, 200), font_size='48px',

526

font_weight='bold', fill='white'))

527

defs.add(text_mask)

528

529

dwg.add(defs)

530

531

# Apply clipping path

532

clipped_image = dwg.rect(insert=(50, 50), size=(100, 100), fill='red',

533

clip_path='url(#circle-clip)')

534

dwg.add(clipped_image)

535

536

# Apply gradient mask

537

masked_rect = dwg.rect(insert=(200, 50), size=(150, 100), fill='blue',

538

mask='url(#fade-mask)')

539

dwg.add(masked_rect)

540

541

# Apply text mask to pattern

542

pattern = dwg.pattern(insert=(0, 0), size=(20, 20), id='bg-pattern')

543

pattern.add(dwg.rect((0, 0), (20, 20), fill='yellow'))

544

pattern.add(dwg.circle((10, 10), 8, fill='red'))

545

defs.add(pattern)

546

547

masked_background = dwg.rect(insert=(100, 160), size=(200, 80),

548

fill=pattern.get_paint_server(),

549

mask='url(#text-mask)')

550

dwg.add(masked_background)

551

```

552

553

### Solid Colors (SVG 1.2 Tiny)

554

555

Solid color paint server for SVG 1.2 Tiny profile.

556

557

```python { .api }

558

def solidColor(color="currentColor", opacity=None, **extra):

559

"""

560

Create solid color paint server for SVG 1.2 Tiny profile

561

562

Args:

563

color: Color value (default: "currentColor")

564

opacity: Color opacity (default: None)

565

**extra: Additional SVG attributes

566

567

Returns:

568

SolidColor: Solid color element with get_paint_server method

569

"""

570

```

571

572

**Usage Examples:**

573

574

```python

575

import svgwrite

576

577

# Note: SolidColor only works with SVG 1.2 Tiny profile

578

dwg = svgwrite.Drawing('solidcolor.svg', profile='tiny', size=('300px', '200px'))

579

580

defs = dwg.defs()

581

582

# Solid color definitions

583

red_color = dwg.solidColor(color='red', opacity=0.7, id='semi-red')

584

blue_color = dwg.solidColor(color='blue', id='solid-blue')

585

defs.add(red_color)

586

defs.add(blue_color)

587

588

dwg.add(defs)

589

590

# Use solid colors

591

red_rect = dwg.rect(insert=(50, 50), size=(80, 60),

592

fill=red_color.get_paint_server())

593

dwg.add(red_rect)

594

595

blue_circle = dwg.circle(center=(200, 100), r=40,

596

fill=blue_color.get_paint_server())

597

dwg.add(blue_circle)

598

```