# 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', or any request to display scalable vector content in a React Native app.

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

---


# SVG

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

## 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; performance considerations; known issues |
| `animation-patterns.md` | Animating SVG elements and paths with Reanimated |