diff --git a/package-lock.json b/package-lock.json
index a867a58..f3473fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "qrcode-vue3": "^1.6.8",
+        "uqr": "^0.1.2",
         "vcard4": "^3.1.5",
         "vue": "^3.3.4"
       },
@@ -658,6 +659,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/uqr": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.2.tgz",
+      "integrity": "sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA=="
+    },
     "node_modules/vcard4": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/vcard4/-/vcard4-3.1.5.tgz",
diff --git a/package.json b/package.json
index 6b0ddf7..e967234 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "qrcode-vue3": "^1.6.8",
+    "uqr": "^0.1.2",
     "vcard4": "^3.1.5",
     "vue": "^3.3.4"
   },
diff --git a/src/App.vue b/src/App.vue
index e52190c..41811ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,7 @@ import {
   NProperty,
   VCARD,
 } from "vcard4";
+import { renderSVG } from 'uqr'
 import { ref, watchEffect } from 'vue'
 
 const fullname = ref('');
@@ -28,6 +29,18 @@ const company = ref('');
 const job = ref('');
 const qrcode = ref('');
 
+function downloadSVG() {
+  const svg = renderSVG(qrcode.value);
+  const svgBlob = new Blob([svg], {type:"image/svg+xml;charset=utf-8"});
+        const svgUrl = URL.createObjectURL(svgBlob);
+        const downloadLink = document.createElement("a");
+        downloadLink.href = svgUrl;
+        downloadLink.download = 'vcard-qr';
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+}
+
 watchEffect(() => {
   const fields = [];
   if(fullname.value !== "") {
@@ -36,7 +49,8 @@ watchEffect(() => {
   } 
 
   if(phone.value !== "") {
-    const cardPhone = new TelProperty([], new URIType(`tel:${phone.value}`));
+    //const cardPhone = new TelProperty([], new URIType(`tel:${phone.value}`));
+    const cardPhone = new TelProperty([], new TextType(`${phone.value}`));
     fields.push(cardPhone);
   }
 
@@ -69,6 +83,8 @@ watchEffect(() => {
     }
     const card = new VCARD(fields);
     qrcode.value = card.repr();
+  } else {
+    qrcode.value = '';
   }
   
   
@@ -86,7 +102,6 @@ watchEffect(() => {
     <input v-model="company" placeholder="company Name">
     <input v-model="job" placeholder="Job Title">
   </div>
-
   <QRCodeVue3 :value="qrcode" 
   :width="200"
   :height="200"
@@ -103,9 +118,10 @@ watchEffect(() => {
   :cornersDotOptions="{ type: undefined, color: '#000000' }"
   fileExt="png"
   :download="true"
-  downloadButton="my-button"
+  downloadButton="download"
   :downloadOptions="{ name: 'vcard-qr', extension: 'png' }"
   />
+  <button class="download" @click="downloadSVG" v-if="qrcode !== ''">Download SVG</button>
 </template>
 
 <style scoped>
@@ -115,4 +131,7 @@ watchEffect(() => {
   gap: 18px;
   margin-bottom: 20px;
 }
+.download {
+  margin-top: 20px;
+}
 </style>