SVG started to work after I re-save without changing anything

Question

I'm building a website using React with Bun, also Tailwind 4. (Don't think this matters, but anyway)

import logo1 from "./logo_stroke.svg";
import logo2 from './assets/logo_stroke.svg';

....

<img src={logo1} className="h-10 w-20" />
<img src={logo2} className="h-10 w-20" />

They are the exact same logo, but logo1 appears as the broken picture icon, while the other one displays correctly

According to git, there is a difference between the two files as shown.

Can someone explain what happened? All I did was open the SVG with VSC in text format and hit cmd + s. Didn't even modify anything. But git detected it as a change, and the SVG started showing.

Alex · Accepted Answer · 2025-08-01 04:55:16Z

2

It is looks like VS Code removed UTF-8 BOM symbols.

About BOM: What's the difference between UTF-8 and UTF-8 with BOM?

You can open both files in any HEX editor (for example HxD offline, also exists online hex editors) and look at difference in first bytes.

The same issue discussed here: https://gitlab.com/gitlab-org/gitlab/-/issues/29631

answered Aug 1 at 4:55

Alex

974 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SVG started to work after I re-save without changing anything

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related