0
# Filter Effects
1

2
Comprehensive filter system for advanced visual effects including blur, color manipulation, lighting, and compositing operations.
3

4
## Capabilities
5

6
### Filter
7

8
Container element that defines a filter effect chain composed of filter primitives.
9

10
```typescript { .api }
11
/**
12
 * Filter container for combining multiple filter primitives
13
 * @param x - X coordinate of filter region
14
 * @param y - Y coordinate of filter region
15
 * @param width - Width of filter region
16
 * @param height - Height of filter region
17
 * @param filterUnits - Coordinate system for filter dimensions
18
 * @param primitiveUnits - Coordinate system for filter primitives
19
 */
20
interface FilterProps extends CommonPathProps {
21
  x?: NumberProp;
22
  y?: NumberProp;
23
  width?: NumberProp;
24
  height?: NumberProp;
25
  filterUnits?: Units;
26
  primitiveUnits?: Units;
27
}
28

29
declare const Filter: React.ComponentType<FilterProps>;
30
```
31

32
**Usage Examples:**
33

34
```typescript
35
import Svg, { Defs, Filter, FeGaussianBlur, FeOffset, Circle, Rect } from "react-native-svg";
36

37
// Basic blur filter
38
<Svg width="200" height="200">
39
  <Defs>
40
    <Filter id="blur">
41
      <FeGaussianBlur stdDeviation="3" />
42
    </Filter>
43
  </Defs>
44
  <Circle cx="100" cy="100" r="50" fill="blue" filter="url(#blur)" />
45
</Svg>
46

47
// Drop shadow filter
48
<Svg width="250" height="200">
49
  <Defs>
50
    <Filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%">
51
      <FeOffset dx="4" dy="4" />
52
      <FeGaussianBlur stdDeviation="2" />
53
    </Filter>
54
  </Defs>
55
  <Rect x="50" y="50" width="100" height="80" fill="red" filter="url(#dropshadow)" />
56
</Svg>
57
```
58

59
## Filter Primitives
60

61
### FeGaussianBlur
62

63
Applies Gaussian blur effect to input elements.
64

65
```typescript { .api }
66
/**
67
 * Gaussian blur filter primitive
68
 * @param stdDeviation - Standard deviation for blur (single value or "x,y")
69
 * @param in - Input for this filter primitive
70
 * @param edgeMode - Edge handling mode
71
 */
72
interface FeGaussianBlurProps extends FilterPrimitiveCommonProps {
73
  stdDeviation?: NumberProp | string;
74
  in?: string;
75
  edgeMode?: FilterEdgeMode;
76
}
77

78
declare const FeGaussianBlur: React.ComponentType<FeGaussianBlurProps>;
79

80
type FilterEdgeMode = 'duplicate' | 'wrap' | 'none';
81
```
82

83
**Usage Examples:**
84

85
```typescript
86
// Variable blur
87
<Filter id="variableBlur">
88
  <FeGaussianBlur stdDeviation="5,2" />
89
</Filter>
90

91
// Blur with edge mode
92
<Filter id="edgeBlur">
93
  <FeGaussianBlur stdDeviation="3" edgeMode="duplicate" />
94
</Filter>
95
```
96

97
### FeOffset
98

99
Shifts elements by specified amounts in X and Y directions.
100

101
```typescript { .api }
102
/**
103
 * Offset filter primitive for shifting elements
104
 * @param dx - X offset amount
105
 * @param dy - Y offset amount
106
 * @param in - Input for this filter primitive
107
 */
108
interface FeOffsetProps extends FilterPrimitiveCommonProps {
109
  dx?: NumberProp;
110
  dy?: NumberProp;
111
  in?: string;
112
}
113

114
declare const FeOffset: React.ComponentType<FeOffsetProps>;
115
```
116

117
### FeColorMatrix
118

119
Applies color transformations using matrix operations.
120

121
```typescript { .api }
122
/**
123
 * Color matrix filter primitive for color transformations
124
 * @param type - Type of color matrix operation
125
 * @param values - Matrix values or single value (depending on type)
126
 * @param in - Input for this filter primitive
127
 */
128
interface FeColorMatrixProps extends FilterPrimitiveCommonProps {
129
  type?: FilterColorMatrixType;
130
  values?: string | NumberProp;
131
  in?: string;
132
}
133

134
declare const FeColorMatrix: React.ComponentType<FeColorMatrixProps>;
135

136
type FilterColorMatrixType = 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';
137
```
138

139
**Usage Examples:**
140

141
```typescript
142
// Desaturate (grayscale)
143
<Filter id="grayscale">
144
  <FeColorMatrix type="saturate" values="0" />
145
</Filter>
146

147
// Sepia effect
148
<Filter id="sepia">
149
  <FeColorMatrix
150
    type="matrix"
151
    values="0.393 0.769 0.189 0 0
152
            0.349 0.686 0.168 0 0
153
            0.272 0.534 0.131 0 0
154
            0 0 0 1 0"
155
  />
156
</Filter>
157

158
// Hue rotation
159
<Filter id="hueShift">
160
  <FeColorMatrix type="hueRotate" values="90" />
161
</Filter>
162
```
163

164
### FeBlend
165

166
Blends two inputs using specified blend modes.
167

168
```typescript { .api }
169
/**
170
 * Blend filter primitive for combining inputs
171
 * @param mode - Blend mode operation
172
 * @param in - First input
173
 * @param in2 - Second input
174
 */
175
interface FeBlendProps extends FilterPrimitiveCommonProps {
176
  mode?: 'normal' | 'multiply' | 'screen' | 'darken' | 'lighten' | 'overlay' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion';
177
  in?: string;
178
  in2?: string;
179
}
180

181
declare const FeBlend: React.ComponentType<FeBlendProps>;
182
```
183

184
### FeComposite
185

186
Combines two inputs using Porter-Duff compositing operations.
187

188
```typescript { .api }
189
/**
190
 * Composite filter primitive for advanced combining
191
 * @param operator - Compositing operation
192
 * @param k1 - First constant for arithmetic operation
193
 * @param k2 - Second constant for arithmetic operation
194
 * @param k3 - Third constant for arithmetic operation
195
 * @param k4 - Fourth constant for arithmetic operation
196
 * @param in - First input
197
 * @param in2 - Second input
198
 */
199
interface FeCompositeProps extends FilterPrimitiveCommonProps {
200
  operator?: 'over' | 'in' | 'out' | 'atop' | 'xor' | 'arithmetic';
201
  k1?: NumberProp;
202
  k2?: NumberProp;
203
  k3?: NumberProp;
204
  k4?: NumberProp;
205
  in?: string;
206
  in2?: string;
207
}
208

209
declare const FeComposite: React.ComponentType<FeCompositeProps>;
210
```
211

212
### FeFlood
213

214
Creates a solid color fill that can be used in filter chains.
215

216
```typescript { .api }
217
/**
218
 * Flood filter primitive for solid color generation
219
 * @param floodColor - Fill color
220
 * @param floodOpacity - Fill opacity
221
 */
222
interface FeFloodProps extends FilterPrimitiveCommonProps {
223
  floodColor?: ColorValue;
224
  floodOpacity?: NumberProp;
225
}
226

227
declare const FeFlood: React.ComponentType<FeFloodProps>;
228
```
229

230
### FeMerge
231

232
Merges multiple filter results into a single output.
233

234
```typescript { .api }
235
/**
236
 * Merge filter primitive for combining multiple inputs
237
 */
238
interface FeMergeProps extends FilterPrimitiveCommonProps {}
239

240
declare const FeMerge: React.ComponentType<FeMergeProps>;
241

242
/**
243
 * Merge node specifying an input to merge
244
 * @param in - Input to include in merge
245
 */
246
interface FeMergeNodeProps extends FilterPrimitiveCommonProps {
247
  in?: string;
248
}
249

250
declare const FeMergeNode: React.ComponentType<FeMergeNodeProps>;
251
```
252

253
**Usage Examples:**
254

255
```typescript
256
// Combine multiple effects
257
<Filter id="combined">
258
  <FeOffset dx="3" dy="3" result="offset" />
259
  <FeGaussianBlur stdDeviation="2" result="blur" />
260
  <FeMerge>
261
    <FeMergeNode in="blur" />
262
    <FeMergeNode in="SourceGraphic" />
263
  </FeMerge>
264
</Filter>
265
```
266

267
### FeComponentTransfer
268

269
Applies component-wise remapping of color values using transfer functions for each color channel.
270

271
```typescript { .api }
272
/**
273
 * Component transfer filter primitive for per-channel color remapping
274
 */
275
interface FeComponentTransferProps extends FilterPrimitiveCommonProps {
276
  in?: string;
277
}
278

279
declare const FeComponentTransfer: React.ComponentType<FeComponentTransferProps>;
280
```
281

282
### Component Transfer Functions
283

284
Individual transfer functions for each color channel (red, green, blue, alpha).
285

286
```typescript { .api }
287
/**
288
 * Transfer function for individual color channels
289
 * @param type - Type of transfer function
290
 * @param tableValues - Lookup table values for 'table' type
291
 * @param slope - Slope for 'linear' type
292
 * @param intercept - Intercept for 'linear' type
293
 * @param amplitude - Amplitude for 'gamma' type
294
 * @param exponent - Exponent for 'gamma' type
295
 * @param offset - Offset for 'gamma' type
296
 */
297
interface FeFuncProps extends FilterPrimitiveCommonProps {
298
  type?: 'identity' | 'table' | 'discrete' | 'linear' | 'gamma';
299
  tableValues?: string;
300
  slope?: NumberProp;
301
  intercept?: NumberProp;
302
  amplitude?: NumberProp;
303
  exponent?: NumberProp;
304
  offset?: NumberProp;
305
}
306

307
declare const FeFuncA: React.ComponentType<FeFuncProps>;
308
declare const FeFuncR: React.ComponentType<FeFuncProps>;
309
declare const FeFuncG: React.ComponentType<FeFuncProps>;
310
declare const FeFuncB: React.ComponentType<FeFuncProps>;
311
```
312

313
### FeConvolveMatrix
314

315
Applies a convolution matrix for effects like sharpening, blurring, or edge detection.
316

317
```typescript { .api }
318
/**
319
 * Convolution matrix filter primitive
320
 * @param order - Size of convolution matrix "x y" or single number
321
 * @param kernelMatrix - Matrix values as space-separated string
322
 * @param divisor - Value to divide result by
323
 * @param bias - Value to add to result
324
 * @param targetX - X offset of convolution matrix
325
 * @param targetY - Y offset of convolution matrix
326
 * @param edgeMode - Edge handling mode
327
 * @param preserveAlpha - Whether to preserve alpha channel
328
 */
329
interface FeConvolveMatrixProps extends FilterPrimitiveCommonProps {
330
  order?: string | NumberProp;
331
  kernelMatrix?: string;
332
  divisor?: NumberProp;
333
  bias?: NumberProp;
334
  targetX?: NumberProp;
335
  targetY?: NumberProp;
336
  edgeMode?: FilterEdgeMode;
337
  preserveAlpha?: BooleanProp;
338
  in?: string;
339
}
340

341
declare const FeConvolveMatrix: React.ComponentType<FeConvolveMatrixProps>;
342
```
343

344
### FeDiffuseLighting
345

346
Creates diffuse lighting effects using various light sources.
347

348
```typescript { .api }
349
/**
350
 * Diffuse lighting filter primitive
351
 * @param surfaceScale - Surface height scale factor
352
 * @param diffuseConstant - Diffuse reflection constant
353
 * @param lightingColor - Color of light source
354
 */
355
interface FeDiffuseLightingProps extends FilterPrimitiveCommonProps {
356
  surfaceScale?: NumberProp;
357
  diffuseConstant?: NumberProp;
358
  lightingColor?: ColorValue;
359
  in?: string;
360
}
361

362
declare const FeDiffuseLighting: React.ComponentType<FeDiffuseLightingProps>;
363
```
364

365
### FeDisplacementMap
366

367
Displaces pixels using values from another input as a displacement map.
368

369
```typescript { .api }
370
/**
371
 * Displacement map filter primitive for pixel displacement
372
 * @param scale - Displacement scale factor
373
 * @param xChannelSelector - Color channel for X displacement ('R'|'G'|'B'|'A')
374
 * @param yChannelSelector - Color channel for Y displacement ('R'|'G'|'B'|'A')
375
 * @param in - Primary input
376
 * @param in2 - Displacement map input
377
 */
378
interface FeDisplacementMapProps extends FilterPrimitiveCommonProps {
379
  scale?: NumberProp;
380
  xChannelSelector?: 'R' | 'G' | 'B' | 'A';
381
  yChannelSelector?: 'R' | 'G' | 'B' | 'A';
382
  in?: string;
383
  in2?: string;
384
}
385

386
declare const FeDisplacementMap: React.ComponentType<FeDisplacementMapProps>;
387
```
388

389
### FeDistantLight
390

391
Defines a distant light source for lighting effects (infinite light from a direction).
392

393
```typescript { .api }
394
/**
395
 * Distant light source for lighting effects
396
 * @param azimuth - Direction angle in degrees (0-360)
397
 * @param elevation - Elevation angle in degrees (0-90)
398
 */
399
interface FeDistantLightProps extends FilterPrimitiveCommonProps {
400
  azimuth?: NumberProp;
401
  elevation?: NumberProp;
402
}
403

404
declare const FeDistantLight: React.ComponentType<FeDistantLightProps>;
405
```
406

407
### FeDropShadow
408

409
Creates drop shadow effects (shorthand for common shadow filter chains).
410

411
```typescript { .api }
412
/**
413
 * Drop shadow filter primitive (shorthand)
414
 * @param dx - X offset of shadow
415
 * @param dy - Y offset of shadow
416
 * @param stdDeviation - Blur amount for shadow
417
 * @param floodColor - Shadow color
418
 * @param floodOpacity - Shadow opacity
419
 */
420
interface FeDropShadowProps extends FilterPrimitiveCommonProps {
421
  dx?: NumberProp;
422
  dy?: NumberProp;
423
  stdDeviation?: NumberProp;
424
  floodColor?: ColorValue;
425
  floodOpacity?: NumberProp;
426
  in?: string;
427
}
428

429
declare const FeDropShadow: React.ComponentType<FeDropShadowProps>;
430
```
431

432
### FeImage
433

434
Incorporates an external image or SVG element into the filter chain.
435

436
```typescript { .api }
437
/**
438
 * Image filter primitive for incorporating external graphics
439
 * @param href - Reference to image resource or SVG element
440
 * @param preserveAspectRatio - How to scale the image
441
 */
442
interface FeImageProps extends FilterPrimitiveCommonProps {
443
  href?: string;
444
  preserveAspectRatio?: string;
445
}
446

447
declare const FeImage: React.ComponentType<FeImageProps>;
448
```
449

450
### FeMorphology
451

452
Applies morphological operations (dilate/erode) for effects like outlining.
453

454
```typescript { .api }
455
/**
456
 * Morphology filter primitive for dilate/erode operations
457
 * @param operator - Morphological operation ('dilate' | 'erode')
458
 * @param radius - Operation radius (single value or "x,y")
459
 */
460
interface FeMorphologyProps extends FilterPrimitiveCommonProps {
461
  operator?: 'dilate' | 'erode';
462
  radius?: NumberProp | string;
463
  in?: string;
464
}
465

466
declare const FeMorphology: React.ComponentType<FeMorphologyProps>;
467
```
468

469
### FePointLight
470

471
Defines a point light source for lighting effects (light emanating from a point).
472

473
```typescript { .api }
474
/**
475
 * Point light source for lighting effects
476
 * @param x - X coordinate of light position
477
 * @param y - Y coordinate of light position  
478
 * @param z - Z coordinate of light position
479
 */
480
interface FePointLightProps extends FilterPrimitiveCommonProps {
481
  x?: NumberProp;
482
  y?: NumberProp;
483
  z?: NumberProp;
484
}
485

486
declare const FePointLight: React.ComponentType<FePointLightProps>;
487
```
488

489
### FeSpecularLighting
490

491
Creates specular lighting effects for shiny surface appearance.
492

493
```typescript { .api }
494
/**
495
 * Specular lighting filter primitive for shiny effects
496
 * @param surfaceScale - Surface height scale factor
497
 * @param specularConstant - Specular reflection constant
498
 * @param specularExponent - Specular reflection exponent
499
 * @param lightingColor - Color of light source
500
 */
501
interface FeSpecularLightingProps extends FilterPrimitiveCommonProps {
502
  surfaceScale?: NumberProp;
503
  specularConstant?: NumberProp;
504
  specularExponent?: NumberProp;
505
  lightingColor?: ColorValue;
506
  in?: string;
507
}
508

509
declare const FeSpecularLighting: React.ComponentType<FeSpecularLightingProps>;
510
```
511

512
### FeSpotLight
513

514
Defines a spot light source for lighting effects (cone-shaped light).
515

516
```typescript { .api }
517
/**
518
 * Spot light source for lighting effects
519
 * @param x - X coordinate of light position
520
 * @param y - Y coordinate of light position
521
 * @param z - Z coordinate of light position
522
 * @param pointsAtX - X coordinate light points towards
523
 * @param pointsAtY - Y coordinate light points towards
524
 * @param pointsAtZ - Z coordinate light points towards
525
 * @param specularExponent - Focus of spotlight cone
526
 * @param limitingConeAngle - Maximum cone angle in degrees
527
 */
528
interface FeSpotLightProps extends FilterPrimitiveCommonProps {
529
  x?: NumberProp;
530
  y?: NumberProp;
531
  z?: NumberProp;
532
  pointsAtX?: NumberProp;
533
  pointsAtY?: NumberProp;
534
  pointsAtZ?: NumberProp;
535
  specularExponent?: NumberProp;
536
  limitingConeAngle?: NumberProp;
537
}
538

539
declare const FeSpotLight: React.ComponentType<FeSpotLightProps>;
540
```
541

542
### FeTile
543

544
Repeats input to fill the filter region in a tiled pattern.
545

546
```typescript { .api }
547
/**
548
 * Tile filter primitive for repeating patterns
549
 */
550
interface FeTileProps extends FilterPrimitiveCommonProps {
551
  in?: string;
552
}
553

554
declare const FeTile: React.ComponentType<FeTileProps>;
555
```
556

557
### FeTurbulence
558

559
Generates turbulence noise patterns for texture effects.
560

561
```typescript { .api }
562
/**
563
 * Turbulence noise generator filter primitive
564
 * @param baseFrequency - Base frequency for noise (single value or "x,y")
565
 * @param numOctaves - Number of octaves for fractal noise
566
 * @param type - Type of noise ('fractalNoise' | 'turbulence')
567
 * @param stitchTiles - Whether to stitch tiles seamlessly
568
 * @param seed - Random seed for noise generation
569
 */
570
interface FeTurbulenceProps extends FilterPrimitiveCommonProps {
571
  baseFrequency?: NumberProp | string;
572
  numOctaves?: NumberProp;
573
  type?: 'fractalNoise' | 'turbulence';
574
  stitchTiles?: 'stitch' | 'noStitch';
575
  seed?: NumberProp;
576
}
577

578
declare const FeTurbulence: React.ComponentType<FeTurbulenceProps>;
579
```
580

581
## Complex Filter Examples
582

583
### Drop Shadow
584

585
```typescript
586
<Svg width="300" height="200">
587
  <Defs>
588
    <Filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
589
      {/* Create shadow */}
590
      <FeOffset dx="4" dy="4" in="SourceAlpha" result="offset" />
591
      <FeGaussianBlur stdDeviation="3" in="offset" result="blur" />
592
      <FeFlood floodColor="black" floodOpacity="0.3" result="flood" />
593
      <FeComposite in="flood" in2="blur" operator="in" result="shadow" />
594
      
595
      {/* Combine with original */}
596
      <FeMerge>
597
        <FeMergeNode in="shadow" />
598
        <FeMergeNode in="SourceGraphic" />
599
      </FeMerge>
600
    </Filter>
601
  </Defs>
602
  
603
  <Rect x="50" y="50" width="100" height="80" fill="blue" filter="url(#dropShadow)" />
604
</Svg>
605
```
606

607
### Glow Effect
608

609
```typescript
610
<Svg width="300" height="200">
611
  <Defs>
612
    <Filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
613
      {/* Create glow */}
614
      <FeGaussianBlur stdDeviation="4" in="SourceAlpha" result="blur" />
615
      <FeFlood floodColor="cyan" floodOpacity="0.8" result="glowColor" />
616
      <FeComposite in="glowColor" in2="blur" operator="in" result="glow" />
617
      
618
      {/* Combine multiple glows */}
619
      <FeMerge>
620
        <FeMergeNode in="glow" />
621
        <FeMergeNode in="glow" />
622
        <FeMergeNode in="SourceGraphic" />
623
      </FeMerge>
624
    </Filter>
625
  </Defs>
626
  
627
  <Circle cx="150" cy="100" r="40" fill="white" filter="url(#glow)" />
628
</Svg>
629
```
630

631
### Beveled Edge
632

633
```typescript
634
<Svg width="300" height="200">
635
  <Defs>
636
    <Filter id="bevel" x="-50%" y="-50%" width="200%" height="200%">
637
      {/* Create highlight */}
638
      <FeOffset dx="-1" dy="-1" in="SourceAlpha" result="highlight" />
639
      <FeFlood floodColor="white" floodOpacity="0.8" result="highlightColor" />
640
      <FeComposite in="highlightColor" in2="highlight" operator="in" result="highlightFinal" />
641
      
642
      {/* Create shadow */}
643
      <FeOffset dx="1" dy="1" in="SourceAlpha" result="shadow" />
644
      <FeFlood floodColor="black" floodOpacity="0.4" result="shadowColor" />
645
      <FeComposite in="shadowColor" in2="shadow" operator="in" result="shadowFinal" />
646
      
647
      {/* Combine all */}
648
      <FeMerge>
649
        <FeMergeNode in="shadowFinal" />
650
        <FeMergeNode in="SourceGraphic" />
651
        <FeMergeNode in="highlightFinal" />
652
      </FeMerge>
653
    </Filter>
654
  </Defs>
655
  
656
  <Rect x="100" y="60" width="100" height="80" fill="silver" filter="url(#bevel)" />
657
</Svg>
658
```
659

660
## Filter Primitive Common Properties
661

662
```typescript { .api }
663
/**
664
 * Common properties for all filter primitives
665
 * @param x - X coordinate of primitive region
666
 * @param y - Y coordinate of primitive region
667
 * @param width - Width of primitive region
668
 * @param height - Height of primitive region
669
 * @param result - Name for this primitive's output
670
 */
671
interface FilterPrimitiveCommonProps extends CommonPathProps {
672
  x?: NumberProp;
673
  y?: NumberProp;
674
  width?: NumberProp;
675
  height?: NumberProp;
676
  result?: string;
677
}
678
```
679

680
## Filter Input Sources
681

682
Common input values for filter primitives:
683

684
- `"SourceGraphic"` - Original element
685
- `"SourceAlpha"` - Alpha channel of original element
686
- `"BackgroundImage"` - Background behind element
687
- `"BackgroundAlpha"` - Alpha of background
688
- `"FillPaint"` - Fill paint of element
689
- `"StrokePaint"` - Stroke paint of element
690
- Custom result names from previous primitives
691

692
## Performance Tips
693

694
### Optimize Filter Regions
695

696
```typescript
697
// Define explicit filter regions to reduce processing area
698
<Filter id="optimized" x="0%" y="0%" width="100%" height="100%">
699
  <FeGaussianBlur stdDeviation="2" />
700
</Filter>
701
```
702

703
### Reuse Filter Results
704

705
```typescript
706
// Store intermediate results for reuse
707
<Filter id="efficient">
708
  <FeGaussianBlur stdDeviation="3" result="blur" />
709
  <FeOffset dx="2" dy="2" in="blur" result="offsetBlur" />
710
  <FeComposite in="blur" in2="offsetBlur" operator="multiply" />
711
</Filter>
712
```