Inline vs External SVGs in React

SVG stands for Scalable Vector Graphics. It is a file format used for describing two-dimensional vector graphics. Unlike raster graphics formats (such as JPEG or PNG), which are made up of pixels, SVG files are based on mathematical equations and describe the shapes, colors, and positions of objects in an image.

SVG files are XML-based, meaning they are written in plain text and can be created and edited with a simple text editor. SVG graphics can be scaled to any size without losing quality because they are resolution-independent. This makes SVG files ideal for use in various applications, including web design, iconography, logos, illustrations, and more.

SVG files can include various elements such as lines, curves, shapes (e.g., rectangles, circles), text, gradients, transformations, and even animations. They can be styled using CSS or inline attributes to control their appearance, color, stroke, fill, and other visual properties.

One of the key advantages of SVG is its ability to be interactive and dynamic. Elements within an SVG can be manipulated and animated using JavaScript or CSS, making it possible to create interactive graphics, charts, and visual effects.

Inline SVGs

You can use the <svg> element directly within your React components. The svg element in HTML is a container that defines a new coordinate system and viewport for SVG graphics.

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1>SVG Example</h1>
      <svg width="200" height="200" viewBox="0 0 200 200">
        <rect x="50" y="50" width="100" height="100" fill="blue" />
        <circle cx="100" cy="100" r="40" fill="white" />
        <text x="90" y="105" fill="black">R</text>
      </svg>
    </div>
  );
}

Using inline SVGs can lead to verbose code. SVGs can range from a few lines to several hundred, making the code lengthy. While inline SVGs can be suitable for a few small icons, they become problematic when dealing with larger or multiple SVGs. In such cases, they result in long blocks of text within the code, which isn’t directly related to the business logic. As a consequence, the code becomes difficult to comprehend and analyze.

By using SVGR, you can easily convert SVG files into reusable React components, allowing you to take advantage of React’s component-based architecture and features. SVGR also provides various configuration options to customize the output, such as adjusting the component name, applying transformations, or setting the output file format.

External SVGs

Using external SVGs offers benefits such as improved code organization, reusability across components or projects, and simplified editing and maintenance. It allows for faster design iterations by easily swapping or updating SVG files without modifying component code. Additionally, external SVGs can help reduce bundle size and seamlessly integrate with design workflows for efficient collaboration between designers and developers.

You can import a separate SVG file as a React component. This is a powerful and convenient way to handle SVGs in React, but it may require some additional configuration on SVG loader like using svg-inline-loader, react-svg-loader with Webpack.

import React from 'react';
import { ReactComponent as MySvg } from './my-svg-file.svg';

const MyComponent = () => {
  return (
    <div>
      <h1>My SVG Component</h1>
      <MySvg />
    </div>
  );
};

export default MyComponent;

If you have an SVG file and want to use it as an image, you can import it as a regular image in React. This method is suitable if you don’t need to manipulate the SVG elements directly.

import React from 'react';
import mySvg from './my-svg-file.svg';

const MyComponent = () => {
  return (
    <div>
      <h1>My SVG Image</h1>
      <img src={mySvg} alt="My SVG" />
    </div>
  );
};

export default MyComponent;