# software-mansion/react-native-svg

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/software-mansion-react-native-svg).**

7,990 stars · 1,185 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/software-mansion/react-native-svg
- awesome-repositories: https://awesome-repositories.com/repository/software-mansion-react-native-svg.md

## Description

This project is a graphics library for React Native that provides a cross-platform vector rendering engine. It maps SVG XML elements to native graphics APIs, allowing for the creation of scalable shapes and custom illustrations that maintain visual consistency across mobile and web environments.

The library functions as a mapper that converts standard SVG markup into declarative component structures. It enables the creation of interactive vector interfaces by providing components that can detect and respond to user touch events.

Its capability surface includes drawing basic geometric primitives and complex paths, rendering vector text, and creating color gradients and patterns. It supports advanced visual effects through the use of alpha masks, clipping paths, and filters. Additionally, the system can load and render graphics dynamically from remote URIs or raw XML strings.

## Tags

### Software Engineering & Architecture

- [SVG to React Component Mappings](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-tools/internal-tree-representations/ui-component-model-trees/react-component-tree-mappings/svg-to-react-component-mappings.md) — Maps SVG XML elements to platform-specific view hierarchies using a React component tree.
- [Cross-Platform View Projections](https://awesome-repositories.com/f/software-engineering-architecture/polymorphism-patterns/cross-platform-view-projections.md) — Renders vector data through different host implementations for mobile and web to ensure consistent visual output.

### User Interface & Experience

- [Vector Graphics Rendering](https://awesome-repositories.com/f/user-interface-experience/vector-graphics-rendering.md) — Implements a rendering engine for scalable vector graphics to ensure high-fidelity visual output across platforms. ([source](https://github.com/software-mansion/react-native-svg#readme))
- [Multi-Touch Interaction Handling](https://awesome-repositories.com/f/user-interface-experience/event-handling/multi-touch-interaction-handling.md) — Detects and processes touch interactions, including presses and long-presses, directly on vector components. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Vector UI Interactivity](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/vector-ui-interactivity.md) — Enables the creation of vector-based interface elements that respond to touch events.
- [Interactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-frameworks.md) — Provides a framework for building complex, pointer-responsive vector user interfaces.
- [Native Rendering Bridges](https://awesome-repositories.com/f/user-interface-experience/native-rendering-bridges.md) — Provides the bridge mechanism that maps high-level SVG component definitions to native mobile graphics widgets.
- [JSON Message Bus Bridges](https://awesome-repositories.com/f/user-interface-experience/native-rendering-bridges/json-message-bus-bridges.md) — Implements a bridge that serializes UI updates as JSON messages to a native host for vector rendering.
- [Visual Filter Manipulators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/blur-effects/visual-filter-manipulators.md) — Applies visual filter manipulators like blurring, color matrix transforms, and shadows to vector elements. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Clipping Path Applications](https://awesome-repositories.com/f/user-interface-experience/clipping-utilities/masking-utilities/clipping-path-applications.md) — Provides tools for restricting the visible region of a graphic using vector-defined clipping paths. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Vector Image Loaders](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/remote-content-renderers/vector-image-loaders.md) — Enables loading and displaying vector graphics from remote URIs with fallback support. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Interaction Tracking](https://awesome-repositories.com/f/user-interface-experience/interaction-tracking.md) — Calculates spatial coordinates and boundaries to determine user interaction points within vector graphics.
- [Vector Interaction Events](https://awesome-repositories.com/f/user-interface-experience/thread-interaction-events/vector-interaction-events.md) — Tracks touch coordinates against vector hit-boxes to trigger events on specific nested graphic elements.

### Graphics & Multimedia

- [Shape Drawing](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing.md) — Provides tools for defining and rendering basic geometric primitives like rectangles, circles, and polygons. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Composite Path Construction](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/polygon-drawing/composite-path-construction.md) — Constructs complex vector paths using a combination of linear segments, Bézier curves, and elliptical arcs. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Coordinate and Viewport Transformations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations.md) — Provides mathematical systems for mapping SVG document spaces and view-boxes to the display viewport.
- [Cross-Platform Component Libraries](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/cross-platform-component-libraries.md) — Provides a standardized component library for rendering consistent vector graphics across mobile and web platforms.
- [Interactive SVG Elements](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/interactive-svg-elements.md) — Creates SVG graphics that respond to user inputs to trigger interface updates and interactions.
- [Cross-Platform Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/multi-mode-rendering-strategies/cross-platform-rendering-engines.md) — Serves as a cross-platform rendering engine that maps SVG XML to native graphics APIs.
- [Vector Graphics Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/vector-rendering-pipelines/vector-graphics-renderers.md) — Utilizes vector graphics renderers to dynamically update visual elements in response to attribute changes.
- [Gradient Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-renderers.md) — Implements rendering logic for linear and radial gradients to fill or stroke vector shapes. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Dynamic Vector Graphics](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/dynamic-vector-graphics.md) — Allows for the programmatic loading and updating of vector graphics from external sources without redeployment.
- [Raster Image Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/graphics-apis-bindings/graphics-rendering-apis/dynamic-pixel-renderers/pixel-art-renderers/raster-image-generation/raster-image-rendering.md) — Displays bitmap raster image data within a vector coordinate system. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Graphic Element Grouping](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-initialization/scene-composition/grouped-transformations/graphic-element-grouping.md) — Provides grouping of vector elements to apply collective transformations and inherited styles. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Text Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering.md) — Supports rendering text strings onto a graphics canvas with style and path support. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Alpha Compositing](https://awesome-repositories.com/f/graphics-multimedia/media-processing-analysis/face-portrait-manipulation/image-blending/premultiplied-alpha-blending/alpha-compositing.md) — Implements alpha compositing to blend foreground images and background layers using transparency masks. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))
- [Visual Effects](https://awesome-repositories.com/f/graphics-multimedia/svg-data-visualization/visual-effects.md) — Implements advanced visual enhancements for SVG elements, including masks, clipping paths, and filters.
- [SVG Fill Patterns](https://awesome-repositories.com/f/graphics-multimedia/svg-fill-patterns.md) — Uses SVG definitions to create custom patterns and textures for filling vector shapes. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))

### Mobile Development

- [React Native Libraries](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-libraries.md) — Acts as a comprehensive React Native library for rendering scalable vector graphics and custom illustrations.

### Part of an Awesome List

- [SVG XML Renderers](https://awesome-repositories.com/f/awesome-lists/data/html-and-xml-parsing/xml-parsing/svg-xml-renderers.md) — Renders vector graphics directly from raw XML strings and files with internal styling. ([source](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md))

### Web Development

- [SVG Component Transformations](https://awesome-repositories.com/f/web-development/svg-component-transformations.md) — Transforms standard SVG markup into functional React component structures for use in a declarative UI. ([source](https://github.com/software-mansion/react-native-svg#readme))
- [React Native Converters](https://awesome-repositories.com/f/web-development/svg-component-transformations/react-native-converters.md) — Transforms SVG markup into compatible React Native components for seamless integration.