---
name: svg
description: "Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app."
---

# SVG

Software Mansion's production SVG patterns for React Native using React Native SVG.

For API details on specific components and props, webfetch https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

## References

| File | When to read |
|------|-------------|
| `when-to-use.md` | Deciding between react-native-svg, expo-image, @expo/vector-icons, Skia, or Lottie |
| `svg.md` | Installing react-native-svg; loading SVGs from URIs, XML strings, or files; filters; touch events; performance considerations; known issues |
