Reactで動的にSVGの色を変える方法

Reactで動的にSVGの色を変える方法を紹介する。

SVGのテキストを返す関数を作る

色を入力したら、SVGのテキストを返す関数を作る。
SVGのファイルを開いて、コピペし、色が設定してあるところを変えられるようにする。

type Color = {
    title: string;
    hex: string;
};
const getSvgText =  (colors: Color[]) =>
{
  return `<svg ~~省略~~ text-rendering="geometricPrecision" style="background-color:${colors[0].hex}">
<style>~~省略~~</style>
<defs><linearGradient id="eALyGup1cVD2-fill" x1="0" y1="0.5" x2="1" y2="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="eALyGup1cVD2-fill-0" offset="0%" stop-color="${colors[1].hex}"/><stop id="eALyGup1cVD2-fill-1" offset="100%" stop-color="${colors[2].hex}"/></linearGradient></defs><g id="eALyGup1cVD2_to" transform="translate(640,360)"><rect width="2492.099859" height="2223.719874" rx="0" ry="0" transform="scale(0.820545,1) translate(-1246.049942,-1111.859937)" fill="url(#eALyGup1cVD2-fill)" stroke-width="0"/></g></svg>
`;
}

useStateで色を管理する

  const [ colors, setColors ] = useState<Color[]>( [] );

色を入力できるようにする

react-colorfulというライブラリを用いて色入力できるようにした。スタイルが最初からいい感じになっているので楽だ。

SVGを表示する

最初に作ったgetSvgTextを利用することで動的にSVGを表示できる。

<Box
    borderRadius="50px"
    bgColor="hsla(0,0%,0%,0)"
    bgImage={`url("data:image/svg+xml;base64,${Buffer.from(
      getSvgText(colors)
    ).toString("base64")}")`}
    bgRepeat="no-repeat"
    bgSize="cover"
    bgPosition="center"
    pos="relative"
></Box>

※ Chakra UIを使用

まとめ

この4ステップでSVGの色を動的に変えられるようになる。

SVGグラデーションアニメーターの開発

SVGでグラデーションのアニメーションを動かした経験を生かして、SVGグラデーションアニメーターを作りました。
色を変えるだけで、簡単にSVGグラデーションアニメーションを作れます。
ぜひ、ご利用ください！

作れるアニメーション例↓