Let's talk about React asynchronously loading SVG

Let's talk about React asynchronously loading SVG

Lets talk about React asynchronously loading SVG, lets talk about all the good things and the bad things that may be. Okay ‘90’s song references aside (if you didn’t get that reference then you think I’m old!). So I’ve been working on a little side project where users can upload an SVG file to use a graphical template for creating fast and simple web layouts. So I thought this would be a good time to have a look through some of the specific problems that this project has unearthed. Today its asynchronously loading SVG’s into React and converting them to React elements.

Let's talk about SVG

Okay ‘90’s song references aside (if you didn’t get that reference then you think I’m old!)

So I’ve been working on a little side project where users can upload an SVG file to use a graphical template for creating fast and simple web layouts.

So I thought this would be a good time to have a look through some of the specific problems that this project has unearthed.

Today its asynchronously loading SVG’s into React and converting them to React elements.


If we have access to our SVG at build then it’s a far more sensible idea to directly import the SVG into our codebase. If we set up our project using create-react-app then we can use a standard import statement to get our SVG as an element variable.

import logo from './logo.svg';

Alternatively, if we need more fine-grained control over our SVG then SVGR provides a simple command-line interface for converting SVG to React components.

npx @svgr/cli logo.svg

We could also employ some standard HTML/CSS methods of displaying an external SVG.

As background-image

This method can be very useful when you don’t need to have any direct control of the SVG within your application aside from sizing and placement of the image. I’ll use inline styles in my script to keep the examples readable.

const Logo = () => {
        return( 
          <div
            style={{
              backgroundImage: 'url(https://upload.wikimedia.org/wikipedia/commons/4/47/React.svg)',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center',
              backgroundSize: 'contain',
              height: '500px',
              width: '500px'
            }}
          >
          </div>
      )
    }

simple SVG background-image

As an source

const LogoImg = () => {
      return (
        <img
          src='https://upload.wikimedia.org/wikipedia/commons/4/47/React.svg'
          style={{
            height: '500px',
            width: '500px'
          }}
        />
      )
    }

Now the above options are great if all you need to do is display a nice crisp SVG image. It will still be re-sizable and scale beautifully but that’s it!

So far this doesn’t give us much room to customize the look and functionality of our external SVG.

reactjs react svg reactjs-development programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

ReactJS Development Company

ReactJS Development Company in Chicago, USA with experienced and tailored ReactJS Developers at Cerdonis Technologies, LLC. Hire ReactJS Developers on Hourly & Full-time Basis Near Me.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...