Importing SVG files in React can be done in a number of ways, letting you take advantage of the small file size and scalability of SVG images. This article explains the different ways you can use SVG images in React, as well as how to make them interactive, animate them, and use them in data visualization.

What is an SVG image and what are the advantages of using them?

An SVG (scalable vector graphics) image is an image format that defines images as XML markup. Rather than using pixels like JPG, PNG, GIF, and WEBP bitmap image formats, SVGs use vector graphics: shapes and points are defined in their XML markup as mathematical equations, which are then plotted on-screen.

The SVG example below draws a blue circle with a red border by specifying its radius (r) and centerpoint (cx, cy):

SVGs provide several advantages over bitmap image formats:

• SVG images can be scaled (zoomed) without becoming pixelated, as the vector graphics are re-drawn for the current screen size and resolution whenever the view window changes.

• Since they don't have to store data for every pixel, SVG images of shapes and simple diagrams have a smaller file size.

• They can be styled, manipulated, and animated using CSS and JavaScript.

• Text in SVGs is selectable and searchable, which has benefits for SEO and accessibility.

SVGs are best suited for presenting icons and logos with geometric designs, as well as graphs and charts. They are also used for design elements on web pages to reduce the number of bitmap images that need to be loaded.

While versatile, SVGs are not suited for showing photographs and other detailed images. Attempting to represent a photo as an SVG results in a huge file that takes a lot of processing power to draw on-screen, compared to bitmap file formats that are designed for handling complex images.

How to import SVG images in React (with working code examples)

There are several methods for using SVG images in React. Which method you use will largely depend on what you are trying to accomplish; however, it is generally preferable to have your SVG images stored in their own files or in a sprite sheet so that they can be edited using graphic design tools. They can then be imported into React as components for re-usability.

If you need a React project to get started with, check out create-contentful-app, a tool that bootstraps a whole React project that you can develop and test locally and then deploy directly to Contentful’s servers with just a few commands.

Method #1: Inline as JSX

You can embed SVG files directly in React JSX markup inside your JavaScript files:

Above, a React component is created that contains an SVG that shows an orange triangle. This works the same way as defining SVGs in HTML — you just use the <svg> tag to define an SVG element. You can see this demo in action here.

Method #2: Using the <img> tag

SVG files contain the SVG XML markup that defines an image, stored in a separate file rather than inline in your HTML or JSX. You can import SVG files directly into React components and then embed them using the HTML <img> element:

Method #3: As a reusable React component

Similar to the inline JSX method shown above, you can define your SVGs in their own components so that they can be reused across your application:

You can preview and experiment with this example here. Note that this example also demonstrates how a reusable SVG React component can be modified by passing it properties that modify its CSS.

Method #4: From an SVG sprite sheet

An SVG sprite sheet stores multiple images in one file, reducing the number of files that need to be downloaded. Individual images are then extracted from the sprite sheet for display. 

Because SVGs are defined as markup rather than having to pass coordinates to take slices from the sprite sheet to get the images in it, you can reference the id of a predefined SVG symbol:

Note that the SVG element in this example includes multiple symbols with unique IDs (orange-triangle, green-square, and blue-circle) that are then used by the getSVGSprite component to extract the sprite from the sprite sheet.

This example demonstrates using a reusable React component to include the SVG in the component for display, but you can also use any of the other methods demonstrated on this page to import the SVG into React.

Method #5: React-svg library

The react-svg library injects an SVG image into the React DOM. You can install it by running:

npm install react-svg

Next, import it and use the ReactSVG element in your React components when you need to load an SVG file from a URL:

Note that this demo encodes the SVG file as a base64 URI rather than linking to an SVG file at a URL.

Method #6: SVGR

SVGR is a library that turns SVG files into reusable React components. This means you don't have to create your own React component for each SVG you need to use — you just point SVGR at them, and the work is done for you. 

Install SVGR for webpack by running:

npm install @svgr/webpack

You can then import SVG image files as React components. In this example, you can use  <OrangeTriangle /> to display the SVG rather than defining the image in JSX or in your own component:

Note that you don't see mention of SVGR itself in the above code: SVGR runs when your code is bundled using webpack, and it converts your SVG images to React components during this process.

Method #7: Using SVG as a data URL

You can also embed SVG files as a data URL, which is a string that encodes the image data for storage within your markup. This is useful for small files and is often used as a way to store and display images in databases.

You can see a working demo of this here.

Examples: Styling SVGs using CSS

One of the advantages of SVGs is that they can be styled using CSS. Below are examples that show SVGs imported in React using various methods and then styled.

Styling a reusable React component by altering its properties directly is demonstrated in the example below. Adding CSS style to an SVG defined in JSX:

SVGR also lets you style SVG elements using CSS by passing properties:

External stylesheets can also be used to style SVG images using CSS. A class name should be added to the element inside the SVG, which can then be referenced in the CSS to override its properties:

Animated/interactive SVGs

Another feature of SVGs is that they can be animated and made interactive by altering their appearance in real time using React. An example of this is shown below:

This combines several of the methods shown on this page to create an animated, interactive image. You can run this interactive SVG React demo here.

Using SVGs for data visualization in React

D3 is a library for visualizing data using JavaScript. It can be used with react-svg to create data-driven visualizations in your React SVGs. Both packages can be installed into your React project by running:

npm install d3 react-svg

The below example creates some bar graphs using D3 and react-svg:

You can see this example in action here.

Conclusion: Delivering images to React apps fast, at scale

SVGs can be used to build highly efficient and fast-loading applications, and they can be animated using React to create user interfaces that engage users. However, they are only suitable for simple shapes and basic coloring, becoming cumbersome (and resource intensive) for complex images. When displaying photos, illustrations, or diagrams, SVGs are no replacement for bitmap image formats like JPEG, PNG, GIF, and WEBP.

The Contentful® Composable Content Platform automatically optimizes all of your images and other media assets for your users’ different devices, and it delivers them from its high-speed CDN distributed across the globe. 

Create, manage, and collaborate on your content, and deliver it to your React websites and apps using our high-speed content delivery network.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.