We want to use an SVG for the Wikipedia logo to keep it crisp on every device like the mobile website currently does. Marvin's current implementation embeds the SVGs directly into the HTML:
import wordmarkEn from "./wordmark-en.svg";
...
<div
className="Wordmark"
dangerouslySetInnerHTML={{ __html: wordmarkEn }}
/>This, in combination with svg-inline-loader, causes the contents of the SVG to be included in the client public/index.js bundle which significantly increases its size and the server-side rendered page which negatively affects time to render. This tasks encompasses the work to use the SVG as an image that is downloaded outside of the critical path and update the Webpack configuration to copy the asset to a public build product.
References: