react-native-svg

SVG Filters allow you to process an element's rendering (e.g., blurring, color intensity, warping) before it is composited.

Supported Filters (Native):

• FeBlend
• FeComposite
• FeColorMatrix
• FeDropShadow
• FeFlood
• FeGaussianBlur
• FeMerge
• FeOffset

Note: Some filters may not be implemented on native platforms yet but will work on the Web. If a filter is unsupported on native, a warning will be displayed.

To use a filter, define a <Filter> element with an id inside your <Svg> component, and then reference that ID in the filter prop of a target element using the url(#id) syntax.

import React from 'react';
import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg';

export default () => {
  return (
    <Svg height="300" width="300">
      <Filter id="myFilter">
        <FeColorMatrix type="saturate" values="0.2" />
      </Filter>
      <Rect
        x="0"
        y="0"
        width="300"
        height="300"
        fill="red"
        filter="url(#myFilter)"
      />
    </Svg>
  );
};

The FilterImage component (imported from react-native-svg/filter-image) behaves like a standard React Native Image component but supports an additional filters prop or CSS-style filter property via the style prop to apply visual effects.

Method 1: Using the filters prop

Pass an array of filter objects to the filters prop. Each object should specify a name (e.g., 'feColorMatrix'), a type, and the corresponding values.

Method 2: Using CSS API via style

On Web, you can use the standard CSS filter string within the style prop (e.g., 'saturate(3) grayscale(100%)').

import React from 'react';
import { StyleSheet } from 'react-native';
import { FilterImage } from 'react-native-svg/filter-image';

const myImage = require('./myImage.jpg');

export default () => {
  return (
    <FilterImage
      style={styles.image}
      source={myImage}
      filters={[
        { name: 'feColorMatrix', type: 'saturate', values: 0.2 },
        {
          name: 'feColorMatrix',
          type: 'matrix',
          values: [
            0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0,
            0, 1, 0,
          ],
        },
      ]}
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
  },
});

The <ForeignObject> element allows you to include non-SVG XML elements (like React Native View, Text, or Image) within an SVG region. The included content is subject to SVG transformations, filters, clipping, masking, and compositing. You must specify x, y, width, and height for the ForeignObject.

import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import {
  Svg,
  Defs,
  LinearGradient,
  Stop,
  Mask,
  Rect,
  G,
  Circle,
  ForeignObject,
} from 'react-native-svg';

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <Svg height="50%">
          <Defs>
            <LinearGradient
              id="Gradient"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="800"
              y2="0">
              <Stop offset="0" stopColor="white" stopOpacity="0.2" />
              <Stop offset="1" stopColor="white" stopOpacity="1" />
            </LinearGradient>
            <Mask
              id="Mask"
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="800"
              height="300">
              <Rect
                x="0"
                y="0"
                width="800"
                height="300"
                fill="url(#Gradient)"
              />
            </Mask>
          </Defs>
          <G mask="url(#Mask)">
            <Circle cx={50} cy={70} r={65} />
            <ForeignObject x={50} y={0} width={100} height={100}>
              <View style={{ width: 200, height: 400, transform: [] }}>
                <Image
                  style={{ width: 200, height: 200 }}
                  source={{
                    uri: 'https://picsum.photos/200/200',
                  }}
                />
              </View>
            </ForeignObject>
            <ForeignObject x={55} y={5} width={100} height={100}>
              <View style={{ width: 200, height: 400, transform: [] }}>
                <Text style={{ color: 'blue' }}>Testing</Text>
                <Text style={{ color: 'green' }}>Testing2</Text>
              </View>
            </ForeignObject>
          </G>
        </Svg>
      </View>
    );
  }
}

Markers are symbols attached to vertices of path, line, polyline, and polygon elements (e.g., for arrowheads).

To use a marker:

1. Define a <Marker> element inside <Defs> with an id.
2. Use properties like markerStart, markerMid, or markerEnd on the target element to reference the marker via url(#id).

Common marker properties include viewBox, refX, refY, markerUnits, markerWidth, markerHeight, and orient.

<Svg width="400" height="200" viewBox="0 0 4000 2000">
  <Defs>
    <Marker
      id="Triangle"
      viewBox="0 0 10 10"
      refX="0"
      refY="5"
      markerUnits="strokeWidth"
      markerWidth="4"
      markerHeight="3"
      orient="auto">
      <Path d="M 0 0 L 10 5 L 0 10 z" />
    </Marker>
  </Defs>
  <Rect
    x="10"
    y="10"
    width="3980"
    height="1980"
    fill="none"
    stroke="blue"
    strokeWidth="10"
  />
  <Path
    d="M 1000 750 L 2000 750 L 2500 1250"
    fill="none"
    stroke="black"
    strokeWidth="100"
    markerEnd="url(#Triangle)"
  />
</Svg>