StaticImage in GatsbyJS keep format SVG

user_6878987 0
Viewed 2139

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> ?

gatsby-image gatsby svg
2 Answers

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.

user_103409700

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.

user_146314080
Related