5

i have this code

     <Link to="/">
            <StaticImage
                loading="eager"
                src="../images/logo.svg"
                alt="Logo"
            />
        </Link>

gatsby-plugin-image reformat my svg on WebP format. Its posiblle keep format SVG and stil using <StaticImage> ?

Petr Volny
  • 150
  • 2
  • 12

2 Answers2

2

If you know in advance your image is going to be a svg, you can import your svg directly & use a regular img tag:

import logo from '../images/logo.svg'

export const Page = () => <Link to="/"><img src={logo} /></Link>

In the example above, webpack will copy your logo.svg to the static dir & return the path as the string.

Derek Nguyen
  • 11,294
  • 1
  • 40
  • 64
  • or prevent a request and embed it in HTML – tfrei Mar 26 '21 at 08:44
  • @tfrei Gatsby will inline assets as base64 string below certain kb threshold IIRC — but for SVG, embedding directly in HTML will certainly help saving some extra bytes. – Derek Nguyen Mar 29 '21 at 13:51
0

If your svg is animated prefer gatsby-plugin-react-svg :

import Icon from "./path/assets/icon.svg"

// ...

<Icon />

As far as I know you can't keep the svg format with <StaticImage /> nor <GatsbyImage /> as their main purpose is to convert images in the presumed best formats.

ozenK
  • 265
  • 3
  • 10