How to Use SVG in Next JS?

SVG (Scalable Vector Graphics) is a powerful image format that allows for high-quality graphics and animations on the web. When used in conjunction with Next JS, a popular React framework for building web applications, SVG can enhance the visual appeal and interactivity of your projects. In this article, we’ll explore how you can effectively use SVG in Next JS and leverage its benefits to create engaging web experiences.

Table of Contents

What is SVG?

SVG is an XML-based vector image format that supports interactivity and animation. Unlike raster images, such as JPEG or PNG, SVGs are composed of mathematical shapes and can be manipulated using CSS and JavaScript. This makes SVG ideal for responsive design and dynamic content.

Benefits of SVG

SVG offers several advantages over other image formats.

SVGs are small in file size, which contributes to faster page loading times.
They are resolution-independent, ensuring sharp and crisp visuals on any device or screen size.
SVGs are accessible and can be styled and animated using CSS, allowing for creative freedom and interactivity.

Also Read: Next JS Project Ideas to Boost Your Portfolio

How to Use SVG in Next JS?

Next JS, a popular React framework, provides a solid foundation for building modern web applications. Integrating SVG in Next JS is straightforward, thanks to the seamless compatibility between React and SVG. Let’s look at the best ways to add SVG in NextJS App.

1. Importing the SVG files In Next JS

You can import SVG files directly into your components. Next JS treats SVG files as static assets, allowing you to reference them like any other image file. This enables you to leverage the benefits of SVG while maintaining the convenience of Next JS development.

import Image from 'next/image';

import svgIcon from '../assets/icon.svg'

function MyComponent() {
  return (
    <div>
      <Image
        src={svgIcon}
        alt="My SVG"
        width={200}
        height={200}
      />
    </div>
  );
}

2. Use SVG files from Public Folder

You can also use the SVG files in Next JS Image Component by keeping the SVG file in your public folder of Next JS. Here is an Example

import Image from 'next/image';

function MyComponent() {
  return (
    <div>
      <Image
        src="/assets/icon.svg"
        alt="My SVG"
        width={200}
        height={200}
      />
    </div>
  );
}

3. Inline SVGs in Next JS

In addition to importing SVG files, you can also use inline SVGs directly in your Next JS components. This approach offers greater flexibility, as it allows you to manipulate the SVG markup and apply CSS styles or JavaScript animations. To use inline SVGs, follow these steps:

Create an SVG file, for example, my-svg.svg, in your project directory.
Open the SVG file and copy its contents.
In your Next.js component, use the dangerouslySetInnerHTML prop to insert the SVG markup:

function MyComponent() {
  return (
    <div dangerouslySetInnerHTML={{ __html: `
      <!-- Paste your SVG markup here -->
    ` }} />
  );
}

4. SVG Components in Next JS

Next JS encourages the use of reusable components. You can create SVG components that encapsulate specific graphics or icons. These components can be easily imported and utilized across different pages or components, promoting code reusability and maintainability.

You can also easily Convert Your SVG Files into an SVG Component. Just copy the SVG file code and go to SVGR Playground. Now Paste Your Code on the left side and it will convert it to an SVG Component. Copy the SVG Component code and use it in your NextJS project like any other component

Also Read: How to add Next JS Redirect

How to Style SVGs in Next JS

SVGs can be styled using CSS, enabling you to apply colors, gradients, and animations to your graphics. In Next.js, you can style SVGs using standard CSS techniques. Here’s an example:

import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div>
      <svg className={styles.mySvg} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" />
      </svg>
    </div>
  );
}

In this example, we import a CSS module, MyComponent.module.css, which contains a class, mySvg, defining styles for the SVG. By applying CSS classes or inline styles to your SVG components, you can achieve visually stunning effects and create a cohesive design language for your Next.js application.

Also Read: Next JS vs React: Which One Should You Choose?

Animating SVGs in Next JS

SVGs offer powerful animation capabilities, allowing you to bring your graphics to life. In Next.js, you can animate SVGs using CSS or JavaScript libraries like GreenSock Animation Platform (GSAP) or React Spring. Let’s take a look at an example of animating an SVG using CSS transitions:

import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div>
      <svg className={styles.mySvg} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" className={styles.circle} />
      </svg>
    </div>
  );
}

/* MyComponent.module.css */
.circle {
  transition: transform 0.5s ease-in-out;
}

.circle:hover {
  transform: scale(1.2);
}

In this example, the SVG circle scales up when hovered over, thanks to the CSS transition. By leveraging CSS animations or JavaScript libraries, you can create captivating and interactive SVG animations that enrich the user experience of your Next.js application.

Conclusion

Integrating SVG into your Next JS projects can significantly enhance the visual appeal and interactivity of your web applications. By leveraging the power of SVG’s scalability, responsiveness, and animation capabilities, you can create engaging and dynamic user experiences. Remember to optimize SVGs for performance, consider accessibility and SEO best practices, and unleash your creativity using SVG in Next.js.