{
  "height": 0,
  "width": 0,
  "minX": 0,
  "minY": 0,
  "maxX": 0,
  "maxY": 0,
  "items": []
}

<svg height={0} width={0} version="1.1" xmlns="http://www.w3.org/2000/svg">
  
</svg>

function SVGImage({ data, size }) {
  const height = data.height * size;
  const width = data.width * size;
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "grid",
        placeItems: "center",
      }}
    >
      <svg
        key={`${item.x}-${item.y}`}
        height={height}
        width={width}
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        {data.items.map((item) => {
          return (
            <rect
              x={item.x * size}
              y={item.y * size}
              width={size}
              height={size}
              fill={item.fill}
            />
          );
        })}
      </svg>
    </div>
  );
}