# SVG

SVG — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/svg/

Legend Motion v2 documentation. Current documentation version.

To use SVG animations, you'll need to additionally install `react-native-svg`. See [its documentation](https://github.com/react-native-svg/react-native-svg#installation) for details.

## [Usage](https://legend.so/motion/v2/usage/svg/#usage)

SVG animations work by animating the props that you want to change, with the `animateProps` prop.

`MotionSvg` includes `Svg`, `Polygon`, `Rect`, `Circle`, `Ellipse`, `Line`, `Polyline`, `Path`, `Text`, `TSpan`, `TextPath`, `G`, `ClipPath`, `LinearGradient`, and `RadialGradient`. Other `react-native-svg` components can be wrapped with `createMotionAnimatedComponent` from `@legendapp/motion`.

```jsx
import { MotionSvg } from '@legendapp/motion/svg';

<MotionSvg.Svg height="200" width="200">
  <MotionSvg.Rect
    stroke="#555"
    strokeWidth="1"
    animateProps={{
      fill: value ? "#F81FEC" : "#59B0F8",
      x: value ? "60" : "0",
      y: value ? "40" : "10",
      width: value ? "140" : "50",
      height: value ? "140" : "50",
    }}
    transition={{
      default: {
        type: "spring",
        damping: 20,
        stiffness: 300,
      },
      fill: {
        type: "tween",
        duration: 800,
      },
    }}
  />
</MotionSvg.Svg>
```

You can see in this example that we used a tween transition for the `fill` color and set a default spring transition for the rest of the props, because spring transitions don't look good on colors.

[View Markdown](https://legend.so/motion/v2/usage/svg.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+SVG&body=Page%3A+https%3A%2F%2Flegend.so%2Fmotion%2Fv2%2Fusage%2Fsvg%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)