Docs

SVG Preparation

Some quick, easy, small modifications to make your developer experience seamless when you import new .svg files.

Preparing your .svg files and SVG code

By default, the colors of your .svg files are defined inside of its relevant SVG code.

Here's svgMagic's logomark .svg file code, open in Visual Studio Code, and freshly exported directly out of Adobe Illustrator:

svgm-mark.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.65 211.87">
  <defs>
    <style>
      .cls-1 {
        fill: #fff; 
        stroke-width: 0px;
      }
    </style>
  </defs>
  <g id="Layer_1-2" data-name="Layer 1">
    <g>
      <path class="cls-1" d="M187.66,74.62l-5.07-5.76h0s.44-7.58.44-7.58c0-.32-.24-.7-.53-.85s-.74-.11-1,.09l-5.76,4.95h0s-7.66-.54-7.66-.54c-.32,0-.7.23-.84.52-.14.29-.1.73.1.99l5.07,5.76h0s-.44,7.58-.44,7.58c0,.32.24.7.53.85s.74.1,1-.09l5.75-4.94h0s.02,0,.02,0l7.65.54c.32,0,.7-.23.85-.52.14-.29.1-.73-.1-.99Z"/>
      <path class="cls-1" d="M156.77,41.25c-.07.73.37,1.64.99,2.04,0,0,0,0,0,0h0s0,0,0,0c.62.4,1.62.42,2.25.04l14.08-9.65.1-.06h.08s17.03,3.11,17.03,3.11c.73.08,1.63-.35,2.03-.95h.02s0-.01,0-.01c.39-.62.39-1.61.02-2.24l-9.96-14.16-.04-.06v-.12s2.86-16.83,2.86-16.83c.07-.73-.37-1.63-.99-2.02h0s0,0,0,0c0,0,0,0,0,0-.62-.4-1.64-.42-2.27-.05l-14.17,9.72-17.11-3.11c-.73-.08-1.64.35-2.03.96s-.4,1.62-.02,2.25l10.01,14.23-2.87,16.94Z"/>
      <path class="cls-1" d="M75.98,24.75l9.45,4.43,3.56,9.68c.18.4.68.75,1.12.77s.98-.27,1.19-.66l4.49-9.28,9.84-3.48c.4-.17.75-.67.77-1.1s-.27-.96-.66-1.17l-9.45-4.42-3.56-9.68c-.18-.4-.68-.74-1.12-.76s-.98.26-1.19.65l-4.49,9.29-9.84,3.48c-.4.18-.75.67-.77,1.1s.27.97.66,1.17Z"/>
      <path class="cls-1" d="M116.59,6.52l3.14,4.67-1.04,5.46c-.03.24.11.53.31.67s.53.15.73.03l4.65-3.05,5.52,1.12c.23.03.53-.1.66-.3s.14-.52.02-.73l-3.14-4.67,1.04-5.47c.03-.24-.11-.53-.31-.66s-.53-.15-.73-.03l-4.66,3.05-5.52-1.12c-.24-.03-.53.1-.66.3s-.14.52-.02.73Z"/>
      <g>
        <path class="cls-1" d="M123.76,83.69l-14.09-10.66c-1.94-1.47-4.72-1.08-6.19.86l-10.66,14.09c-1.47,1.94-1.08,4.72.86,6.19l14.09,10.66c1.94,1.47,4.72,1.08,6.19-.86l10.66-14.09c1.47-1.94,1.08-4.72-.86-6.19Z"/>
        <path class="cls-1" d="M175.74,117.48c-6.56-4.96-15.42-4.59-21.58.29l-24.29-18.38,24.09-31.32c5.2-6.75,3.86-16.35-2.98-21.43l-12.38-9.2c-6.84-5.08-16.61-3.72-21.8,3.03l-23.84,30.99-24.33-18.4c3.02-7.25.96-15.89-5.6-20.85-7.78-5.89-18.86-4.35-24.75,3.43-5.89,7.78-4.35,18.86,3.43,24.75,6.56,4.96,15.42,4.59,21.58-.29l17.5,13.24c-15.2-1.63-30.72,2.34-43.28,11.56l-5.6-4.24c-5.83-4.42-14.15-3.26-18.56,2.57l-10.66,14.09c-4.41,5.84-3.26,14.15,2.57,18.56l14.09,10.66c5.84,4.41,14.15,3.26,18.56-2.57l10.66-14.09c4.42-5.84,3.26-14.15-2.57-18.56l-1.06-.8c11.62-7.64,25.78-10.37,39.3-7.74L10.86,178.16c-5.2,6.76-3.86,16.35,2.98,21.43l12.39,9.2c6.84,5.08,16.6,3.72,21.8-3.03l73.17-95.12c6.28,12.34,7.55,26.78,3.33,40.11l-1.06-.8c-5.84-4.41-14.15-3.26-18.56,2.57l-10.66,14.09c-4.41,5.84-3.26,14.15,2.57,18.56l14.09,10.66c5.83,4.41,14.15,3.26,18.56-2.57l10.66-14.09c4.42-5.84,3.26-14.15-2.57-18.56l-5.6-4.24c5.45-14.6,5.06-30.62-.65-44.8l17.5,13.24c-3.02,7.25-.96,15.89,5.6,20.85,7.78,5.89,18.86,4.35,24.75-3.43,5.89-7.78,4.35-18.86-3.43-24.75ZM59.41,51.63c-2.94,3.88-8.49,4.65-12.37,1.72-3.88-2.94-4.65-8.49-1.72-12.37,2.94-3.89,8.49-4.65,12.37-1.72,3.88,2.94,4.65,8.49,1.72,12.37ZM41.52,104.55l-10.66,14.09c-1.47,1.94-4.24,2.33-6.19.86l-14.09-10.66c-1.94-1.47-2.33-4.24-.86-6.19l10.66-14.09c1.47-1.94,4.24-2.33,6.19-.86l14.09,10.66c1.94,1.47,2.33,4.24.86,6.19ZM120.7,109.63c-4.48,5.52-12.54,6.57-18.26,2.25l-14.09-10.66c-5.72-4.32-6.9-12.37-2.8-18.18l8.23-10.95,2.66-3.52c4.41-5.84,12.72-6.99,18.56-2.57l14.09,10.66c5.84,4.41,6.99,12.73,2.57,18.56l-2.66,3.52-8.3,10.89ZM132.25,167.65c1.94,1.47,2.33,4.24.86,6.19l-10.66,14.09c-1.47,1.94-4.24,2.33-6.19.86l-14.09-10.66c-1.94-1.47-2.33-4.24-.86-6.19l10.66-14.09c1.47-1.94,4.24-2.33,6.19-.86l14.09,10.66ZM172.13,136.9c-2.94,3.88-8.49,4.65-12.38,1.72-3.88-2.94-4.65-8.49-1.71-12.37,2.94-3.89,8.49-4.65,12.37-1.72,3.88,2.94,4.65,8.49,1.72,12.37Z"/>
      </g>
    </g>
  </g>
</svg>

Take that fill: tag and change it from the color you exported in from Illustrator to currentColor.

svgm-mark.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.65 211.87">
  <defs>
    <style>
      .cls-1 {
        fill: currentColor; 
        stroke-width: 0px;
      }
    </style>
  </defs>
  <g id="Layer_1-2" data-name="Layer 1"> 
    <g> 
      <path class="cls-1" d="M187.66,74.62l-5.07-5.76h0s.44-7.58.44-7.58c0-.32-.24-.7-.53-.85s-.74-.11-1,.09l-5.76,4.95h0s-7.66-.54-7.66-.54c-.32,0-.7.23-.84.52-.14.29-.1.73.1.99l5.07,5.76h0s-.44,7.58-.44,7.58c0,.32.24.7.53.85s.74.1,1-.09l5.75-4.94h0s.02,0,.02,0l7.65.54c.32,0,.7-.23.85-.52.14-.29.1-.73-.1-.99Z"/>
      <path class="cls-1" d="M156.77,41.25c-.07.73.37,1.64.99,2.04,0,0,0,0,0,0h0s0,0,0,0c.62.4,1.62.42,2.25.04l14.08-9.65.1-.06h.08s17.03,3.11,17.03,3.11c.73.08,1.63-.35,2.03-.95h.02s0-.01,0-.01c.39-.62.39-1.61.02-2.24l-9.96-14.16-.04-.06v-.12s2.86-16.83,2.86-16.83c.07-.73-.37-1.63-.99-2.02h0s0,0,0,0c0,0,0,0,0,0-.62-.4-1.64-.42-2.27-.05l-14.17,9.72-17.11-3.11c-.73-.08-1.64.35-2.03.96s-.4,1.62-.02,2.25l10.01,14.23-2.87,16.94Z"/>
      <path class="cls-1" d="M75.98,24.75l9.45,4.43,3.56,9.68c.18.4.68.75,1.12.77s.98-.27,1.19-.66l4.49-9.28,9.84-3.48c.4-.17.75-.67.77-1.1s-.27-.96-.66-1.17l-9.45-4.42-3.56-9.68c-.18-.4-.68-.74-1.12-.76s-.98.26-1.19.65l-4.49,9.29-9.84,3.48c-.4.18-.75.67-.77,1.1s.27.97.66,1.17Z"/>
      <path class="cls-1" d="M116.59,6.52l3.14,4.67-1.04,5.46c-.03.24.11.53.31.67s.53.15.73.03l4.65-3.05,5.52,1.12c.23.03.53-.1.66-.3s.14-.52.02-.73l-3.14-4.67,1.04-5.47c.03-.24-.11-.53-.31-.66s-.53-.15-.73-.03l-4.66,3.05-5.52-1.12c-.24-.03-.53.1-.66.3s-.14.52-.02.73Z"/>
      <g>
        <path class="cls-1" d="M123.76,83.69l-14.09-10.66c-1.94-1.47-4.72-1.08-6.19.86l-10.66,14.09c-1.47,1.94-1.08,4.72.86,6.19l14.09,10.66c1.94,1.47,4.72,1.08,6.19-.86l10.66-14.09c1.47-1.94,1.08-4.72-.86-6.19Z"/>
        <path class="cls-1" d="M175.74,117.48c-6.56-4.96-15.42-4.59-21.58.29l-24.29-18.38,24.09-31.32c5.2-6.75,3.86-16.35-2.98-21.43l-12.38-9.2c-6.84-5.08-16.61-3.72-21.8,3.03l-23.84,30.99-24.33-18.4c3.02-7.25.96-15.89-5.6-20.85-7.78-5.89-18.86-4.35-24.75,3.43-5.89,7.78-4.35,18.86,3.43,24.75,6.56,4.96,15.42,4.59,21.58-.29l17.5,13.24c-15.2-1.63-30.72,2.34-43.28,11.56l-5.6-4.24c-5.83-4.42-14.15-3.26-18.56,2.57l-10.66,14.09c-4.41,5.84-3.26,14.15,2.57,18.56l14.09,10.66c5.84,4.41,14.15,3.26,18.56-2.57l10.66-14.09c4.42-5.84,3.26-14.15-2.57-18.56l-1.06-.8c11.62-7.64,25.78-10.37,39.3-7.74L10.86,178.16c-5.2,6.76-3.86,16.35,2.98,21.43l12.39,9.2c6.84,5.08,16.6,3.72,21.8-3.03l73.17-95.12c6.28,12.34,7.55,26.78,3.33,40.11l-1.06-.8c-5.84-4.41-14.15-3.26-18.56,2.57l-10.66,14.09c-4.41,5.84-3.26,14.15,2.57,18.56l14.09,10.66c5.83,4.41,14.15,3.26,18.56-2.57l10.66-14.09c4.42-5.84,3.26-14.15-2.57-18.56l-5.6-4.24c5.45-14.6,5.06-30.62-.65-44.8l17.5,13.24c-3.02,7.25-.96,15.89,5.6,20.85,7.78,5.89,18.86,4.35,24.75-3.43,5.89-7.78,4.35-18.86-3.43-24.75ZM59.41,51.63c-2.94,3.88-8.49,4.65-12.37,1.72-3.88-2.94-4.65-8.49-1.72-12.37,2.94-3.89,8.49-4.65,12.37-1.72,3.88,2.94,4.65,8.49,1.72,12.37ZM41.52,104.55l-10.66,14.09c-1.47,1.94-4.24,2.33-6.19.86l-14.09-10.66c-1.94-1.47-2.33-4.24-.86-6.19l10.66-14.09c1.47-1.94,4.24-2.33,6.19-.86l14.09,10.66c1.94,1.47,2.33,4.24.86,6.19ZM120.7,109.63c-4.48,5.52-12.54,6.57-18.26,2.25l-14.09-10.66c-5.72-4.32-6.9-12.37-2.8-18.18l8.23-10.95,2.66-3.52c4.41-5.84,12.72-6.99,18.56-2.57l14.09,10.66c5.84,4.41,6.99,12.73,2.57,18.56l-2.66,3.52-8.3,10.89ZM132.25,167.65c1.94,1.47,2.33,4.24.86,6.19l-10.66,14.09c-1.47,1.94-4.24,2.33-6.19.86l-14.09-10.66c-1.94-1.47-2.33-4.24-.86-6.19l10.66-14.09c1.47-1.94,4.24-2.33,6.19-.86l14.09,10.66ZM172.13,136.9c-2.94,3.88-8.49,4.65-12.38,1.72-3.88-2.94-4.65-8.49-1.71-12.37,2.94-3.89,8.49-4.65,12.37-1.72,3.88,2.94,4.65,8.49,1.72,12.37Z"/>
      </g>  
    </g> 
  </g> 
</svg>

Now we can call that same .svg file and it will allow us to change the currentColor dynamically. If your Next.js project has a bodycolor that changes based on the theme, like most boilerplates and themes offer out of the box, and you have themes enabled in Tailwind, you can just set the className right here, it's passed into the SVG code properties inherently.

So, by default, in most cases, you'll get an "inverted" style, as it will match the current text color style.

Check it out, change the theme here (or in the upper right hand corner if you haven't used it already), the SVG will automatically switch, since the text color did.

Change Theme:

example.tsx

<SVGM kind="svgm-mark" className="h-16" />

Note that without setting a height or width for your style, the SVG won't render. This example uses TailwindCSS to apply an explicit height and automatic width with h-16

To learn more about styling your SVG code with inline styles and TailwindCSS, visit the Styling page.

Basic Usage Styling