A vector graphics picture format based on XML is known as SVG. Scalable Vector Graphics is the full name of SVG. Today, SVG is fully supported by many icon libraries, including Flaticon, Font Awesome, Material Icon, and others, and it is used by many brands like Youtube, Twitter, Udacity, Netflix, etc. In this article, we will give you some knowledge about “How to display SVG image in React Component?“. Read on it.

How to display SVG image in React Component?

Method 1: Follow these steps

Let’s follow these steps to display SVG image in React Component.

Step 1: Download a SVG image

First, you need to download a SVG image. You can download it from the Undraw, or any of your favorite resources. Let’s move the downloaded image to your project directory after you download it on your computer.

Step 2: Import the image into the file you want to use

After finished downloading the image, you must add it into the file you want to use.

Importing SVG image is not the same with importing any other kinds of image (such as JPEG or PNG). The SVG image will be imported just like a component. You can write import like the following:

import {ReactComponent as Jotaro} from "./jotaro.svg"

The component’s name in this instance is Jotaro, but you can name it with whatever name you like. All you need to do is putting it in curly brackets{} and make sure you are importing it from the correct file directory. ReactComponent essentially instructs React import an SVG image as a component rather than a file name.

Step 3: Add the image into your component file

Let’s use the image after you have imported it.

Add the Jotaro component to the component file to render the SVG image:

import {ReactComponent as Jotaro} from "./jotaro.svg"
const App = () => ( );
export default App;

After you finish these steps, SVG image will be displayed in React Component.

Method 2: Use the src property of the <img> element

Using the src property of the <img> element is another approach to display visual files with an svg file extension. Look at the following instance to understand more about this method:

export default function App() {
  return (
    <div className="App">
      <img
        src={"https://svgshare.com/i/e77.svg"}
        style={{ width: 50, height: 50 }}
      ></img>
    </div>
  );
}

Advantages of SVG images

Here are some benefits of SVG images:

SVGs Can Be Edited: SVGs can be readily written, animated, and modified in any text editor because they are text-based and made entirely of XML standards.

Scalability of SVGs: SVG-based images can be resized without losing quality. They provide the best visual quality across a wide range of screen sizes because their quality is independent of resolution.

SVGs can be used for many purposes: React logos and icons can be shown using SVGs, among other things. SVG can also be used to generate animations, graphs, and CSS effects.

You may animate SVG files: SVG can be animated using various methods, including Web Animation APIs, WebGL, and CSS animations.

SVGs can be printed.

Besides that, SVG has a lot of other benefits.

Conclusion

The above solutions are the quickest ways to display SVG image in React Component. We hope you will enjoy them. If you need more assistances or have any questions, a growing community of people is usually willing to assist you. In addition, we anticipate a more creative day filled with new ideas and code. Thank you for your reading!

Read more

→ How to use a switch Case statement inside a React component