Tel: (+44) 1482 234021 | info@wearesauce.io

SVG Optimisation: Working with complex Scalable Vector Graphics in React Native

An app we’ve been building recently for Moodbeam required working with some fairly complex SVG files for visualising charts and graphs, so I did some investigating into general SVG optimisation and graphic visualisations.

What are SVGs?

SVG stands for Scaleable Vector Graphic. Because they are drawn every time they load, the images look good on every screen size. The file size is relatively small and they are infinitely scalable.

SVG has prebuilt shapes; rectangles, circles and the path tool. The path tool in particular is very powerful at creating custom shapes.

You also have the option to group, reuse and create symbols with SVGs which helps when producing complex images. There is a good documentation on the history of SVGs on Mozilla Design Network.

illustrator and sketch

You also want to be exporting an SVG, not saving one. The difference in file size is significant and will impact the performance of your project.

 
illustrator+compression
 

Export options in Illustrator

When you go to export in Illustrator from File > Export > Export As ...

 
illustrator svg export options
 

You have several options to select from the SVG Options.

For styling, most of the time you will use presentation attributes for the most conservative export. CSS overwrites presentation attributes so you can still affect the svg with hover state.

For the font option, choose svg as it's the most efficient. You would only use 'convert to outlines' to turn the font into vectors.

For the image setting, 'linking' keeps your SVG and non SVG components separate and easier to read. If there are no raster graphics within your SVG, 'embed' is a better option.

Object IDs are used by CSS or JS in order to animate properties of the SVG. Minimal is the most conservative option. It's best to have organised your svg layers so you can use the layers option to target certain parts of the svg to manipulate.

Decimal is set to 2 by default which is the best option. The smaller the number, the less precise your vectors will be. The bigger is it, the more precise, but it also adds to the file size.

You want to make sure that both minify and responsive are both checked.

Even after exporting, there are tools online that can prepare your svgs further by bringing the file size down even smaller.

Both SVGOMG and Peter Collingridge’s SVG editor allow you to paste in the svg code and remove unnecessary lines of code within the file. You can cut the file size down to as much as half!

SVGOMG

Converting SVG files into React Native Components

There are a few differences when it comes to SVGs in HTML and SVGs in React Native. Values for attributes are in quotes for HTML and braces in JSX in react native. Also, SVG isn’t natively supported in react native, so you need to import the the files via a library, in our case, react-native-svg.

SVGR allows you to convert an HTML-ready SVG into a React / React Native component that uses JSX.

This is really handy if you have an exported SVG that still had lots of lines of code that needed the attributes converting into something react native would be able to work with.

difference in code

Styling and Animating SVGs in React Native

One of the biggest advantages SVGs has over other image formats, is that it can be styled, animated and interacted with using CSS and JavaScript.

React Native doesn’t support animation out of the box, so you need to import a library in order to set keyframes.  In most cases, especially for UI, the Animated API is what you will be using for your project. Animated is actively being worked on to make native. It allows you to control and animate specific views in react native. These views or other components can be passed animated values once they have been turned into animated components.

The D3 Library

You can’t talk about animated SVG graphs and charts without mentioning the D3 library.

D3 stands for Data-driven Documents. It is a JavaScript library used for producing dynamic, interactive data visualisations. D3 itself doesn’t render the graph or chart, so it will need to be used alongside a vector library.

Data Visualisation Libraries in React

There are various graph/chart libraries for React and React Native projects, but be aware of how performant they are. By overusing them, you can slow down your application so test a few libraries out first to see what will suit your situation best.

react native svg charts

React-native-svg-charts is quite a popular one and can be customised up to a point. For most dashboard UI, using a graph/chart library would save you a lot of time.

Character Animation

There will be scenarios where you are building an app that requires a lot of complex character animation. The best solution is to produce the animations first before bringing them into your project

vector characters

By using the Lottie library by AirBnB, you can animate a vector character, text or logo in After Effects and export a file that can be imported into your web, React and React Native projects.