How to use SVG in react

In this article, we learn what SVG is and what are the benefits of SVG over the traditional image format like jpg, png, etc. Also, how to use SVG in react component with example.

 

 

So let’s first understand what SVG image format is.

 

What is SVG?

SVG stands for Scalable Vector Graphics. It is a vector image format that is used to create graphics and diagrams for web applications.

 

SVG images are composed of a series of shapes and paths, rather than pixels like traditional images (such as JPEG and PNG). This means that SVG images can be scaled to any size without losing quality, making them ideal for use on the web, where images need to be responsive and work on a variety of screen sizes and resolutions.

 

The problem with .jpeg and .png image formats are if increase the image height and width the images get distorted that’s why the SVG image format becomes popular.

 

SVG images are also lightweight and can be easily edited and manipulated using CSS and JavaScript, which makes them a popular choice for creating interactive and dynamic graphics on websites.

Benefits of SVG Image format

Some benefits of using SVG image format are –

• SVG is resolution-independent, it can be scaled to any size without losing quality.
• SVG is smaller in size, which means faster loading time.
• SVG can be easily edited and manipulated using CSS and JavaScript.
• SVG is accessible, it can be read by screen readers and search engines.
• SVG is supported by all modern web browsers.

Therefore, SVG is a good choice for creating simple graphics such as icons, logos, and diagrams, as well as more complex animations and interactive elements.

 

How to use SVG in React

 

Below are some ways to use SVG in React. Here are a few common methods –

 

1. Using inline SVG: You can use inline SVG directly in JSX by using the SVG tag. This method allows for full manipulation of the SVG elements.

const Component = () => {
return (
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</svg>
);
}

You can change cx, cy, and r attribute values to increase/decrease image size.

 

2. Using the dangerouslySetInnerHTML prop: You can use the dangerouslySetInnerHTML prop to directly insert the SVG code into your React component.

import { ReactComponent as mySVG } from './your-svg-file.svg';
const Component = () => {
return <mySVG />
}

 

3. Using a react-SVG Library: You can use a library like react-SVG to include and manipulate SVG files in your React components.

import ReactSVG from 'react-svg';
const Component = () => {
return <ReactSVG src={'./mySVGfile.svg'} />
}

 

These are some methods that can be used to implement SVG formats in react component.

Conclusion

I hope now you have some insight into SVG image format and how you can use SVG image format in your react component.