SyntaxError: unknown: Namespace tags are not supported by default

Question

I get the following error when trying to download svg as a React Component.

SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

import React from "react";
import { ReactComponent as LO } from "../a/Logo.svg"
import { NavLink } from "react-router-dom";

const Logo = () => (
  <>
    <NavLink to={"/"}>
     <LO width={"40px"} height={"40px"} />
    </NavLink>
  </>
);

export default Logo;

What is the reason ?

https://create-react-app.dev/docs/adding-images-fonts-and-files/ — Silicum Silium, Jan 20 '20 at 10:12
Your SVG contains namespace tags in its metadata. You can remove them. — Eran Goldin, Jan 20 '20 at 10:26
@Jesus Please refer to this solution https://stackoverflow.com/questions/23402542/embedding-svg-into-reactjs?answertab=active#tab-top — Akhil Aravind, Jan 20 '20 at 10:27
Does this answer your question? [Embedding SVG into ReactJS](https://stackoverflow.com/questions/23402542/embedding-svg-into-reactjs) — Akhil Aravind, Jan 20 '20 at 10:27
If you are using create-react-app, then namespaces are not supported. — rrd, Jan 20 '20 at 10:47
Manually changing svg attributes into camelcase is cumbersome. Do it here https://svg2jsx.com/ — Biboswan, Oct 18 '20 at 09:40

score 199 · Accepted Answer · edited Oct 23 '21 at 08:48

199

In the SVG file, try changing:

    sketch:type TO sketchType
    xmlns:xlink TO xmlnsXlink
    xlink:href  TO xlinkHref

etc...

The idea is to create camelCase property, remember that you are working with JSX, you are not creating a string as XML does.

edited Oct 23 '21 at 08:48

Akash Kumar Verma

2,954
2
14
27

answered Apr 12 '20 at 05:13

Frawel

2,504
1
15
11

Ahmad Salih · Answer 2 · 2021-08-19T11:37:53.687

24

Since we are in the JSX playground your SVG tags should be written as camelCase

So you can easily optimize your SVG using the link below to avoid this error :)

svgminify

edited Aug 19 '21 at 11:37

answered Nov 07 '20 at 09:21

Ahmad Salih

373
2
7

2

This answer helped! – Nikolas Charalambidis Nov 15 '20 at 20:51
The link is down. Is there any alternative? – nulldroid Aug 19 '21 at 10:03
@Nulldroid yup try this one: https://www.svgminify.com – Ahmad Salih Aug 19 '21 at 11:32
7

This site does not convert the tags to camelCase. – blimpse Jan 03 '22 at 22:01

Tharusha Jayasooriya · Answer 3 · 2022-02-15T03:36:30.497

6

The most simple solution is to just convert the SVG file to JSX.Then create a separate component or just copy paste the tag. This website does the job perfectly.

https://svg2jsx.com/

edited Feb 15 '22 at 03:36

answered Feb 14 '22 at 13:09

Tharusha Jayasooriya

81
1
5

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 14 '22 at 15:56
Thank you tharusha, this is the winning answer for me! [svgminify](https://www.svgminify.com) did not fix the root issue: React throwing a wobbler at namespaces. – Sean Mizen Mar 24 '22 at 09:56

score 1 · Answer 4 · answered Jan 06 '22 at 12:27

1

I had the same issue with all my svg files. Opening them in Adobe Illustrator and saving them again solved the issue.

answered Jan 06 '22 at 12:27

Bozena Z.

11
1

score 0 · Answer 5 · answered Dec 26 '21 at 10:58

0

I recommend using svgo to compress your SVG files. Simple CLI tool that runs with NodeJS and doesn't require you to upload your copyrighted SVGs anywhere.

answered Dec 26 '21 at 10:58

devgioele

41
2
8

SyntaxError: unknown: Namespace tags are not supported by default

5 Answers5

Linked