0
# React Native SVG
1

2
React Native SVG is a comprehensive SVG library that brings full SVG support to React Native applications. It provides React components for all major SVG elements including shapes, paths, gradients, filters, and text, with native implementations for optimal performance across iOS, Android, macOS, Windows, and web platforms.
3

4
## Package Information
5

6
- **Package Name**: react-native-svg
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-native-svg`
10
- **Peer Dependencies**: `react`, `react-native`
11

12
## Core Imports
13

14
```typescript
15
import Svg, { Circle, Rect, Path, Text, G } from "react-native-svg";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const Svg = require("react-native-svg").default;
22
const { Circle, Rect, Path, Text, G } = require("react-native-svg");
23
```
24

25
## Basic Usage
26

27
```typescript
28
import React from "react";
29
import Svg, { Circle, Rect, Text, G } from "react-native-svg";
30

31
function MyComponent() {
32
  return (
33
    <Svg height="100" width="100" viewBox="0 0 100 100">
34
      <Circle
35
        cx="50"
36
        cy="50"
37
        r="45"
38
        stroke="blue"
39
        strokeWidth="2.5"
40
        fill="green"
41
      />
42
      <Rect
43
        x="15"
44
        y="15"
45
        width="70"
46
        height="70"
47
        stroke="red"
48
        strokeWidth="2"
49
        fill="yellow"
50
      />
51
      <Text
52
        x="50"
53
        y="50"
54
        fontSize="16"
55
        fill="black"
56
        textAnchor="middle"
57
      >
58
        SVG
59
      </Text>
60
    </Svg>
61
  );
62
}
63
```
64

65
## Architecture
66

67
React Native SVG is built around several key components:
68

69
- **SVG Elements**: React components that map directly to SVG elements (`Circle`, `Rect`, `Path`, etc.)
70
- **Native Implementation**: Platform-specific native code for high-performance rendering
71
- **Fabric Architecture**: Modern React Native architecture support with native components
72
- **Shape Base Class**: Common functionality shared across all SVG elements
73
- **XML Processing**: Utilities for parsing and rendering SVG from XML strings and URIs
74
- **Type System**: Complete TypeScript definitions for all SVG properties and elements
75

76
## Capabilities
77

78
### Basic Shapes
79

80
Core geometric shapes including circles, rectangles, ellipses, lines, polygons, and polylines.
81

82
```typescript { .api }
83
// Circle component
84
interface CircleProps extends CommonPathProps {
85
  cx?: NumberProp;
86
  cy?: NumberProp;
87
  r?: NumberProp;
88
  opacity?: NumberProp;
89
}
90

91
// Rectangle component  
92
interface RectProps extends CommonPathProps {
93
  x?: NumberProp;
94
  y?: NumberProp;
95
  width?: NumberProp;
96
  height?: NumberProp;
97
  rx?: NumberProp;
98
  ry?: NumberProp;
99
  opacity?: NumberProp;
100
}
101

102
// Ellipse component
103
interface EllipseProps extends CommonPathProps {
104
  cx?: NumberProp;
105
  cy?: NumberProp;
106
  rx?: NumberProp;
107
  ry?: NumberProp;
108
  opacity?: NumberProp;
109
}
110

111
// Line component
112
interface LineProps extends CommonPathProps {
113
  x1?: NumberProp;
114
  y1?: NumberProp;
115
  x2?: NumberProp;
116
  y2?: NumberProp;
117
  opacity?: NumberProp;
118
}
119

120
// Polygon component
121
interface PolygonProps extends CommonPathProps {
122
  points?: string | ReadonlyArray<NumberProp>;
123
  opacity?: NumberProp;
124
}
125

126
// Polyline component
127
interface PolylineProps extends CommonPathProps {
128
  points?: string | ReadonlyArray<NumberProp>;
129
  opacity?: NumberProp;
130
}
131
```
132

133
[Basic Shapes](./basic-shapes.md)
134

135
### Paths and Complex Shapes
136

137
Path elements for drawing complex shapes using SVG path data, plus polygon and polyline elements.
138

139
```typescript { .api }
140
interface PathProps extends CommonPathProps {
141
  d?: string;
142
  opacity?: NumberProp;
143
}
144
```
145

146
[Paths and Complex Shapes](./paths-complex-shapes.md)
147

148
### Text Elements
149

150
Text rendering with support for spans, text along paths, and comprehensive typography options.
151

152
```typescript { .api }
153
interface TextProps extends TextSpecificProps {
154
  children?: ReactNode;
155
  x?: NumberArray;
156
  y?: NumberArray;
157
  dx?: NumberArray;
158
  dy?: NumberArray;
159
  rotate?: NumberArray;
160
  opacity?: NumberProp;
161
  inlineSize?: NumberProp;
162
}
163
```
164

165
[Text Elements](./text-elements.md)
166

167
### Container Elements
168

169
Container elements for organizing and structuring SVG content including groups, definitions, and symbols.
170

171
```typescript { .api }
172
interface SvgProps extends GProps, ViewProps, HitSlop {
173
  width?: NumberProp;
174
  height?: NumberProp;
175
  viewBox?: string;
176
  preserveAspectRatio?: string;
177
  color?: ColorValue;
178
  title?: string;
179
}
180

181
interface GProps extends CommonPathProps {
182
  opacity?: NumberProp;
183
}
184

185
interface ImageProps extends CommonPathProps {
186
  x?: NumberProp;
187
  y?: NumberProp;
188
  width?: NumberProp;
189
  height?: NumberProp;
190
  href?: ImageSource | string;
191
  preserveAspectRatio?: string;
192
  opacity?: NumberProp;
193
}
194
```
195

196
[Container Elements](./container-elements.md)
197

198
### Gradients and Patterns
199

200
Linear and radial gradients plus pattern definitions for advanced fill and stroke effects.
201

202
```typescript { .api }
203
interface LinearGradientProps extends CommonPathProps {
204
  x1?: NumberProp;
205
  y1?: NumberProp;
206
  x2?: NumberProp;
207
  y2?: NumberProp;
208
  gradientUnits?: Units;
209
}
210

211
interface RadialGradientProps extends CommonPathProps {
212
  cx?: NumberProp;
213
  cy?: NumberProp;
214
  fx?: NumberProp;
215
  fy?: NumberProp;
216
  r?: NumberProp;
217
  gradientUnits?: Units;
218
}
219
```
220

221
[Gradients and Patterns](./gradients-patterns.md)
222

223
### Clipping and Masking
224

225
Clipping paths and masks for advanced visual effects and content clipping.
226

227
```typescript { .api }
228
interface ClipPathProps extends CommonPathProps {}
229

230
interface MaskProps extends CommonPathProps {
231
  x?: NumberProp;
232
  y?: NumberProp;
233
  width?: NumberProp;
234
  height?: NumberProp;
235
  maskUnits?: Units;
236
  maskContentUnits?: Units;
237
}
238
```
239

240
[Clipping and Masking](./clipping-masking.md)
241

242
### Filter Effects
243

244
Comprehensive filter system with primitives for blur, color manipulation, compositing, and advanced visual effects.
245

246
```typescript { .api }
247
interface FilterProps extends CommonPathProps {
248
  x?: NumberProp;
249
  y?: NumberProp;
250
  width?: NumberProp;
251
  height?: NumberProp;
252
  filterUnits?: Units;
253
  primitiveUnits?: Units;
254
}
255
```
256

257
[Filter Effects](./filter-effects.md)
258

259
### XML Processing
260

261
Utilities for loading and rendering SVG content from XML strings and remote URIs.
262

263
```typescript { .api }
264
function SvgXml(props: XmlProps): JSX.Element;
265
function SvgUri(props: UriProps): JSX.Element; 
266
function parse(xml: string): JsxAST | null;
267
```
268

269
[XML Processing](./xml-processing.md)
270

271
## Core Types
272

273
```typescript { .api }
274
type NumberProp = string | number;
275
type NumberArray = NumberProp[] | NumberProp;
276
type BooleanProp = boolean | 'true' | 'false';
277

278
type FillRule = 'evenodd' | 'nonzero';
279
type Units = 'userSpaceOnUse' | 'objectBoundingBox';
280
type Linecap = 'butt' | 'square' | 'round';
281
type Linejoin = 'miter' | 'bevel' | 'round';
282

283
type ColumnMajorTransformMatrix = [number, number, number, number, number, number];
284

285
interface CommonPathProps extends 
286
  ColorProps,
287
  FillProps,
288
  StrokeProps,
289
  ClipProps,
290
  TransformProps,
291
  VectorEffectProps,
292
  ResponderProps,
293
  TouchableProps,
294
  DefinitionProps,
295
  CommonMarkerProps,
296
  CommonMaskProps,
297
  CommonFilterProps,
298
  NativeProps,
299
  AccessibilityProps {}
300

301
interface FillProps {
302
  fill?: ColorValue;
303
  fillOpacity?: NumberProp;
304
  fillRule?: FillRule;
305
}
306

307
interface StrokeProps {
308
  stroke?: ColorValue;
309
  strokeWidth?: NumberProp;
310
  strokeOpacity?: NumberProp;
311
  strokeDasharray?: ReadonlyArray<NumberProp> | NumberProp;
312
  strokeDashoffset?: NumberProp;
313
  strokeLinecap?: Linecap;
314
  strokeLinejoin?: Linejoin;
315
  strokeMiterlimit?: NumberProp;
316
  vectorEffect?: VectorEffect;
317
}
318

319
interface ColorProps {
320
  color?: ColorValue;
321
}
322

323
interface ClipProps {
324
  clipRule?: FillRule;
325
  clipPath?: string;
326
}
327

328
interface TransformProps {
329
  transform?: ColumnMajorTransformMatrix | string | TransformsStyle['transform'];
330
}
331

332
interface VectorEffectProps {
333
  vectorEffect?: VectorEffect;
334
}
335

336
interface ResponderProps extends GestureResponderHandlers {
337
  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
338
}
339

340
interface TouchableProps {
341
  disabled?: boolean;
342
  onPress?: (event: GestureResponderEvent) => void;
343
  onPressIn?: (event: GestureResponderEvent) => void;
344
  onPressOut?: (event: GestureResponderEvent) => void;
345
  onLongPress?: (event: GestureResponderEvent) => void;
346
  delayPressIn?: number;
347
  delayPressOut?: number;
348
  delayLongPress?: number;
349
}
350

351
interface DefinitionProps {
352
  id?: string;
353
}
354

355
interface CommonMarkerProps {
356
  marker?: string;
357
  markerStart?: string;
358
  markerMid?: string;
359
  markerEnd?: string;
360
}
361

362
interface CommonMaskProps {
363
  mask?: string;
364
}
365

366
interface CommonFilterProps {
367
  filter?: string;
368
}
369

370
interface NativeProps {
371
  onLayout?: (event: LayoutChangeEvent) => void;
372
}
373

374
interface AccessibilityProps {
375
  accessibilityLabel?: string;
376
  accessible?: boolean;
377
  testID?: string;
378
}
379

380
interface FontObject {
381
  fontStyle?: FontStyle;
382
  fontVariant?: FontVariant;
383
  fontWeight?: FontWeight;
384
  fontStretch?: FontStretch;
385
  fontSize?: NumberProp;
386
  fontFamily?: string;
387
  textAnchor?: TextAnchor;
388
  textDecoration?: TextDecoration;
389
  letterSpacing?: NumberProp;
390
  wordSpacing?: NumberProp;
391
  kerning?: NumberProp;
392
  fontFeatureSettings?: string;
393
  fontVariantLigatures?: FontVariantLigatures;
394
  fontVariationSettings?: string;
395
}
396

397
interface FontProps extends FontObject {
398
  font?: FontObject;
399
}
400

401
interface TextSpecificProps extends CommonPathProps, FontProps {
402
  alignmentBaseline?: AlignmentBaseline;
403
  baselineShift?: BaselineShift;
404
  verticalAlign?: NumberProp;
405
  lengthAdjust?: LengthAdjust;
406
  textLength?: NumberProp;
407
  fontData?: null | { [name: string]: unknown };
408
  fontFeatureSettings?: string;
409
}
410

411
type VectorEffect = 'none' | 'non-scaling-stroke' | 'nonScalingStroke' | 'default' | 'inherit' | 'uri';
412
type FontStyle = 'normal' | 'italic' | 'oblique';
413
type FontVariant = 'normal' | 'small-caps';
414
type FontWeight = NumberProp | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
415
type FontStretch = 'normal' | 'wider' | 'narrower' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded';
416
type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
417
type FontVariantLigatures = 'normal' | 'none';
418
type TextAnchor = 'start' | 'middle' | 'end';
419
type AlignmentBaseline = 'baseline' | 'text-bottom' | 'alphabetic' | 'ideographic' | 'middle' | 'central' | 'mathematical' | 'text-top' | 'bottom' | 'center' | 'top' | 'text-before-edge' | 'text-after-edge' | 'before-edge' | 'after-edge' | 'hanging';
420
type BaselineShift = 'sub' | 'super' | 'baseline' | ReadonlyArray<NumberProp> | NumberProp;
421
type LengthAdjust = 'spacing' | 'spacingAndGlyphs';
422
```