Table of contents
1.
Introduction
2.
What is SVG?
3.
What is React Native SVG?
4.
Using React Native SVG
4.1.
Installation
4.2.
Supported Versions of React Native
4.3.
Fabric's Support
4.4.
react-native-svg Props
4.5.
Troubleshooting
5.
Does React Native support SVGs?
6.
Rendering SVG Shapes in React Native Project in Your Preferred Editor
7.
Rendering SVG Images and Icons in React Native
8.
XML Strings to Render SVGs
9.
Frequently Asked Questions
9.1.
What is the use of react-native SVG transformer?
9.2.
How to display SVG in a react native project for Android production release using react-native-svg-uri?
9.3.
How do I increase SVG icon size in React Native?
9.4.
What is AOL's 'art' format?
10.
Conclusion
Last Updated: Nov 10, 2024
Medium

Introduction to React Native SVG

Author Arya Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Welcome to our blog on "React Native SVG"! In this blog, we delve into the powerful synergy of React Native and Scalable Vector Graphics (SVG). React Native SVG refers to the integration of Scalable Vector Graphics (SVG) in React Native applications. SVG is an XML-based vector image format, and when combined with React Native, it allows developers to create dynamic and scalable graphics in mobile apps.

React Native SVG

With its rich UI components, one can achieve fast interfaces and responsiveness,  Live Reload, etc., but still incorporating vector graphics can be troublesome. React Native SVG comes in the role of offering various solutions to this problem. But before diving deeper into React Native SVG, let's overview SVG.

What is SVG?

Scalable Vector Graphics (SVG) is an image format that uses vector graphics for displaying images. What makes them familiar is their ability to scale any resolution. Overall, the resolution doesn’t affect the size of the file, which allows them to be much smaller than their pixel-based counterparts. SVG is an XML-based format controlled by mathematical equations, unlike formats like .png and .jpeg, which are driven by pixels and can’t scale to any desired size without pixelating.

SVG logo

If you open an SVG file in your text editor, a large XML code filled with numbers and different nodes will be visible. So to render SVGs directly, we need React Native Component.

Also see,  React Native Reanimated

What is React Native SVG?

React Native SVG is a library that integrates and incorporates SVG in applications. One can create various animations, graphics, and visually appealing elements without getting bothered by resolutions. 

React Native SVG provides a way to integrate SVG and comes with various other advantages like Scalability, Cross Platform compatibility, etc. We will go through all of them one by one:

  • Visually Appealing Animations: The library integrates with other libraries like  React Native Animated, popular animation libraries that allow users to create visually appealing animations and stunning transitions.
     
  • Cross-Platform: It can work on both iOS and Android platforms.
     
  • Scalability: Without compromising quality, the developers can scale the graphics up or down, making them perfect for every screen size.
     
  • Optimization: React Native SVG renders SVG graphics efficiently, optimizing the performance.
     

Using React Native SVG

As React Native doesn't have default support for React Native SVG, we need some libraries from the npm registry. For many use cases, we’ll use react-native-svg to cater to this purpose. So before installing, for having SVG support on both the Android and iOS platforms, make sure to install the react-native-svg and react-native-svg-transformer packages. 

In case you are using Expo CLI, use the following command.
 

expo init SvgTutorial
expo install react-native-svg

Installation

The Expo client app already contains native code with expo-cli. Use the following command to install the library:
expo install react-native-svg


The library can be installed with react-native-cli using the following commands:

from npm
npm install react-native-svg
from yarn
yarn add react-native-svg


Linking the native code now,

cd ios && pod installSupported Versions of React Native

Supported Versions of React Native

react-native-svg VersionReact Native Version Compatibility
13.0.0+0.69.0 and above
13.6.0+0.70.0 and above

Fabric's Support

The new rendering system of Reactive Native is called Fabric. 

react-native-svgreact-native
>=13.0.00.69.0+
>=13.6.00.70.0+

react-native-svg Props

Prop NameDescription
fillSets the fill color of the SVG shape.
strokeSpecifies the color of the shape’s outline.
strokeWidthDefines the width of the outline stroke.
strokeOpacityControls the opacity level of the outline stroke.
strokeLinecapDetermines the shape at the end of a stroke; options include butt, round, or square.
strokeLinejoinDefines the shape for corners of paths or shapes when stroked; options are miter, round, or bevel.
x, ySpecifies the X and Y coordinates for positioning the shape within the SVG canvas.
rotationSets the degree of rotation for the SVG element.
scaleAdjusts the scaling factor of the shape.
origin, originX, originYSets the transform origin for positioning the shape within its container.
viewBoxDefines the coordinate system of the SVG, helping to scale and position its contents within a given area.

Troubleshooting

Troubleshooting in React Native, especially when using libraries like react-native-svg, involves diagnosing and resolving common issues that arise during development. Here are some typical troubleshooting steps and tips:

  • Check Compatibility: Ensure that the versions of react-native and react-native-svg are compatible, especially if using React Native’s Fabric renderer, as some versions are not backwards compatible.
  • Clear Cache: Sometimes, issues are due to cached dependencies or builds. Running commands like npx react-native start --reset-cache and clearing the build folder can resolve problems related to outdated cache files.
  • Debugging Props and SVG Renders: If an SVG doesn’t render as expected, verify that required props (like width, height, and viewBox) are set correctly in the Svg component, as missing props can lead to rendering issues.
  • Network and Local SVG Issues: For network SVGs, ensure URLs are accessible. For local SVGs, verify they are correctly imported and use a compatible SVG transformer.
  • React Native Linking: If the SVG library isn’t recognized, try linking it manually with react-native link react-native-svg or updating dependencies, as this can address linking and dependency issues.

Does React Native support SVGs?

React Native itself does not have built-in support for rendering SVG (Scalable Vector Graphics) images. However, there are third-party libraries and solutions available that enable SVG support in React Native applications.

One popular library for integrating SVG in React Native is react-native-svg. This library allows you to use SVG elements directly within your React Native components, providing a way to render scalable vector graphics.

Rendering SVG Shapes in React Native Project in Your Preferred Editor

To get started, import the "Svg" and "Circle" components from "react-native-svg" after opening the project in your preferred editor.


import Svg, { Circle } from 'react-native-svg';


With the following code snippet, one can create a React Native SVG circle:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

export default function App() {
 return (
   <View style={styles.container}>
     <Svg height="60%" width="60%" viewBox="0 0 100 100" >
       // For the circle
       <Circle cx="50" cy="50" r="50" stroke="blue" strokeWidth="1" fill="#ADD8E6" />
     </Svg>
   </View>
 );
}
// Styles for the container.
const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
   alignItems: 'center',
   justifyContent: 'center',
 },
});

Rendering SVG Images and Icons in React Native

Let's now try to render React Native SVG icons and images. Firstly we need to use SvgUri, so importing that.

import { SvgUri } from 'react-native-svg';


To specify the width, height, and uri props, use the <SvgUri> component. An SVG URL can be specified with the URI prop. For example, if you want to display this SVG, you can do so by adding the following URL to the URI prop of your SvgUri> component:


import React from 'react';
import { SvgUri } from 'react-native-svg';

export default function App() {
 return (
     <SvgUri width="100%"   height="100%"  uri="%YOUR PERSONAL URI OF IMAGE%"/> 
 );
}


The following will be the output of the above code syntax.

output

XML Strings to Render SVGs

To render the image using XML strings, firstly, we have to import the dependencies

import { SvgXml } from 'react-native-svg';


Then, you can render the image. With the help of the following code syntax by passing a variable to the XML prop inside your <SvgXml> component:


import React from 'react';
import { SvgXml } from 'react-native-svg';
export default function App() {
 const xml = `<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntaxns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg6129" viewBox="0 0 532.14 534.9" version="1.1">
...
</svg>
`;
   
 return (
<SvgXml xml={xml} width="100%" height="100%" />
 );
}

Frequently Asked Questions

What is the use of react-native SVG transformer?

The React Native SVG transformer is used to transform SVG (Scalable Vector Graphics) files into a format compatible with React Native. It facilitates the integration of SVG graphics seamlessly within React Native applications.

How to display SVG in a react native project for Android production release using react-native-svg-uri?

We need to create a wrapper component that returns SVG objects based on the platform because react-native-svg-uri worked fine on iOS but having an issue with the production release of Android.

How do I increase SVG icon size in React Native?

To increase the SVG icon size in React Native, adjust the width and height attributes within the SVG component or use styles like style={{ width: 40, height: 40 }} to set the desired size.

What is AOL's 'art' format?

An ART file was built to reduce the image size for quick downloading over the internet. It is a compressed bitmap image file created and used by America Online (AOL) service and client software. The compression algorithm is applied to the image to generate.

Conclusion

This article explains the SVG image rendering in React Native. Basic Information about React Native is present in this article with an installation guide to the SVG module, and different ways to implement is shown with examples.

We hope this blog has helped you enhance your knowledge of the React Native SVG. If you want to learn more, then check out our articles.

You may refer to our Guided Path on Code360 for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Live masterclass