diff --git a/src/components/QrRenderer25D.js b/src/components/QrRenderer25D.js
index ff56816..fd8bfdb 100644
--- a/src/components/QrRenderer25D.js
+++ b/src/components/QrRenderer25D.js
@@ -1,7 +1,7 @@
 import React from "react";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -96,7 +96,12 @@ export default class QrRenderer25D extends React.Component {
     }
 
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererBase.js b/src/components/QrRendererBase.js
index 34ab950..3c3e103 100644
--- a/src/components/QrRendererBase.js
+++ b/src/components/QrRendererBase.js
@@ -1,7 +1,7 @@
 import React from "react";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -107,7 +107,12 @@ export default class QrRendererBase extends React.Component {
     }
 
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererBlank.js b/src/components/QrRendererBlank.js
index be3c819..77fce98 100644
--- a/src/components/QrRendererBlank.js
+++ b/src/components/QrRendererBlank.js
@@ -1,10 +1,14 @@
 import React from "react";
 import './Qrcode.css'
-import {defaultRenderer} from "../utils/util";
+import {defaultViewBox} from "../utils/util";
 
 export default class QrRendererBlank extends React.Component {
     render() {
-        return defaultRenderer(this.props.qrcode);
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererDSJ.js b/src/components/QrRendererDSJ.js
index c3f2259..337566f 100644
--- a/src/components/QrRendererDSJ.js
+++ b/src/components/QrRendererDSJ.js
@@ -1,7 +1,7 @@
 import React from "react";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -186,7 +186,12 @@ export default class QrRendererDSJ extends React.Component {
     }
 
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererImage.js b/src/components/QrRendererImage.js
index c841282..f00195b 100644
--- a/src/components/QrRendererImage.js
+++ b/src/components/QrRendererImage.js
@@ -1,7 +1,7 @@
 import React from "react";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer} from "../utils/util";
+import {defaultRenderer, defaultViewBox} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -130,7 +130,12 @@ export default class QrRendererImage extends React.Component {
     }
 
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererRandRect.js b/src/components/QrRendererRandRect.js
index fcf78fd..a6cd774 100644
--- a/src/components/QrRendererRandRect.js
+++ b/src/components/QrRendererRandRect.js
@@ -1,6 +1,6 @@
 import React from "react";
 import './Qrcode.css'
-import {defaultRenderer, rand} from "../utils/util";
+import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -40,7 +40,12 @@ function listPoint(props) {
 
 export default class QrRendererRandRect extends React.Component {
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererRandRound.js b/src/components/QrRendererRandRound.js
index 109122f..b581b6b 100644
--- a/src/components/QrRendererRandRound.js
+++ b/src/components/QrRendererRandRound.js
@@ -1,7 +1,7 @@
 import React from "react";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {rand, defaultRenderer} from "../utils/util";
+import {rand, defaultRenderer, defaultViewBox} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -107,7 +107,12 @@ export default class QrRendererRandRound extends React.Component {
     }
 
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/components/QrRendererRound.js b/src/components/QrRendererRound.js
index cf1762b..d23f7f1 100644
--- a/src/components/QrRendererRound.js
+++ b/src/components/QrRendererRound.js
@@ -1,7 +1,7 @@
 import React from "react";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -107,7 +107,12 @@ export default class QrRendererRound extends React.Component {
     }
 
     render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
     }
 }
 
diff --git a/src/utils/util.js b/src/utils/util.js
index 5c6ab47..a79d532 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -22,14 +22,6 @@ export function defaultViewBox(qrcode) {
     return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
 }
 
-export function defaultRenderer(qrcode, points) {
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {points}
-        </svg>
-    );
-}
 
 export function isWeiXin(){
     const ua = window.navigator.userAgent.toLowerCase();