From 00e84ead96d89bcbd072b9585b4db1365e392d33 Mon Sep 17 00:00:00 2001
From: Michael Gruben <michael.gruben@gmx.net>
Date: Sat, 14 Nov 2020 23:04:46 +0100
Subject: [PATCH] fix: prevent removing the namespace by svgr
 ([#475](https://github.com/gregberge/svgr/issues/475) (#498)

Co-authored-by: Michael Gruben <michael.gruben@empiriecom.com>
---
 packages/babel-preset/src/index.js            |   2 +-
 .../cli/src/__snapshots__/index.test.js.snap  | 109 ++++++++++++++----
 .../cli/src/__snapshots__/util.test.js.snap   |  10 +-
 .../src/__snapshots__/convert.test.js.snap    |  96 +++++++++++----
 .../src/__snapshots__/index.test.js.snap      |   3 +-
 packages/plugin-jsx/src/index.test.js         |   4 +-
 .../src/__snapshots__/index.test.js.snap      |   9 +-
 .../src/__snapshots__/index.test.js.snap      |   9 +-
 8 files changed, 182 insertions(+), 60 deletions(-)

diff --git a/packages/babel-preset/src/index.js b/packages/babel-preset/src/index.js
index 68e66f10..bb656fc2 100644
--- a/packages/babel-preset/src/index.js
+++ b/packages/babel-preset/src/index.js
@@ -28,7 +28,7 @@ function replaceMapToValues(replaceMap) {
 }
 
 const plugin = (api, opts) => {
-  let toRemoveAttributes = ['xmlns', 'xmlnsXlink', 'version']
+  let toRemoveAttributes = ['version']
   let toAddAttributes = []
 
   if (opts.svgProps) {
diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
index bfb70700..c6a57053 100644
--- a/packages/cli/src/__snapshots__/index.test.js.snap
+++ b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`cli should not override config with cli defaults 1`] = `
 "import * as React from \\"react\\";
 
 function SvgFile() {
-  return <svg viewBox=\\"0 0 48 1\\"><title>{\\"Rectangle 5\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\"><g id=\\"19-Separator\\" transform=\\"translate(-129.000000, -156.000000)\\" fill=\\"#063855\\"><g id=\\"Controls/Settings\\" transform=\\"translate(80.000000, 0.000000)\\"><g id=\\"Content\\" transform=\\"translate(0.000000, 64.000000)\\"><g id=\\"Group\\" transform=\\"translate(24.000000, 56.000000)\\"><g id=\\"Group-2\\"><rect id=\\"Rectangle-5\\" x={25} y={36} width={48} height={1} /></g></g></g></g></g></g></svg>;
+  return <svg viewBox=\\"0 0 48 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Rectangle 5\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\"><g id=\\"19-Separator\\" transform=\\"translate(-129.000000, -156.000000)\\" fill=\\"#063855\\"><g id=\\"Controls/Settings\\" transform=\\"translate(80.000000, 0.000000)\\"><g id=\\"Content\\" transform=\\"translate(0.000000, 64.000000)\\"><g id=\\"Group\\" transform=\\"translate(24.000000, 56.000000)\\"><g id=\\"Group-2\\"><rect id=\\"Rectangle-5\\" x={25} y={36} width={48} height={1} /></g></g></g></g></g></g></svg>;
 }
 
 export default SvgFile;
@@ -23,7 +23,12 @@ exports[`cli should support --prettier-config as file 1`] = `
 
 function SvgFile(props) {
      return (
-          <svg width={48} height={1} {...props}>
+          <svg
+               width={48}
+               height={1}
+               xmlns=\\"http://www.w3.org/2000/svg\\"
+               {...props}
+          >
                <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
           </svg>
      )
@@ -39,7 +44,12 @@ exports[`cli should support --prettier-config as json 1`] = `
 
 function SvgFile(props) {
      return (
-          <svg width={48} height={1} {...props}>
+          <svg
+               width={48}
+               height={1}
+               xmlns=\\"http://www.w3.org/2000/svg\\"
+               {...props}
+          >
                <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
           </svg>
      )
@@ -55,7 +65,7 @@ exports[`cli should support --svgo-config as file 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <title>{'Rectangle 5'}</title>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
@@ -72,7 +82,7 @@ exports[`cli should support --svgo-config as json 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <title>{'Rectangle 5'}</title>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
@@ -138,7 +148,7 @@ exports[`cli should support stdin filepath 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -154,7 +164,7 @@ exports[`cli should support various args: --expand-props none 1`] = `
 
 function SvgFile() {
   return (
-    <svg width={48} height={1}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -170,7 +180,7 @@ exports[`cli should support various args: --expand-props start 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg {...props} width={48} height={1}>
+    <svg {...props} width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -186,7 +196,13 @@ exports[`cli should support various args: --icon 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
+    <svg
+      width=\\"1em\\"
+      height=\\"1em\\"
+      viewBox=\\"0 0 48 1\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      {...props}
+    >
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -203,7 +219,7 @@ import Svg, { Path } from 'react-native-svg'
 
 function SvgFile() {
   return (
-    <Svg width={48} height={1}>
+    <Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
       <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </Svg>
   )
@@ -220,7 +236,13 @@ import Svg, { Path } from 'react-native-svg'
 
 function SvgFile(props) {
   return (
-    <Svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
+    <Svg
+      width=\\"1em\\"
+      height=\\"1em\\"
+      viewBox=\\"0 0 48 1\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      {...props}
+    >
       <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </Svg>
   )
@@ -237,7 +259,13 @@ import Svg, { Path } from 'react-native-svg'
 
 function SvgFile(props, svgRef) {
   return (
-    <Svg width={48} height={1} ref={svgRef} {...props}>
+    <Svg
+      width={48}
+      height={1}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      ref={svgRef}
+      {...props}
+    >
       <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </Svg>
   )
@@ -255,7 +283,7 @@ import Svg, { Path } from 'react-native-svg'
 
 function SvgFile(props) {
   return (
-    <Svg width={48} height={1} {...props}>
+    <Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </Svg>
   )
@@ -271,7 +299,7 @@ exports[`cli should support various args: --no-dimensions 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg viewBox=\\"0 0 48 1\\" {...props}>
+    <svg viewBox=\\"0 0 48 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -286,7 +314,7 @@ exports[`cli should support various args: --no-prettier 1`] = `
 "import * as React from \\"react\\";
 
 function SvgFile(props) {
-  return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+  return <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 }
 
 export default SvgFile;
@@ -298,7 +326,14 @@ exports[`cli should support various args: --no-svgo 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width=\\"48px\\" height=\\"1px\\" viewBox=\\"0 0 48 1\\" {...props}>
+    <svg
+      width=\\"48px\\"
+      height=\\"1px\\"
+      viewBox=\\"0 0 48 1\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
+      {...props}
+    >
       <title>{'Rectangle 5'}</title>
       <desc>{'Created with Sketch.'}</desc>
       <defs />
@@ -339,7 +374,13 @@ exports[`cli should support various args: --ref 1`] = `
 
 function SvgFile(props, svgRef) {
   return (
-    <svg width={48} height={1} ref={svgRef} {...props}>
+    <svg
+      width={48}
+      height={1}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      ref={svgRef}
+      {...props}
+    >
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -356,7 +397,7 @@ exports[`cli should support various args: --replace-attr-values "#063855=current
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -372,7 +413,14 @@ exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} hidden={true} id=\\"hello\\" {...props}>
+    <svg
+      width={48}
+      height={1}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      hidden={true}
+      id=\\"hello\\"
+      {...props}
+    >
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -388,7 +436,13 @@ exports[`cli should support various args: --title-prop 1`] = `
 
 function SvgFile({ title, titleId, ...props }) {
   return (
-    <svg width={48} height={1} aria-labelledby={titleId} {...props}>
+    <svg
+      width={48}
+      height={1}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      aria-labelledby={titleId}
+      {...props}
+    >
       {title ? <title id={titleId}>{title}</title> : null}
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
@@ -415,6 +469,7 @@ function SvgFile(
     <svg
       width={48}
       height={1}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
       ref={svgRef}
       aria-labelledby={titleId}
       {...props}
@@ -439,7 +494,13 @@ function SvgFile(
   svgRef?: React.Ref<SVGSVGElement>,
 ) {
   return (
-    <svg width={48} height={1} ref={svgRef} {...props}>
+    <svg
+      width={48}
+      height={1}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      ref={svgRef}
+      {...props}
+    >
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -456,7 +517,7 @@ exports[`cli should support various args: --typescript 1`] = `
 
 function SvgFile(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -512,7 +573,7 @@ exports[`cli should work with a simple file 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -528,7 +589,7 @@ exports[`cli should work with stdin 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
diff --git a/packages/cli/src/__snapshots__/util.test.js.snap b/packages/cli/src/__snapshots__/util.test.js.snap
index c4cd1ca5..e830efd8 100644
--- a/packages/cli/src/__snapshots__/util.test.js.snap
+++ b/packages/cli/src/__snapshots__/util.test.js.snap
@@ -5,7 +5,7 @@ exports[`util #convertFile should convert a file 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -20,7 +20,13 @@ exports[`util #convertFile should support a custom config path 1`] = `
 
 function SvgFile(props) {
   return (
-    <svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 48 1\\" {...props}>
+    <svg
+      width=\\"1em\\"
+      height=\\"1em\\"
+      viewBox=\\"0 0 48 1\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      {...props}
+    >
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap
index 86ce2877..75ba37c0 100644
--- a/packages/core/src/__snapshots__/convert.test.js.snap
+++ b/packages/core/src/__snapshots__/convert.test.js.snap
@@ -5,7 +5,7 @@ exports[`convert config should support options 0 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg viewBox=\\"0 0 88 88\\" {...props}>
+    <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -28,7 +28,7 @@ exports[`convert config should support options 1 1`] = `
 
 function SvgComponent() {
   return (
-    <svg width={88} height={88}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\">
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -51,7 +51,7 @@ exports[`convert config should support options 2 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg {...props} width={88} height={88}>
+    <svg {...props} width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\">
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -74,7 +74,13 @@ exports[`convert config should support options 3 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 88 88\\" {...props}>
+    <svg
+      width=\\"1em\\"
+      height=\\"1em\\"
+      viewBox=\\"0 0 88 88\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      {...props}
+    >
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -98,7 +104,7 @@ import Svg, { G, Path } from 'react-native-svg'
 
 function SvgComponent(props) {
   return (
-    <Svg width={88} height={88} {...props}>
+    <Svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <G
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -122,7 +128,7 @@ import { Svg } from 'expo'
 
 function SvgComponent(props) {
   return (
-    <Svg width={88} height={88} {...props}>
+    <Svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <Svg.G
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -146,7 +152,13 @@ import Svg, { G, Path } from 'react-native-svg'
 
 function SvgComponent(props) {
   return (
-    <Svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 88 88\\" {...props}>
+    <Svg
+      width=\\"1em\\"
+      height=\\"1em\\"
+      viewBox=\\"0 0 88 88\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      {...props}
+    >
       <G
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -170,7 +182,7 @@ import Svg, { G, Path } from 'react-native-svg'
 
 function SvgComponent() {
   return (
-    <Svg width={88} height={88}>
+    <Svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\">
       <G
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -194,7 +206,13 @@ import Svg, { G, Path } from 'react-native-svg'
 
 function SvgComponent(props, svgRef) {
   return (
-    <Svg width={88} height={88} ref={svgRef} {...props}>
+    <Svg
+      width={88}
+      height={88}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      ref={svgRef}
+      {...props}
+    >
       <G
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -218,7 +236,13 @@ exports[`convert config should support options 9 1`] = `
 
 function SvgComponent(props, svgRef) {
   return (
-    <svg width={88} height={88} ref={svgRef} {...props}>
+    <svg
+      width={88}
+      height={88}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      ref={svgRef}
+      {...props}
+    >
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -242,7 +266,14 @@ exports[`convert config should support options 10 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} a=\\"b\\" b={props.b} {...props}>
+    <svg
+      width={88}
+      height={88}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      a=\\"b\\"
+      b={props.b}
+      {...props}
+    >
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -265,7 +296,7 @@ exports[`convert config should support options 11 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} {...props}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -288,7 +319,7 @@ exports[`convert config should support options 12 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} {...props}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -311,7 +342,14 @@ exports[`convert config should support options 13 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" {...props}>
+    <svg
+      width=\\"88px\\"
+      height=\\"88px\\"
+      viewBox=\\"0 0 88 88\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
+      {...props}
+    >
       <title>{'Dismiss'}</title>
       <desc>{'Created with Sketch.'}</desc>
       <defs />
@@ -340,7 +378,7 @@ exports[`convert config should support options 14 1`] = `
 "import * as React from \\"react\\";
 
 function SvgComponent(props) {
-  return <svg width={88} height={88} {...props}><g stroke=\\"#063855\\" strokeWidth={2} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><path d=\\"M51 37L37 51M51 51L37 37\\" /></g></svg>;
+  return <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><g stroke=\\"#063855\\" strokeWidth={2} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><path d=\\"M51 37L37 51M51 51L37 37\\" /></g></svg>;
 }
 
 export default SvgComponent;"
@@ -358,7 +396,13 @@ exports[`convert config should support options 16 1`] = `
 
 function SvgComponent({ title, titleId, ...props }) {
   return (
-    <svg width={88} height={88} aria-labelledby={titleId} {...props}>
+    <svg
+      width={88}
+      height={88}
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      aria-labelledby={titleId}
+      {...props}
+    >
       {title ? <title id={titleId}>{title}</title> : null}
       <g
         stroke=\\"#063855\\"
@@ -382,7 +426,7 @@ exports[`convert config should support options 17 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} {...props}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -430,7 +474,7 @@ exports[`convert should convert 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} {...props}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <g
         stroke=\\"#063855\\"
         strokeWidth={2}
@@ -453,7 +497,13 @@ exports[`convert should convert style attribute 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={48} height={48} {...props}>
+    <svg
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
+      width={48}
+      height={48}
+      {...props}
+    >
       <g transform=\\"translate(0 -1004.362)\\">
         <g id=\\"prefix__a\\" color=\\"#000\\" fill=\\"#a3a3a3\\" strokeWidth={8}>
           <rect
@@ -500,7 +550,7 @@ exports[`convert should handle special SVG attributes 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg {...props}>
+    <svg xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <path externalResourcesRequired=\\"false\\" d=\\"M10 10h100v100H10z\\" />
     </svg>
   )
@@ -515,7 +565,7 @@ exports[`convert should not remove all style tags 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} {...props}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <style>{'path{fill:red}'}</style>
       <g
         id=\\"prefix__Blocks\\"
@@ -543,7 +593,7 @@ exports[`convert should remove null characters 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={25} height={25} {...props}>
+    <svg xmlns=\\"http://www.w3.org/2000/svg\\" width={25} height={25} {...props}>
       <path
         d=\\"M19.4 24.5H5.6c-2.8 0-5.1-2.3-5.1-5.1V5.6C.5 2.8 2.8.5 5.6.5h13.8c2.8 0 5.1 2.3 5.1 5.1v13.8c0 2.8-2.3 5.1-5.1 5.1z\\"
         fill=\\"#fff\\"
@@ -563,7 +613,7 @@ exports[`convert should remove style tags 1`] = `
 
 function SvgComponent(props) {
   return (
-    <svg width={88} height={88} {...props}>
+    <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
       <g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
         <g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
           <path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\" />
diff --git a/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap
index 037c51d3..8b00631c 100644
--- a/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap
+++ b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap
@@ -47,7 +47,8 @@ var _ref = /*#__PURE__*/React.createElement(\\"g\\", {
 function SvgIcon(props) {
   return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
     width: 88,
-    height: 88
+    height: 88,
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, props), _ref);
 }
 
diff --git a/packages/plugin-jsx/src/index.test.js b/packages/plugin-jsx/src/index.test.js
index 9f3bb85a..2b706124 100644
--- a/packages/plugin-jsx/src/index.test.js
+++ b/packages/plugin-jsx/src/index.test.js
@@ -23,7 +23,7 @@ describe('plugin', () => {
       "import * as React from \\"react\\";
 
       function SvgComponent() {
-        return <svg viewBox=\\"0 0 88 88\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
+        return <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
       }
 
       export default SvgComponent;"
@@ -52,7 +52,7 @@ describe('plugin', () => {
       "import * as React from \\"react\\";
 
       function SvgComponent() {
-        return <svg viewBox=\\"0 0 88 88\\"><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
+        return <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
       }
 
       export default SvgComponent;"
diff --git a/packages/rollup/src/__snapshots__/index.test.js.snap b/packages/rollup/src/__snapshots__/index.test.js.snap
index e42de42b..d070c712 100644
--- a/packages/rollup/src/__snapshots__/index.test.js.snap
+++ b/packages/rollup/src/__snapshots__/index.test.js.snap
@@ -14,7 +14,8 @@ var _ref = /*#__PURE__*/React.createElement(\\"path\\", {
 function SvgFile(props) {
   return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
     width: 48,
-    height: 1
+    height: 1,
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, props), _ref);
 }
 
@@ -25,7 +26,7 @@ exports[`rollup loader should convert file with previousExport of image plugin 1
 "import * as React from \\"react\\";
 
 function SvgFile(props) {
-  return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+  return <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 }
 
 var img = new Image();
@@ -38,7 +39,7 @@ exports[`rollup loader should convert file with previousExport of url plugin 1`]
 "import * as React from \\"react\\";
 
 function SvgFile(props) {
-  return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+  return <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 }
 
 export default \\"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2248px%22%20height%3D%221px%22%20viewBox%3D%220%200%2048%201%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%20%20%20%20%3Ctitle%3ERectangle%205%3C%2Ftitle%3E%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%2219-Separator%22%20transform%3D%22translate%28-129.000000%2C%20-156.000000%29%22%20fill%3D%22%23063855%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Controls%2FSettings%22%20transform%3D%22translate%2880.000000%2C%200.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Content%22%20transform%3D%22translate%280.000000%2C%2064.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%2824.000000%2C%2056.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-5%22%20x%3D%2225%22%20y%3D%2236%22%20width%3D%2248%22%20height%3D%221%22%3E%3C%2Frect%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E\\";
@@ -49,7 +50,7 @@ exports[`rollup loader should convert file without babel 1`] = `
 "import * as React from \\"react\\";
 
 function SvgFile(props) {
-  return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+  return <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 }
 
 export default SvgFile;"
diff --git a/packages/webpack/src/__snapshots__/index.test.js.snap b/packages/webpack/src/__snapshots__/index.test.js.snap
index 2934ff87..8bcea1cf 100644
--- a/packages/webpack/src/__snapshots__/index.test.js.snap
+++ b/packages/webpack/src/__snapshots__/index.test.js.snap
@@ -6,7 +6,8 @@ exports[`webpack loader should convert file (babel: false) 1`] = `
 function SvgIcon() {
   return /*#__PURE__*/React.createElement(\\"svg\\", {
     width: 88,
-    height: 88
+    height: 88,
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, /*#__PURE__*/React.createElement(\\"g\\", {
     stroke: \\"#063855\\",
     strokeWidth: 2,
@@ -26,7 +27,8 @@ exports[`webpack loader should convert file 1`] = `
 
 var _ref = /*#__PURE__*/React.createElement(\\"svg\\", {
   width: 88,
-  height: 88
+  height: 88,
+  xmlns: \\"http://www.w3.org/2000/svg\\"
 }, /*#__PURE__*/React.createElement(\\"g\\", {
   stroke: \\"#063855\\",
   strokeWidth: 2,
@@ -49,7 +51,8 @@ exports[`webpack loader should support url-loader 1`] = `
 
 var _ref = /*#__PURE__*/React.createElement(\\"svg\\", {
   width: 88,
-  height: 88
+  height: 88,
+  xmlns: \\"http://www.w3.org/2000/svg\\"
 }, /*#__PURE__*/React.createElement(\\"g\\", {
   stroke: \\"#063855\\",
   strokeWidth: 2,