Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Medium

React Native SVG

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

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

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 install

Fabric's Support

The new rendering system of Reactive Native is called Fabric. 

react-native-svg react-native
>=13.0.0 0.69.0+
>=13.6.0 0.70.0+

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 Code Studios 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!


Happy Learning!

Topics covered
1.
Introduction
2.
What is SVG?
3.
What is React Native SVG?
4.
Using React Native SVG
4.1.
Installation
5.
Fabric's Support
6.
Does React Native support SVGs?
7.
Rendering SVG Shapes in React Native Project in Your Preferred Editor
8.
Rendering SVG Images and Icons in React Native
9.
XML Strings to Render SVGs
10.
Frequently Asked Questions
10.1.
What is the use of react-native SVG transformer?
10.2.
How to display SVG in a react native project for Android production release using react-native-svg-uri?
10.3.
How do I increase SVG icon size in React Native?
10.4.
What is AOL's 'art' format?
11.
Conclusion