【React/Gatsby】GraphQLを用いてsvg画像を取得する意味について

Question

Gatsby.jsを用いてwebサイトを作成しております。

jpegやpng画像の最適化にGraphQLを用いると思うのですが、.svg画像をGraphQLクエリを介してデータ取得するメリットはあるのでしょうか？

const Index = () => {
  const image = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "like.svg" }) {
        publicURL
      }
    }
  `);
  const { publicURL } = image.file;
  console.log(publicURL); ///static/e152474a47557a24b12490f46840ebb7/like.svg
  return (
    <div>
      <img src={publicURL} width="100px" height="100px" alt="like" />
    </div>
  );
};

そのまま以下のようにベタ書きするのと違いはありますでしょうか？

import yourSVG from './like.svg'

const Home = () => <><img src={yourSVG} /></>

初歩的な質問で申し訳ありませんがご教示いただけますと幸いです。

参考資料
gatsby-imageでsvgを使う

Comments

[hoshi-takanori]

私の勘違いだったら申し訳ないのですが、GraphQL の graph はデータ構造の一種で、画像のフォーマットとは何の関係もないと思いますけど…。

[Jake5]

コメントありがとうございます。
ということは上記参考資料でやっていることは特に意味をなさず、単純にimgタグのsrc属性をベタ書きすればよいということでしょうか？

[hoshi-takanori]

と思います。

Answer 1

svg画像をGraphQLクエリを介してデータ取得するメリットはないようです。