Using inline SVGs from Inkscape fails with "SyntaxError: unknown: Namespace tags are not supported by default."

[charleskorn]

🐛 Bug Report

Using a SVG created by Inkscape using its default Inkscape-extended SVG format with the inline SVG feature fails with SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Create a SVG in Inkscape and save in the default SVG file format (I've attached one for reference)

2. Reference the SVG using the inline SVG syntax, for example:

   import MyDrawing from './drawing.svg';
   
   <MyDrawing />

Expected behavior

SVG is loaded and displayed correctly

Actual Behavior

Error is thrown during compilation:

./docs/drawing.svg
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   6 |   ...props
   7 | }) {
>  8 |   return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="125.87715mm" height="122.36498mm" viewBox="0 0 125.87715 122.36498" id="svg868" inkscape:version="1.0.1 (c497b03c, 2020-09-10)" sodipodi:docname="\\\\.svg" aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs862" /><sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity={1} inkscape:pageopacity={0} inkscape:pageshadow={2} inkscape:zoom={0.5} inkscape:cx={422.21944} inkscape:cy={577.65834} inkscape:document-units="mm" inkscape:current-layer="layer1" inkscape:document-rotation={0} showgrid="false" lock-margins="true" fit-margin-top={20} fit-margin-left={20} fit-margin-right={20} fit-margin-bottom={20} inkscape:window-width={1252} inkscape:window-height={1174} inkscape:window-x={2240} inkscape:window-y={23} inkscape:window-maximized={0} /><metadata id="metadata865"><rdf:RDF><cc:Work rdf:about=""><dc:format>{"image/svg+xml"}</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(5.8788924,4.6721033)"><path sodipodi:type="star" style={{
     |               ^^^^^^^^
   9 |         fill: "#000000",
  10 |         fillOpacity: 0.05,
  11 |         stroke: "#000000",
 @ ./docs/doc1.mdx 1:791-828 1:1806-1815
 @ ./.docusaurus/registry.js
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

Your Environment

• Docusaurus version used: 2.0.0-alpha.66
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome 86.0.4240.183, Node 15.0.1
• Operating system and version (desktop or mobile): macOS 10.15.7 desktop

Reproducible Demo

Repo: https://github.com/charleskorn/docusaurus-svg-issue

Run yarn start or yarn build to see error.

[charleskorn]

This issue seems to be fixed if SVGO optimisation is switched on for SVGR:

docusaurus/packages/docusaurus/src/webpack/base.ts

Line 221 in 83db07e

use: '@svgr/webpack?-prettier,-svgo,+titleProp,+ref![path]',

Making the following change to that line solves the problem for me, as the default configuration for SVGO removes all editor-related namespace tags:

-use: '@svgr/webpack?-prettier,-svgo,+titleProp,+ref![path]', 
+use: '@svgr/webpack?-prettier,+svgo,+titleProp,+ref![path]', 

I'm happy to submit a PR with this change if you're open to that.

[lex111]

I'm happy to submit a PR with this change if you're open to that.

I think that would be great.

[gabrieloliveirasobrinho]

how did you solve it? I didn't get

[Iwoks]

Tries to save in optimized mode. And check mark removes metadata.