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/ — Edgar, 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 304 · Accepted Answer · edited Jul 01 '23 at 21:30

304

In the SVG file, try changing:

sketch:type TO sketchType
xmlns:xlink TO xmlnsXlink
xlink:href  TO xlinkHref
xmlns:bx    TO xmlnsBx
bx:origin   TO bxOrigin
etc...

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

edited Jul 01 '23 at 21:30

Mohammadreza Khedri

2,523
1
11
22

answered Apr 12 '20 at 05:13

Frawel

3,574
1
17
13

23

So ... we have to use JSX-friendly SVGs now? Seems a bit ridiculous... – Josh M. Aug 15 '22 at 14:22
THANK YOU! This is the answer that keeps on giving. I am using Vectornator to create my SVG files and it outputs a lot of `vectornator:layerName` So, I went through and every time I found a colon that wasn't in a URL, but was naming something, I changed it to camelCase (like `vectornatorLayerName`) and the SVG works now! Thank you @Frawel – CWarrington Jun 07 '23 at 02:40
I don't understand the need to rewrite the SVG file settings to work wit JSX. I can use SVG files created in Python, view them through Django in html then view the same SVG files in TypeScript in Angular. Why can't the React people build converters for this? – Brian Quinn Jun 18 '23 at 19:04

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

40

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

558
4
9

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
13

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

This site also removes any IDs you might have set. Use https://svg2jsx.com/ -- perfect tool! – Prid Aug 04 '22 at 17:51

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

14

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

141
1
8

3

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
2

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 3 · Answer 4 · answered Oct 04 '22 at 04:07

3

This is a nice tool that converts an SVG into a react friendly component and includes support for typescript

https://react-svgr.com/playground/

answered Oct 04 '22 at 04:07

ctown4life

835
1
11
24

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

2

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

129
2
10

score 2 · Answer 6 · answered Nov 10 '22 at 16:59

2

In mine I had to change:

   xmlns:svg="http://www.w3.org/2000/svg"

to

   xmlnsSvg="http://www.w3.org/2000/svg"

answered Nov 10 '22 at 16:59

Sooth

2,834
23
26

1

This worked for me. Another option is to remove the xmlns:svg property with its value. – Polymath Jan 01 '23 at 15:57

score 1 · Answer 7 · 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 8 · answered Dec 12 '22 at 21:38

0

You first have to convert the SVG file to JSX then use it. Use https://svg2jsx.com/

answered Dec 12 '22 at 21:38

Anshuman Bisoyi

149
4

SyntaxError: unknown: Namespace tags are not supported by default

8 Answers8

Linked

Related