# Svg

> 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.

- Skill: `software-mansion-labs/svg` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add software-mansion-labs/svg`
- Raw SKILL.md: https://api.skillmd.com/api/skills/software-mansion-labs/svg/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: software-mansion-labs (https://skillmd.com/u/software-mansion-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/software-mansion-labs/svg

---


# 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 |