SVG not correctly rendered after build

[makinghappen]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

SVG image included into main page featurelist not correctly rendered after build

const FeatureList = [ { title: 'We believe in «future of work»', Svg: require('@site/static/img/dodao/Ill-cat-future.svg').default, description: ( <> Our goal is to bring “real-world-business” to blockchain to reduce recruiting- and service fees and providing transparency, immutability, scalability and accessibility. </> ), url: '/docs/intro' }, ]

Reproducible demo

https://docs.dodao.dev

Steps to reproduce

1. add Ill-cat-star.svg to HomepageFeatures/index.js
2. npx docusaurus build
3. see image not correctly rendered after build

Expected behavior

SVG must be rendered correctly

Actual behavior

probably because of the compression it is corrupted

Your environment

• Public source code: https://github.com/devopsdao/dodao-docusaurus
• Public site URL: https://docs.dodao.dev
• Docusaurus version used: 2.4.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): nodejs 16.8
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): debian 11

Self-service

• I'd be willing to fix this bug myself.

[slorber]

What does "rendered correctly" means?

Does it happen to all svgs or just one in particular.

Does it happen in the prod build or in dev too.

---

Show me a minimal repro where the code already has the SVG not rendering correctly.

Your repro does not even contain the SVG you reference here.

Module not found: Error: Can't resolve '@site/static/img/dodao/Ill-cat-future.svg' in '/home/devopsdao/dodao-docusaurus/src/components/HomepageFeatures'

https://stackblitz.com/~/github.com/devopsdao/dodao-docusaurus

[makinghappen]

here is how it renders, see https://docs.dodao.dev

it both renders so in dev and prod builds.

@slorber have pushed the version published on https://docs.dodao.dev to the github repository.

[slorber]

Great, so what's the problem exactly? Isn't this rendering as it should?

Show me your actual render vs expected render side by side and highlights the problem.

[Josh-Cena]

I believe it's a duplicate of #8297. @makinghappen please try #8297 (comment) and we can re-open if it turns out it's not a duplicate. You may also want to embed the SVG using an <img> tag instead: <img src="/img/dodao/Ill-cat-future.svg" alt="" />