react-native-svg

(★ 8,000)

SVG library for React Native, React Native Web, and plain React web projects.

File Explorer

Download Latest Version (.zip)

- - bug_report.yaml
  - config.yml
- - android-build-test.yml
  - check-archs-consistency.yml
  - close-when-stale.yml
  - e2e-android.yml
  - e2e-ios.yml
  - ios-build-test.yml
  - js-build-test.yml
  - macos-build-test.yml
  - needs-more-info.yml
  - needs-repro.yml
  - publish.yml
  - windows-build-test.yml
- FUNDING.yml
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
- pre-commit
- - css.test.tsx.snap
- - GeneralSvgRenderingTest.spec.tsx
- css.test.tsx
- touchable.test.tsx
- build.gradle
- gradlew
- gradlew.bat
- proguard-rules.pro
- spotless.gradle
- - RNSVGBrush.h
  - RNSVGBrush.mm
  - RNSVGBrushType.h
  - RNSVGContextBrush.h
  - RNSVGContextBrush.mm
  - RNSVGPainter.h
  - RNSVGPainter.mm
  - RNSVGPainterBrush.h
  - RNSVGPainterBrush.mm
  - RNSVGSolidColorBrush.h
  - RNSVGSolidColorBrush.mm
- - RNSVGClipPath.h
  - RNSVGClipPath.mm
  - RNSVGDefs.h
  - RNSVGDefs.mm
  - RNSVGForeignObject.h
  - RNSVGForeignObject.mm
  - RNSVGGroup.h
  - RNSVGGroup.mm
  - RNSVGImage.h
  - RNSVGImage.mm
  - RNSVGLinearGradient.h
  - RNSVGLinearGradient.mm
  - RNSVGMarker.h
  - RNSVGMarker.mm
  - RNSVGMask.h
  - RNSVGMask.mm
  - RNSVGPath.h
  - RNSVGPath.mm
  - RNSVGPattern.h
  - RNSVGPattern.mm
  - RNSVGRadialGradient.h
  - RNSVGRadialGradient.mm
  - RNSVGSvgView.h
  - RNSVGSvgView.mm
  - RNSVGSymbol.h
  - RNSVGSymbol.mm
  - RNSVGUse.h
  - RNSVGUse.mm
- - RNSVGBlendMode.h
  - RNSVGColorMatrixType.h
  - RNSVGCompositeOperator.h
  - RNSVGEdgeMode.h
  - RNSVGFeBlend.h
  - RNSVGFeBlend.mm
  - RNSVGFeColorMatrix.h
  - RNSVGFeColorMatrix.mm
  - RNSVGFeComposite.h
  - RNSVGFeComposite.mm
  - RNSVGFeFlood.h
  - RNSVGFeFlood.mm
  - RNSVGFeGaussianBlur.h
  - RNSVGFeGaussianBlur.mm
  - RNSVGFeMerge.h
  - RNSVGFeMerge.mm
  - RNSVGFeOffset.h
  - RNSVGFeOffset.mm
  - RNSVGFilter.h
  - RNSVGFilter.mm
  - RNSVGFilterPrimitive.h
  - RNSVGFilterPrimitive.mm
  - RNSVGFilterRegion.h
  - RNSVGFilterRegion.mm
- - project.pbxproj
- - RNSVGCircle.h
  - RNSVGCircle.mm
  - RNSVGEllipse.h
  - RNSVGEllipse.mm
  - RNSVGLine.h
  - RNSVGLine.mm
  - RNSVGRect.h
  - RNSVGRect.mm
- - RNSVGFontData.h
  - RNSVGFontData.mm
  - RNSVGGlyphContext.h
  - RNSVGGlyphContext.mm
  - RNSVGPropHelper.h
  - RNSVGPropHelper.mm
  - RNSVGText.h
  - RNSVGText.mm
  - RNSVGTextPath.h
  - RNSVGTextPath.mm
  - RNSVGTextProperties.h
  - RNSVGTextProperties.mm
  - RNSVGTopAlignedLabel.h
  - RNSVGTopAlignedLabel.ios.mm
  - RNSVGTopAlignedLabel.macos.mm
  - RNSVGTSpan.h
  - RNSVGTSpan.mm
- - RCTConvert+RNSVG.h
  - RCTConvert+RNSVG.mm
  - RNSVGBezierElement.h
  - RNSVGBezierElement.mm
  - RNSVGCGFCRule.h
  - RNSVGConvert.h
  - RNSVGConvert.mm
  - RNSVGFabricConversions.h
  - RNSVGLength.h
  - RNSVGLength.mm
  - RNSVGMarkerPosition.h
  - RNSVGMarkerPosition.mm
  - RNSVGMaskType.h
  - RNSVGPathMeasure.h
  - RNSVGPathMeasure.mm
  - RNSVGPathParser.h
  - RNSVGPathParser.mm
  - RNSVGRenderUtils.h
  - RNSVGRenderUtils.mm
  - RNSVGUnits.h
  - RNSVGVBMOS.h
  - RNSVGVectorEffect.h
  - RNSVGViewBox.h
  - RNSVGViewBox.mm
- - RNSVGCircleManager.h
  - RNSVGCircleManager.mm
  - RNSVGClipPathManager.h
  - RNSVGClipPathManager.mm
  - RNSVGDefsManager.h
  - RNSVGDefsManager.mm
  - RNSVGEllipseManager.h
  - RNSVGEllipseManager.mm
  - RNSVGFeBlendManager.h
  - RNSVGFeBlendManager.mm
  - RNSVGFeColorMatrixManager.h
  - RNSVGFeColorMatrixManager.mm
  - RNSVGFeCompositeManager.h
  - RNSVGFeCompositeManager.mm
  - RNSVGFeFloodManager.h
  - RNSVGFeFloodManager.mm
  - RNSVGFeGaussianBlurManager.h
  - RNSVGFeGaussianBlurManager.mm
  - RNSVGFeMergeManager.h
  - RNSVGFeMergeManager.mm
  - RNSVGFeOffsetManager.h
  - RNSVGFeOffsetManager.mm
  - RNSVGFilterManager.h
  - RNSVGFilterManager.mm
  - RNSVGFilterPrimitiveManager.h
  - RNSVGFilterPrimitiveManager.mm
  - RNSVGForeignObjectManager.h
  - RNSVGForeignObjectManager.mm
  - RNSVGGroupManager.h
  - RNSVGGroupManager.mm
  - RNSVGImageManager.h
  - RNSVGImageManager.mm
  - RNSVGLinearGradientManager.h
  - RNSVGLinearGradientManager.mm
  - RNSVGLineManager.h
  - RNSVGLineManager.mm
  - RNSVGMarkerManager.h
  - RNSVGMarkerManager.mm
  - RNSVGMaskManager.h
  - RNSVGMaskManager.mm
  - RNSVGNodeManager.h
  - RNSVGNodeManager.mm
  - RNSVGPathManager.h
  - RNSVGPathManager.mm
  - RNSVGPatternManager.h
  - RNSVGPatternManager.mm
  - RNSVGRadialGradientManager.h
  - RNSVGRadialGradientManager.mm
  - RNSVGRectManager.h
  - RNSVGRectManager.mm
  - RNSVGRenderableManager.h
  - RNSVGRenderableManager.mm
  - RNSVGSvgViewManager.h
  - RNSVGSvgViewManager.mm
  - RNSVGSymbolManager.h
  - RNSVGSymbolManager.mm
  - RNSVGTextManager.h
  - RNSVGTextManager.mm
  - RNSVGTextPathManager.h
  - RNSVGTextPathManager.mm
  - RNSVGTSpanManager.h
  - RNSVGTSpanManager.mm
  - RNSVGUseManager.h
  - RNSVGUseManager.mm
- .npmignore
- RNSVGContainer.h
- RNSVGNode.h
- RNSVGNode.mm
- RNSVGRenderable.h
- RNSVGRenderable.mm
- RNSVGRenderableModule.h
- RNSVGRenderableModule.mm
- RNSVGSvgViewModule.h
- RNSVGSvgViewModule.mm
- RNSVGUIKit.h
- RNSVGUIKit.macos.mm
- - .eslintrc.js
  - .prettierrc.js
  - index.tsx
  - noNavigationApp.tsx
  - tsconfig.json
- - .gitignore
  - .watchmanconfig
  - app.json
  - babel.config.js
  - common
  - Gemfile
  - Gemfile.lock
  - index.js
  - jest.config.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - .prettierrc.js
  - .watchmanconfig
  - app.json
  - babel.config.js
  - Gemfile
  - Gemfile.lock
  - index.js
  - jest.config.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - .prettierrc.js
  - .ruby-version
  - .watchmanconfig
  - app.json
  - babel.config.js
  - index.js
  - jest.config.js
  - jest.config.windows.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - .watchmanconfig
  - app.json
  - babel.config.js
  - common
  - Gemfile
  - Gemfile.lock
  - index.js
  - jest.config.js
  - metro.config.js
  - package.json
  - yarn.lock
- - .gitignore
  - app.json
  - babel.config.js
  - index.js
  - metro.config.js
  - package.json
  - tsconfig.json
  - yarn.lock
- package.json
- - 1.svg
  - 2.svg
  - 3.svg
  - 4.svg
- - .gitignore
- - .gitignore
- env.ts
- failedCases.json
- generateReferences.ts
- globals.d.ts
- helpers.ts
- matchTestCases.ts
- readFailedCases.ts
- setupJest.ts
- teardownJest.ts
- types.ts
- package.json
- circle.png
- clip-path.png
- ellipse.png
- feColorMatrix.png
- filterImage.png
- g.png
- image.png
- line.png
- lineargradient.png
- linkBinary.png
- path.png
- pencil.png
- polygon.png
- polyline.png
- radialgradient.png
- rect.png
- svg.png
- symbol.png
- text-path.png
- text.png
- touchevents.gif
- tspan.png
- use.png
- codegen-check-consistency.js
- codegen-sync-archs.js
- codegen-utils.js
- format-java.js
- metal.js
- rnsvg_utils.rb
- - css.tsx
  - index.tsx
  - LocalSvg.tsx
- - Circle.tsx
  - ClipPath.tsx
  - Defs.tsx
  - Ellipse.tsx
  - ForeignObject.tsx
  - G.tsx
  - Image.tsx
  - Line.tsx
  - LinearGradient.tsx
  - Marker.tsx
  - Mask.tsx
  - Path.tsx
  - Pattern.tsx
  - Polygon.tsx
  - Polyline.tsx
  - RadialGradient.tsx
  - Rect.tsx
  - Shape.tsx
  - Stop.tsx
  - Svg.tsx
  - Symbol.tsx
  - Text.tsx
  - TextPath.tsx
  - TSpan.tsx
  - Use.tsx
- - AndroidSvgViewNativeComponent.ts
  - CircleNativeComponent.ts
  - ClipPathNativeComponent.ts
  - codegenUtils.ts
  - DefsNativeComponent.ts
  - EllipseNativeComponent.ts
  - FeBlendNativeComponent.ts
  - FeColorMatrixNativeComponent.ts
  - FeCompositeNativeComponent.ts
  - FeFloodNativeComponent.ts
  - FeGaussianBlurNativeComponent.ts
  - FeMergeNativeComponent.ts
  - FeOffsetNativeComponent.ts
  - FilterNativeComponent.ts
  - ForeignObjectNativeComponent.ts
  - GroupNativeComponent.ts
  - ImageNativeComponent.ts
  - index.ts
  - IOSSvgViewNativeComponent.ts
  - LinearGradientNativeComponent.ts
  - LineNativeComponent.ts
  - MarkerNativeComponent.ts
  - MaskNativeComponent.ts
  - NativeSvgRenderableModule.ts
  - NativeSvgSoundModule.ts
  - NativeSvgViewModule.ts
  - PathNativeComponent.ts
  - PatternNativeComponent.ts
  - RadialGradientNativeComponent.ts
  - RectNativeComponent.ts
  - SymbolNativeComponent.ts
  - TextNativeComponent.ts
  - TextPathNativeComponent.ts
  - TSpanNativeComponent.ts
  - UseNativeComponent.ts
  - utils.ts
- - FilterImage.tsx
  - index.tsx
  - types.ts
- - maskType.ts
  - Matrix2D.ts
  - resolve.ts
  - resolveAssetUri.ts
  - SvgTouchableMixin.ts
  - units.ts
  - util.ts
- - fetchData.ts
- - types.ts
  - WebShape.ts
- deprecated.tsx
- elements.ts
- elements.web.ts
- index.ts
- ReactNativeSVG.ts
- ReactNativeSVG.web.ts
- xml.tsx
- xmlTags.ts
- - BrushView.cpp
  - BrushView.h
  - CircleView.cpp
  - CircleView.h
  - CircleViewManager.cpp
  - CircleViewManager.h
  - ClipPathView.cpp
  - ClipPathView.h
  - ClipPathViewManager.cpp
  - ClipPathViewManager.h
  - D2DBrush.cpp
  - D2DBrush.h
  - D2DDevice.cpp
  - D2DDevice.h
  - D2DDeviceContext.cpp
  - D2DDeviceContext.h
  - D2DGeometry.cpp
  - D2DGeometry.h
  - D2DHelpers.h
  - DefsView.cpp
  - DefsView.h
  - DefsViewManager.cpp
  - DefsViewManager.h
  - DirectXDeviceManager.cpp
  - DirectXDeviceManager.h
  - EllipseView.cpp
  - EllipseView.h
  - EllipseViewManager.cpp
  - EllipseViewManager.h
  - GroupView.cpp
  - GroupView.h
  - GroupViewManager.cpp
  - GroupViewManager.h
  - ImageView.cpp
  - ImageView.h
  - ImageViewManager.cpp
  - ImageViewManager.h
  - LinearGradientView.cpp
  - LinearGradientView.h
  - LinearGradientViewManager.cpp
  - LinearGradientViewManager.h
  - LineView.cpp
  - LineView.h
  - LineViewManager.cpp
  - LineViewManager.h
  - MarkerView.cpp
  - MarkerView.h
  - MarkerViewManager.cpp
  - MarkerViewManager.h
  - MaskView.cpp
  - MaskView.h
  - MaskViewManager.cpp
  - MaskViewManager.h
  - packages.lock.json
  - Paper.idl
  - PathView.cpp
  - PathView.h
  - PathViewManager.cpp
  - PathViewManager.h
  - PatternView.cpp
  - PatternView.h
  - PatternViewManager.cpp
  - PatternViewManager.h
  - pch.cpp
  - pch.h
  - PropertySheet.props
  - RadialGradientView.cpp
  - RadialGradientView.h
  - RadialGradientViewManager.cpp
  - RadialGradientViewManager.h
  - ReactPackageProvider.cpp
  - ReactPackageProvider.h
  - ReactPackageProvider.idl
  - RectView.cpp
  - RectView.h
  - RectViewManager.cpp
  - RectViewManager.h
  - RenderableView.cpp
  - RenderableView.h
  - RenderableViewManager.cpp
  - RenderableViewManager.h
  - resource.h
  - RNSVG.def
  - RNSVG.rc
  - RNSVG.vcxproj
  - RNSVG.vcxproj.filters
  - RNSVGModule.h
  - SVGLength.cpp
  - SVGLength.h
  - SvgView.cpp
  - SvgView.h
  - SvgViewManager.cpp
  - SvgViewManager.h
  - SymbolView.cpp
  - SymbolView.h
  - SymbolViewManager.cpp
  - SymbolViewManager.h
  - targetver.h
  - TextView.cpp
  - TextView.h
  - TextViewManager.cpp
  - TextViewManager.h
  - TSpanView.cpp
  - TSpanView.h
  - TSpanViewManager.cpp
  - TSpanViewManager.h
  - Types.idl
  - UnsupportedSvgViewManager.cpp
  - UnsupportedSvgViewManager.h
  - UseView.cpp
  - UseView.h
  - UseViewManager.cpp
  - UseViewManager.h
  - Utils.h
  - versionoverrides.rc
  - ViewManagers.idl
  - Views.idl
- .clang-format
- .gitignore
- ExperimentalFeatures.props
- NuGet.Config
- RNSVG.sln
.clang-format
.eslintignore
.eslintrc.js
.git-blame-ignore-revs
.gitattributes
.gitignore
.npmignore
.prettierrc.js
babel.config.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
jest.config.ts
LICENSE
package.json
react-native.config.js
README.md
rnrepo.config.json
RNSVG.podspec
tsconfig.build.json
tsconfig.json
USAGE.md
yarn.lock

🚀 Installation Guide

1. Get the code

git clone https://github.com/software-mansion/react-native-svg

Downloads the entire project code from GitHub to your computer.

cd react-native-svg

Moves into the project folder you just downloaded.

2. CMake

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
CMake The tool used to generate build configuration.
C/C++ 컴파일러 Windows needs Visual Studio (Community edition, free), macOS needs Xcode Command Line Tools, Linux needs the gcc/g++ package.

cd android/src/main/jni

This project's files live in a subfolder, so move into it first.

mkdir build && cd build

Creates a folder to hold the build output and moves into it.

cmake ..

Analyzes the source code and generates build configuration files (must be run inside the build folder).

make

Compiles the code based on the generated build configuration to produce an executable.

✅ Check that an executable was created inside the build folder, then run it directly (e.g. ./build/app_name).

3. .NET

Medium

Prerequisites

Git Needed to download the project code from GitHub.
.NET SDK The SDK required for the dotnet command.

cd apps/fabric-windows-example/windows

This project's files live in a subfolder, so move into it first.

dotnet restore

Downloads the packages the project depends on.

dotnet run

Builds the project and runs it immediately.

✅ After dotnet run, check the message or address shown in the terminal.

4. Gradle (Java/Kotlin)

Medium

Prerequisites

Git Needed to download the project code from GitHub.
JDK (Java) Required to build and run Java/Kotlin projects.
Gradle If the repo includes gradlew (Gradle Wrapper), you don't need to install Gradle separately.

cd android

This project's files live in a subfolder, so move into it first.

./gradlew build

Builds the project using Gradle.

✅ A BUILD SUCCESSFUL message means it worked. The output is created under build/.

5. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-native-svg

Downloads and installs the libraries listed in package.json.

yarn add react-native-svg

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

6. Ruby

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Ruby Ruby is required to use the bundle command.

cd apps/fabric-example

This project's files live in a subfolder, so move into it first.

bundle install

Installs the Ruby libraries listed in the Gemfile.

✅ If bundle install finishes without errors, continue with the run command from the README (e.g. rails server).

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

react-native-svg

File Explorer

🚀 Installation Guide

2. CMake

3. .NET

4. Gradle (Java/Kotlin)

5. Node.js

6. Ruby

Today's picks

Was this content helpful?

Recent Feedback

react-native-svg

File Explorer

🚀 Installation Guide

2. CMake

3. .NET

4. Gradle (Java/Kotlin)

5. Node.js

6. Ruby

Today's picks

Was this content helpful?

Recent Feedback

Download README