A guide to using SVGs in React

SVG, or Scalable Vector Graphics, is a vector graphics image format based on XML. It was developed in the late 90s and was poorly supported until around 2016.

Today, a huge percentage of icon libraries, such as Flaticon, Font Awesome, and Material Icon have full support for SVG. Brands such as X, YouTube, Udacity, and Netflix use SVG for some of their images and icons.

In this article, we will explore the advantages of using SVG over other image formats and various ways to implement SVGs in React applications, including their integration, animation, and usage as React components.

Using SVGs in React

There are multiple ways to handle SVGs in React. Let’s explore a few:

Inline SVG

One common approach is inline SVG, where the <svg> element is directly embedded in JSX. This method provides full control over styling, animations, and interactivity. However, it can make the code cluttered, especially when working with complex SVGs.

<img> tag

Another method is using the <img> tag to load an external SVG file. This is great for static SVGs like logos that do not require styling or animations. The downside is that SVGs used in <img> tags cannot be styled with CSS.

SVGR

For a more React-friendly approach, you can import SVGs as React components using SVGR, a tool that converts SVGs into fully customizable React components. This method is great for dynamic styling, animations, and modifying SVG elements via props.

If you need flexibility, full control over styling and interactivity, inline SVGs or SVGR are great choices. If simplicity is a priority, using an <img> tag or component import might be the best option.

---

Editor’s note: This article was last updated by Emmanuel John in April 2025 to include information on SVGR usage, cover SVG utilization on React frameworks such Next.js, Gatsby, and Refine, and troubleshoot common mistakes when using SVGs in React.

---

Importing SVGs in React

Below, we’ll explore various ways to use or render this React SVG logo on a webpage. It’s worth noting that Create React App (CRA) has a built-in configuration for handling SVGs. Some of the examples in this article that require modifying the webpack setup apply only to custom React projects using webpack as a bundler.

You may need different plugins if you don’t use webpack for your custom React project.

Using the <img> tag for static SVGs

In order to use SVGs or any other image format in the <img> tag, we have to set up a file loader system in whichever module bundler we’re using. Here, I will show you how to set it up in a few steps if you are already using webpack as your bundler.

If you are using webpack 4, first install the file-loader library with the command $ npm install file-loader --save-dev. This will install it as a dev dependency.

You can update your webpack configuration file rules with this code:

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      //...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  //...
};

However, the file-loader library is deprecated if you are using webpack 5; you can use asset modules instead. With asset modules, you can use asset files in your project setup without installing additional loaders. Update the rules field of your webpack configuration file to include the following:

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      //...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        type: "asset/resource",
      },
    ],
  },
  //...
};

Now you can import your SVG and use it as a variable, like this:

import React from 'react';
{/*images*/}
import ReactLogo from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <img src={ReactLogo} alt="React Logo" />
    </div>
  );
}
export default App;

This method of importing SVGs has a disadvantage as it cannot be styled in an img element, making it suitable for non-customizable SVGs like logos, unlike other methods.

Using the <svg> element

With the same webpack settings above, we can use the <svg> element by copying and pasting the contents of the .svg file into our code. Here is a sample use case:

import React from 'react';

const App = () => {
  return (
    <div className="App">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
        <g fill="#61DAFB">
          <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
          <circle cx="420.9" cy="296.5" r="45.7"/>
          <path d="M520.5 78.1z"/>
        </g>
      </svg>
    </div>
  );
}
export default App;

You can likely already see the disadvantages of using this method. When the image is more complex, the SVG file becomes larger, and because SVG is stored in text, we have a whole bunch of text in our code.

Using an SVG as a component

SVGs can be imported and used directly as React components in your React code. The image is not loaded as a separate file; rather, it’s rendered along with the HTML. A sample use case would look like this:

import { ReactComponent as Logo} from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}
export default App;

Although this approach is simple to implement, it has some drawbacks. The imported SVG functions as an image element, not a full-fledged React component, and cannot be customized with props. It’s not suitable for complex SVGs with multiple elements or styles.

Another approach is converting it to a React component before using it in your React application:

const BarIcon = () => {
    return (
        <svg
            className="w-6 h-6 text-gray-800 dark:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24">
            <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeWidth="2"
                d="M5 7h14M5 12h14M5 17h14"
            />
        </svg>
    )
}

function App() {
  return (
    <header className="App-header">
      <BarIcon />
    </header>
  );
}
export default App;

Adding SVG directly as JSX

JSX supports the svg tag, allowing for the direct copy-paste of SVGs into React components without using a bundler. SVGs are in XML format, similar to HTML, and can be converted to JSX syntax. Alternatively, a compiler can be used instead of manually converting:

export default function App() {
  return (
    <svg
        className="w-10 h-10 text-gray-800 dark:text-white"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill={fill}
        width={width}
        height={height}
        viewBox="0 0 24 24">
        <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeWidth="2"
            d="M5 7h14M5 12h14M5 17h14"
        />
    </svg>
);
};
export default App;

Inline SVGs offer access to their properties, allowing for customization and style. However, large SVG file sizes may reduce code readability and productivity, so using a PNG or JPEG file is recommended.

Using SVGR to transform SVGs into React components

SVGR is an awesome tool that converts your SVGs into React components. It now use SVGO v2 for SVG optimization, which no longer supports automatic merging of configurations.

To set it up, first install the package by running the command $ npm install @svgr/webpack --save-dev. Then, update your webpack configuration rule to use SVGR for SVGs:

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  //...
};

Now you can import SVG images as React components and use them in your code like so:

import React from 'react';
import ReactLogo from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <ReactLogo />
    </div>
  );
}
export default App;

How SVGR transforms SVGs into React components

To transform SVG into React components, SVGR applies several complex transformations, starting with optimizing the SVG using SVGO.

It then transforms HTML into JSX through multiple steps, such as converting the SVG into HAST (HTML AST), then into Babel AST (JSX AST), and further modifying the AST using Babel to rename attributes and adjust values. Next, it wraps the JSX into a React component, converts the Babel AST into code, and finally formats the code using Prettier for a clean and structured output.

Using SVG as a data URL

Data URLs are URLs prefixed with the data: scheme, which allows content creators to embed small files inline in documents. This approach enables us to use SVG images like an inline element.

How do you achieve this? First, you’ll need an appropriate loader if you are using webpack. For this use case, I’ll use svg-url-loader. You can add it to your project by running the command $ npm install svg-url-loader --save-dev.

Then, update the webpack configuration file rules section with the following:

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  //...
};

Now you can import your SVG file and use it in your React component like this:

import ReactLogo from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <img src={ReactLogo} alt="React Logo" />
    </div>
  );
}

This usually results in something like this in the DOM:

<img src="data:image/svg+xml,%3csvg..." alt="React Logo" />

Injecting SVG into the DOM using react-svg

Adding SVG markup directly in your React component increases its file size, making it hard to maintain. Despite this limitation, using inline SVG comes with its advantages. You can easily apply CSS styles to the SVG markup when you embed it inline, compared to using the <img> tag.

To leverage the benefits of embedding SVGs inline without worrying about the maintainability of your component, you can use the react-svg package. It fetches the SVG asynchronously and embeds it inline.

You can install it from the npm package registry like so:

npm install react-svg

You can then import the ReactSVG component and render it in your React application. The ReactSVG component takes the URL for your SVG as the value of the src prop. It also takes several optional props you can look up in the documentation:

import { ReactSVG } from "react-svg";

<ReactSVG src="icon.svg" />

How to animate SVGs in React

As mentioned in the introduction, one of the benefits of using SVGs over other image formats is that SVGs can be animated. You can animate SVGs using CSS or React animation libraries like Framer Motion and React Spring.

A few things to be aware of:

• Complex images — The more complex the image, the larger the SVG file gets. We saw this while trying to use the <svg> element. Here, I would recommend you go with PNG or JPEGs
• Backward support on the web — SVG doesn’t have backward browser support, which means most older browser versions won’t support it. As such, SVG might not display correctly for users who are still on those versions

Techniques for converting SVGs to React components

While manually converting SVGs to React components is possible, it takes time and is prone to errors. Fortunately, some different techniques and tools make this procedure easier:

• Automated conversion with SVGR — As we saw earlier, SVGR parses your SVG file and creates a corresponding React component with customizable properties. Tools such as SVGR Playground allow you to experiment with conversion and view the final React component code
• Using inline SVG with JSX — The svg tag can be used to embed SVG code directly within JSX components for simple SVGs. This method works well for static SVGs that don’t need to be dynamically modified
• Third-party libraries — When you work with complex SVGs or need advanced interactions, check out libraries like react-svg or react-inlinesvg for further features and functionality

Creating and using React SVG icons

When used as React components, SVGs become excellent tools for creating clean and scalable user interfaces. Effectively managing React SVG icons requires careful consideration for scalability and maintainability, and some strategies include:

• Icon library creation — Consider creating a centralized icon library. This might be a special folder where all of your SVG icon files are kept inside the project structure
• Component naming conventions — Give each of your icon components a consistent name. HamburgerIcon.js and NotificationIcon.js are examples of descriptive names that improve readability and organization
• Icon component structure — Make sure your icon components are organized consistently. This makes maintenance easier and encourages the reuse of code. A common structure may include specifying default values like width, height, and fill color, as well as options for customization through props

Passing SVGs as props in React with TypeScript

TypeScript allows developers to enforce type safety in React applications, including handling SVG elements and their properties. Adhering to best practices for typing SVG properties is important for preventing runtime errors and ensuring code reliability. This section will explore these best practices and provide examples of passing SVG elements as props to other components.

SVG prop typing

One technique for typing SVG properties in TypeScript to ensure type safety includes using the SVGProps type that React provides to type SVG-related props correctly. This guards against type errors and guarantees that the right props are supplied to SVG elements:

Another technique involves defining a custom interface that encompasses all relevant SVG properties, extending built-in types for specific attributes:

interface SvgProps {
  fill?: string;
  stroke?: string;
  width?: number;
  height?: number;
  // Add other relevant SVG attributes here
}

Finally, consider exploring third-party libraries like react-svg or SVGR for pre-defined type definitions for SVG manipulation within React.

Examples of passing SVGs as props

Now, let’s see how to provide SVG elements as props to other components in TypeScript:

// Define a component that accepts SVG element as a prop
interface Props {
  svgElement: React.ReactElement<React.SVGProps<SVGElement>>;
}
const SVGWrapper: React.FC<Props> = ({ svgElement }) => (
  <div>
    {svgElement}
  </div>
);

Here we create an interface Props for the SVGWrapper component that accepts svgElement props of the type React.ReactElement<React.SVGProps<SVGElement>>. The SVGWrapper component renders the svgElement that it gets.

In the App component, we can now pass instances of our SVG icons and components as svgElement props to SVGWrapper:

import { BarIcon } from './BarIcon';

export default function App() {
  return (
    <div className="App">
      <SVGWrapper svgElement={<BarIcon fill="#fff" className="w-10 h-10 text-gray-800 dark:text-white" />} />
    </div>
  );
}

This way, you can pass SVG elements as props to other components in TypeScript.

Passing an interface for dynamic SVG creation

interface BarProps {
    fill?: string;
    width?: number;
    height?: number;
    className?: string;
}
export const BarIcon = (
    {
        fill,
        width = 20,
        height = 20,
        className,
    }: BarProps
) => {
    return (
        <svg
            className={className}
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill={fill}
            width={width}
            height={height}
            viewBox="0 0 24 24">
            <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeWidth="2"
                d="M5 7h14M5 12h14M5 17h14"
            />
        </svg>
    )
}

The component defines an interface BarProps, which allows for the specification of optional props like width, height, and fill color, and then renders the SVG code using the path element.

Passing the SVG string as a prop

Using this method, the SVG code is passed directly as a string prop. For instance, consider this:

import React from "react"

interface ButtonProps {
  onClick: () => void;
  svg: string; // Prop for the SVG code
}
const Button: React.FC<ButtonProps> = ({ onClick, svg }) => (
  <button onClick={onClick}>
    <div dangerouslySetInnerHTML={{ __html: svg }} />
  </button>
);

const App = () => {
  const svgString = "<svg width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' strokeWidth='3' fill='red' /></svg>";

  return (
    <div>
      <Button
        onClick={() => console.log('Svg')}
        svg={svgString} 
      />
    </div>
  );
};

export default App;

This example demonstrates using the ButtonProps interface to define props for the Button, which takes a string property svg and onClick as a prop. The component renders the SVG using dangerouslySetInnerHTML, assigning it to the __html key, bypassing React’s XSS protection.

It’s crucial to ensure the SVG string is safe to render, as it could pose a security risk if it contains untrusted content. Proper use of dangerouslySetInnerHTML can prevent cross-site scripting attacks. In App, we define an SVG string and pass it to Button as a prop.

To ensure reusability and maintain a single source of truth for SVG code, create a separate component for multiple uses of the same SVG with different styles. If it is only needed once or has a simple SVG, pass the SVG string as a prop.

Optimizing SVG performance in React

While SVGs are lightweight and scalable, these techniques can improve performance, especially in complex graphics or animations:

Use React.memo for static SVG components

If an SVG component doesn’t change often, wrap it with React.memo() to prevent unnecessary re-renders:

import React from 'react';

const Logo = React.memo(() => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
  </svg>
));

export default Logo;

Using tools like SVGR

SVGR transforms SVGs to optimized and lightweight React components. You can also use SVGO (SVG Optimizer) to reduce SVG file sizes by removing redundant attributes, metadata, and comments.

Use lazy loading for large SVGs

If your app includes multiple or complex SVGs, lazy loading helps defer their loading until needed, reducing initial page load time:

import React, { lazy, Suspense } from 'react';

const LazySVG = lazy(() => import('./LargeSVG'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazySVG />
  </Suspense>
);

<title>and <desc>

For inline SVGs, use <title> and <desc> elements to provide additional context and role="img" and aria-label attributes for meaningful descriptions. This will improve the user experience for screen readers and assistive technologies

Integrating SVGs with React Frameworks

React frameworks, like Next.js, Gatsby, and Refine, offer various ways to handle SVGs efficiently, with some methods being similar across them.

Handling SVGs in Gatsby projects

Handling SVGs in Gatsby projects can be done in multiple ways. Using gatsby-plugin-svgr to import SVGs as React components is the most efficient way, as it allows better styling and animation of SVGs.

To use SVGs as React components, install gatsby-plugin-svgr:

npm install gatsby-plugin-svgr

Then configure it by adding the plugin to gatsby-config.js:

module.exports = {
  plugins: ['gatsby-plugin-svgr'],
};

Now you can use it in your components like this:

import React from 'react';
import Logo from '../assets/logo.svg'; // SVG as a React component

const Header = () => (
  <header>
    <Logo width={100} height={100} />
    <h1>About us</h1>
  </header>
);

export default Header;

You can also use SVGs as static image files with the <img> tag, or inline SVG code directly for full customization.

To display an SVG as a static image, you can import it directly:

import React from 'react';
import logo from '../assets/logo.svg';

const Header = () => (
  <header>
    <img src={logo} alt="Logo" />
  </header>
);

export default Header;

Handling SVGs in Next.js projects

Next.js supports importing SVGs as React components using @svgr/webpack.

To use SVGs as React components in Next.js, install @svgr/webpack:

npm install @svgr/webpack

Next, update next.config.js:

const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

Now you can use it in your components like this:

---

---

import React from 'react';
import Logo from '../assets/logo.svg'; // SVG as a React component

const Header = () => (
  <header>
    <Logo width={100} height={100} />
    <h1>My Next.js Site</h1>
  </header>
);

export default Header;

You can also use react-svgr playground to generate React components from your SVG code by pasting the SVG code in the playground, then copying the generated React components into your Next.js project.

Handling SVGs in a Refine project

Handling SVGs in Refine projects follows a similar approach to handling SVGs in React. Refine is a React-based framework for building CRUD-heavy web applications like admin panels, dashboards, and internal tools easily.

Optimizing SVG performance with frameworks

SVGO optimizes SVG files by removing metadata, comments, and unnecessary attributes, reducing file size while maintaining visual quality. It minifies paths, making the SVG more efficient and lightweight.

You can optimize SVGs in any React frameworks with SVGO:

npm install svgo
svgo input.svg -o output.svg

Or use an online SVG optimizer like SVGOMG.

Common mistakes when using SVGs in React

Here are some common mistakes to avoid when using SVGs in React:

1. Using raw SVG files without optimizing them — SVG files often contain unnecessary metadata, increasing file size and slowing performance, especially when used across multiple components
2. Using <img> tags for dynamic or styled SVGs — If you need to customize an SVG with CSS or React props, it’s better to use inline SVGs or import them as components
3. Not lazy loading large SVGs — Large SVGs should always be lazy loaded or conditionally rendered to defer loading until they’re needed
4. Using inline SVGs for everything — Inline SVGs should be used only when necessary

Why use SVG over other image formats?

You’re probably more familiar with image formats like JPEG, GIFs, and PNG than you are with SVG. However, there are many reasons why you’d want to use SVG over these other formats:

• Scalability and resolution — This is the biggest advantage that SVG has over other formats. SVG uses shapes, numbers, and coordinates instead of pixel grids like other image formats do. This makes it possible to zoom in and out of SVG images without losing image quality. This also gives SVG the ability to scale infinitely
• Small file size — SVG file sizes are usually small compared to other file formats, and they are easily compressible, which allows for their sizes to be even smaller
• High performance and speed — Because of their small size, SVG images are very easy and fast for browsers to render. It’s like rendering text compared to rendering pixels and colors for other image formats. Also, if you use inline SVG in your code, the browser does not have to request to get the image and renders it just like all the other code in your file. In this case, no request was made. But in a situation where you have a complex image SVG file, such as the Mona Lisa photo, I would suggest using PNGs or JPEGs, as the load time and performance for SVGs can fall drastically
• DOM-like, styleable, and editable — SVG images are like code, which means they can be navigated like a DOM element and also styled. Some properties will have different names. For example, you might want to use fill instead of color. You can also style SVG with CSS. Likewise, because SVGs are DOM-like, they can be created, edited, and animated with any text editor
• Animatable — SVGs can be animated. This can be done with tools like Web Animation APIs, WebGL, CSS animations, etc. Read more about animating SVG with CSS in this guide
• Ease of integration — SVGs can be used in various ways: they can display logo images and icons, graphs, animations, effects, and more
• Accessibility and SEO — SVGs contain text, which improves accessibility. It also means they can be searched, indexed, scripted, etc

Conclusion

SVGs make up a significant proportion of images on the web today. As highlighted above, SVGs have smaller file sizes than other image formats. You can resize them without losing image quality, and they are animatable.

Though its usage is straightforward with HTML, you need additional tools and configuration to start using SVG in frontend frameworks like React. Most of the popular React project starter toolsets, like Create React App, Vite, and Astro, come with out-of-the-box configurations for handling static assets such as images, including SVGs.

As mentioned in this article, Create React App uses the SVGR webpack loader, @svgr/webpack, under the hood. Therefore, you can import an SVG with an import statement and render it in your application. You can also inline the SVG markup. However, rendering SVGs inline can make your components hard to maintain.

For a custom React project that uses webpack as a bundler, you can configure the @svgr/webpack loader to load SVGs similar to Create React App.

As you use SVGs, it is worth mentioning that complex images can have large SVG files, especially if you want to inline the SVG. Though most popular modern browsers fully support SVGs, some browsers, especially mobile browsers, do not have full support for certain SVG features.