はじめに
今後、React でのグラフ表現で、SVG ファイルを操作してグラフを表示する事がありそうなので、イメージを掴むためにサンプルでちょっとだけ体感してみます。
開発環境
- OS : Windows 11 Pro
- React : 19.0.0
- npm : 10.8.1
- Cursor(IDE) : 0.42.3
ゴール
SVG ファイルに対して、サイズ、カラーのプロパティを変更して表示します。
そもそも、SVG ファイルって？
SVG （Scalable Vector Graphics) は画像フォーマットの一種で、その名(Vector)の通り、ベクタ形式のデータです。ベクタ形式とは、画像や文字などの2次元情報を数値化して記録しており、ブラウザがその場で描画してくれます。そのため、PNG ファイルなどでは拡大するとギザギザになりますが、SVG ファイルでは拡大してもギザギザにならず、データが劣化することもありません。主に、アイコンや地図、平面的なイラストなどを作成するときにはベクタ形式が採用されています。
画像ファイルであるSVGですが、XMLに準拠しており、テキストエディタで編集することも可能です。
XML だから、今回のように文字列として変更する事が可能なのです！
SVG ファイルを React で、どうやって使う？
React コンポーネントとして利用します。
SvgFileIcon.tsx
import React from "react";
interface SvgFileIconProps {
size?: number;
color?: string;
}
export const SvgFileIcon = ({
size = 35,
color = "black",
...props
}: SvgFileIconProps) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="SvgFileIcon"
role="img"
{...props}
>
<path
d="M378.409,0H208.294h-13.176l-9.314,9.315L57.017,138.101l-9.314,9.315v13.176v265.513 c0,47.36,38.528,85.896,85.895,85.896h244.811c47.361,0,85.888-38.535,85.888-85.896V85.896C464.297,38.528,425.77,0,378.409,0z M432.493,426.104c0,29.877-24.214,54.091-54.084,54.091H133.598c-29.877,0-54.091-24.214-54.091-54.091V160.592h83.717 c24.884,0,45.07-20.179,45.07-45.071V31.804h170.114c29.87,0,54.084,24.214,54.084,54.091V426.104z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
・・・
この文字の羅列は何者？
1つのパスは複数のセグメント path segment からなる。セグメントの形を指定する命令はコマンドと呼ばれ、 要素の d 属性にコマンドを並べることでパスの形状が指定される
wikipedia からの抜粋です。
要は、下記が SVF ファイルの中身で、d の部分に描画の内容が記載されてます。
svgFile.svg
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4B4B4B;}
</style>
<g>
<path class="st0" d="M378.409,0H208.294h-13.176l-9.314,9.315L57.017,138.101l-9.314,9.315v13.176v265.513
c0,47.36,38.528,85.896,85.895,85.896h244.811c47.361,0,85.888-38.535,85.888-85.896V85.896C464.297,38.528,425.77,0,378.409,0z
M432.493,426.104c0,29.877-24.214,54.091-54.084,54.091H133.598c-29.877,0-54.091-24.214-54.091-54.091V160.592h83.717
c24.884,0,45.07-20.179,45.07-45.071V31.804h170.114c29.87,0,54.084,24.214,54.084,54.091V426.104z" style="fill: rgb(75, 75, 75);"></path>
・・・
おわりに
思ったより簡単に SVG ファイルを操作する事ができました。
ただ、今回はサイズやカラーなど分かりやすいプロパティでしたが、グラフ表現ではもっと画像的な部分を操作する事が必要になるので、もう少しいじってみたいと思います。
参考（感謝）