A WIP hybrid Svg using Gatsby Image

hybrid-svg.js

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

const Test = () => {
  const {
    file: {
      childImageSharp: { gatsbyImageData }
    }
  } = useStaticQuery(graphql`
    query gatsbyImageQuery {
      file(name: { eq: "2-base" }) {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  `);

  return (
    <div className="relative">
      <GatsbyImage alt="2-base" image={getImage(gatsbyImageData)} />
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        width="100%"
        height="100%"
        viewBox="0 0 197 231"
        className="absolute max-w-[197px] max-h-[231px] top-0 z-10"
      >
        <g data-name="2-elements">
          <g data-name="Planet">
            <path
              d="M27.9 32.71c5.42-3.22 16-6.93 28.38-9.69 15-3.34 28-4.27 32.81-2.61"
              style={{
                fill: 'none',
                strokeMiterlimit: 10,
                strokeWidth: '.792737048164481px',
                stroke: 'url(#b)'
              }}
            />
          </g>
        </g>
      </svg>
    </div>
  );
};

export default Test;

This assumes there's a file called 2-base.png to query via GraphQL