{"id":28117,"date":"2022-08-18T11:04:25","date_gmt":"2022-08-18T11:04:25","guid":{"rendered":"http:\/\/how-to-upload-and-convert-images-to-svg-in-nuxt"},"modified":"2025-03-02T05:12:40","modified_gmt":"2025-03-02T13:12:40","slug":"how-to-upload-and-convert-images-to-svg-in-nuxt","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/","title":{"rendered":"How to Upload and Convert Images To SVG in Nuxt.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>SVG is the world\u2019s most popular vector image format used by designers, developers, and content creators. It is incredibly lightweight and scalable. It is also editable as code, allowing for customizations that improve SEO, design, and accessibility.<\/p>\n<p>Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image.<\/p>\n<p>You will implement Cloudinary\u2019s <code>vectorize<\/code> effect to create the <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/svg-format-features-common-uses-and-pros-cons-you-should-know\">SVG image<\/a> and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.<\/p>\n<h2>CodeSandbox &amp; GitHub Repo<\/h2>\n<p>View the complete demo for this tutorial on <a href=\"https:\/\/codesandbox.io\/embed\/nuxt-imgtosvg-demo-1zy042?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">CodeSandbox<\/a>:<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nuxt-imgtosvg-demo-1zy042?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"How to Upload and Convert an Image to SVG in Nuxt\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><p>The source code is also available on <a href=\"https:\/\/github.com\/dpkreativ\/nuxt-imgtosvg-demo\">GitHub<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To understand the concepts in this tutorial, you should have the following:<\/p>\n<ul>\n<li>Basic knowledge of Git, JavaScript, and Vue<\/li>\n<li>A GitHub account (create an account <a href=\"https:\/\/github.com\">here<\/a>)<\/li>\n<li>A Cloudinary account for uploading and converting your images (create an account <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>)<\/li>\n<li>\n<a href=\"https:\/\/nodejs.org\">Node.js<\/a>, <a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\">Yarn<\/a>, and <a href=\"https:\/\/git-scm.com\/downloads\">Git<\/a> installed on your PC<\/li>\n<\/ul>\n<h2>Set Up Nuxt.js Project<\/h2>\n<p>First, open this <a href=\"https:\/\/github.com\/dpkreativ\/nuxt-imgtosvg-starter\/generate\">starter template URL<\/a> in your browser to generate a GitHub repo for this project based on a starter template:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1658816748192_generate+template.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"967\" height=\"728\"\/><\/p>\n<p>Here, you set <code>nuxt-imgtosvg-demo<\/code> as the name of your repo.<\/p>\n<p>On your PC, open a terminal window and navigate to your preferred folder, then clone your newly created repo with the command below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">git clone <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">your-github-repo<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After it has successfully cloned to your PC, navigate into its folder and install its dependencies with <code>yarn<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">cd nuxt-imgtosvg-demo\nyarn\n<\/code><\/span><\/pre>\n<p>Or using <code>npm<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">cd nuxt-imgtosvg-demo\nnpm install\n<\/code><\/span><\/pre>\n<p>After successfully installing its dependencies, open the project in your preferred code editor and run the code below in your terminal to start a development server:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">yarn dev\n<\/code><\/span><\/pre>\n<p>Or using <code>npm<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm run dev\n<\/code><\/span><\/pre>\n<p>This command will serve the project with a hot reload on <code>localhost:3000<\/code>, which you can view in your browser:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1658817302830_localhost3000.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1732\" height=\"714\"\/><\/p>\n<h2>Set Up Cloudinary<\/h2>\n<p><strong>Get Cloudinary Cloud Name<\/strong><\/p>\n<p>In a new browser tab open your <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary dashboard<\/a> and copy your \u201cCloud Name\u201d:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1658817466989_cloud+name.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"459\" height=\"208\"\/><\/p>\n<p>In the root directory of your project, create a <code>.env<\/code> file and update it with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">CLOUDINARY_CLOUDNAME=your-cloudinary-cloud-name\n<\/code><\/span><\/pre>\n<p><strong>Enable Client-side Uploads<\/strong><\/p>\n<p>To enable client-side uploads on Cloudinary, you will need an \u201cunsigned upload preset\u201d. In your browser, navigate to Cloudinary\u2019s settings and click on the \u201cUpload\u201d tab, then scroll down to \u201cUpload Presets\u201d:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1658830112463_upload+preset.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1278\" height=\"692\"\/><\/p>\n<p>Click on \u201cAdd upload preset\u201d, specify the name of your new preset, and change \u201cSigning Mode\u201d to \u201cUnsigned\u201d, then save the preset:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1658830172812_add+upload+preset.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1396\" height=\"467\"\/><\/p>\n<p>Take note of your upload preset name.<\/p>\n<p><strong>Install Cloudinary Package for Nuxt.js<\/strong><\/p>\n<p>In your project\u2019s terminal, run the code below to install the Cloudinary package for Nuxt.js:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">yarn<\/span> <span class=\"hljs-selector-tag\">add<\/span> <span class=\"hljs-keyword\">@nuxtjs<\/span>\/cloudinary\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Or using <code>npm<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@nuxtjs<\/span>\/cloudinary\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Configure Cloudinary in Nuxt.js<\/strong><\/p>\n<p>After its successful installation, open your <code>nuxt.config.js<\/code> file and update it with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n  <span class=\"hljs-attr\">modules<\/span>: &#91;<span class=\"hljs-string\">'@nuxtjs\/axios'<\/span>, <span class=\"hljs-string\">'@nuxtjs\/cloudinary'<\/span>],\n\n  <span class=\"hljs-attr\">cloudinary<\/span>: {\n    <span class=\"hljs-attr\">cloudName<\/span>: process.env.CLOUDINARY_CLOUDNAME,\n  },\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Added <code>@nuxtjs\/cloudinary<\/code> to your Nuxt.js modules array<\/li>\n<li>Specified your Cloudinary <code>cloudName<\/code> in a Cloudinary object<\/li>\n<\/ul>\n<p><strong>Select an Image from your Device<\/strong><\/p>\n<p>In your code editor, open <code>pages\/index.vue<\/code> and observe the code on lines 16 to 26:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span>\n  <span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">\"image\/*\"<\/span>\n  <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"fileInput\"<\/span>\n  <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hidden\"<\/span>\n  @<span class=\"hljs-attr\">change<\/span>=<span class=\"hljs-string\">\"handleChange\"<\/span>\n  <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"fileInput\"<\/span>\n\/&gt;<\/span>\n<span class=\"hljs-comment\">&lt;!-- ...template code --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">:onClick<\/span>=<span class=\"hljs-string\">\"handleRef\"<\/span> <span class=\"hljs-attr\">purple<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span>Choose Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above:<\/p>\n<ul>\n<li>The <code>&lt;input \/&gt;<\/code> accepts image files and triggers the <code>handleChange<\/code> method<\/li>\n<li>The <code>class=&quot;hidden&quot;<\/code> hides <code>&lt;input&gt;<\/code> from the viewer, and <code>ref=&quot;fileInput&quot;<\/code> lets another element reference <code>&lt;input&gt;<\/code>\n<\/li>\n<li>The <code>&lt;Button&gt;<\/code> element is a custom component with an <code>onClick<\/code> prop that triggers the <code>handleRef<\/code> method<\/li>\n<\/ul>\n<p><strong>Update the handleRef method<\/strong>\nScroll down to your <code>&lt;script&gt;<\/code> tag and update the <code>handleRef()<\/code> method with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">methods<\/span>: {\n      handleRef() {\n        <span class=\"hljs-keyword\">this<\/span>.$refs.fileInput.click();\n      },\n    },\n  };\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Checked for a <code>fileInput<\/code> ref in your project\u2019s list of <code>$refs<\/code>\n<\/li>\n<li>Listened for the <code>click()<\/code> method triggered by <code>fileInput<\/code>\n<\/li>\n<\/ul>\n<p>When a user clicks on the <code>&lt;Button&gt;<\/code> component containing this <code>handleRef()<\/code> method, it triggers a <code>click()<\/code> method on the <code>&lt;input \/&gt;<\/code> and allows the user to select an image from their device.<\/p>\n<p><strong>Update the handleChange method<\/strong>\nIn your <code>&lt;script&gt;<\/code> tag, update the <code>handleChange()<\/code> method with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">methods<\/span>: {\n      handleChange(e) {\n        <span class=\"hljs-comment\">\/\/ console.log(e)<\/span>\n        <span class=\"hljs-keyword\">const<\/span> reader = <span class=\"hljs-keyword\">new<\/span> FileReader();\n\n        reader.readAsDataURL(e.target.files&#91;<span class=\"hljs-number\">0<\/span>]);\n\n        reader.onload = <span class=\"hljs-function\">(<span class=\"hljs-params\">onloadEvent<\/span>) =&gt;<\/span> {\n          <span class=\"hljs-keyword\">this<\/span>.setImage = onloadEvent.target.result;\n        };\n      },\n    },\n  };\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In this code, you did the following:<\/p>\n<ul>\n<li>Created a <code>reader<\/code> variable that contains an instance of JavaScript\u2019s <code>FileReader()<\/code> API<\/li>\n<li>The <code>reader<\/code> reads the image file and returns its data as a base64 encoded string, which is passed to <code>setImage<\/code>\n<\/li>\n<\/ul>\n<p>Due to <code>:src=&quot;setImage&quot;<\/code> in line 11 of your <code>pages\/index.vue<\/code> file, <code>&lt;img&gt;<\/code> will display the selected image on the browser, ready for upload:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1658831756071_Screenshot_2022-07-25_165045.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1118\" height=\"535\"\/><\/p>\n<h2>Upload your Selected Image to Cloudinary<\/h2>\n<p>In the <code>&lt;script&gt;<\/code> tag of your <code>pages\/index.vue<\/code>, update the <code>handleUpload()<\/code> method with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">methods<\/span>: {\n      <span class=\"hljs-keyword\">async<\/span> handleUpload() {\n        <span class=\"hljs-keyword\">this<\/span>.setUploadStatus = <span class=\"hljs-literal\">true<\/span>;\n\n        <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">this<\/span>.setImage !== <span class=\"hljs-string\">''<\/span>) {\n          <span class=\"hljs-comment\">\/\/ Upload image to Cloudinary<\/span>\n          <span class=\"hljs-keyword\">const<\/span> uploadImage = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">this<\/span>.$cloudinary\n            .upload(<span class=\"hljs-keyword\">this<\/span>.setImage, {\n              <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'imgtosvg'<\/span>,\n            })\n            .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">res<\/span>) =&gt;<\/span> res.public_id);\n        } <span class=\"hljs-keyword\">else<\/span> {\n          alert(<span class=\"hljs-string\">'Choose image first!'<\/span>);\n        }\n      },\n    },\n  };\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Set the <code>setUploadStatus<\/code> state to <code>true<\/code>, which triggers the loading state of the <code>&lt;Button&gt;<\/code> component on lines 28 to 34. Note that this <code>&lt;Button&gt;<\/code> contains an <code>onClick<\/code> prop to trigger the <code>handleUpload()<\/code> method<\/li>\n<li>Checked if the user selected an image<\/li>\n<li>Created a <code>uploadImage<\/code> variable that uploads your selected image to Cloudinary, with <code>upload_preset<\/code> as its parameter. Replace the value of <code>upload_preset<\/code> with yours from Cloudinary<\/li>\n<li>The <code>upload<\/code> method returns an Asset object containing the details of the image you just uploaded. You then returned its <code>public_id<\/code>, setting it as the value for <code>uploadImage<\/code>\n<\/li>\n<\/ul>\n<h2>Extract and Display SVG Code<\/h2>\n<p><strong>Generate SVG URL with public_id<\/strong><\/p>\n<p>Update the <code>handleUpload()<\/code> method with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">methods<\/span>: {\n      <span class=\"hljs-keyword\">async<\/span> handleUpload() {\n        <span class=\"hljs-keyword\">this<\/span>.setUploadStatus = <span class=\"hljs-literal\">true<\/span>\n\n        <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">this<\/span>.setImage !== <span class=\"hljs-string\">''<\/span>) {\n          <span class=\"hljs-comment\">\/\/ Upload image to Cloudinary<\/span>\n          <span class=\"hljs-keyword\">const<\/span> uploadImage = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">this<\/span>.$cloudinary\n            .upload(<span class=\"hljs-keyword\">this<\/span>.setImage, {\n              <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'your_cloudinary_unsigned_upload_preset_name'<\/span>\n            })\n            .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">res<\/span>) =&gt;<\/span> res.public_id)\n\n          <span class=\"hljs-comment\">\/\/ Convert to SVG<\/span>\n          <span class=\"hljs-keyword\">const<\/span> url = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">this<\/span>.$cloudinary.image.url(uploadImage, {\n            <span class=\"hljs-attr\">format<\/span>: <span class=\"hljs-string\">'svg'<\/span>,\n            <span class=\"hljs-attr\">effect<\/span>: <span class=\"hljs-string\">'vectorize'<\/span>,\n          })\n\n          <span class=\"hljs-keyword\">this<\/span>.setImage = url\n      },\n    }\n  }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Generated an image URL from\nCloudinary and set its <code>format<\/code> to <code>svg<\/code> and its <code>effect<\/code> to <code>vectorize<\/code>\n<\/li>\n<li>Updated the value of <code>setImage<\/code> to <code>url<\/code>, which\nwill display your converted image in your browser<\/li>\n<\/ul>\n<p><strong>Extract SVG code from URL<\/strong><\/p>\n<p>In your terminal, run the command below to install <code>html-formatter<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">yarn add html-formatter\n<\/code><\/span><\/pre>\n<p>Or using <code>npm<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install html-formatter\n<\/code><\/span><\/pre>\n<p>This package lets you display auto-formatted HTML code, making it more readable. In your <code>pages\/index.vue<\/code>, import <code>html-formatter<\/code> and update the <code>handleUpload()<\/code>\nmethod with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">import<\/span> formatter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'html-formatter'<\/span>;\n\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">methods<\/span>: {\n      <span class=\"hljs-keyword\">async<\/span> handleUpload() {\n        <span class=\"hljs-keyword\">this<\/span>.setUploadStatus = <span class=\"hljs-literal\">true<\/span>;\n\n        <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">this<\/span>.setImage !== <span class=\"hljs-string\">''<\/span>) {\n          <span class=\"hljs-comment\">\/\/ Upload image to Cloudinary<\/span>\n          <span class=\"hljs-keyword\">const<\/span> uploadImage = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">this<\/span>.$cloudinary\n            .upload(<span class=\"hljs-keyword\">this<\/span>.setImage, {\n              <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'your_cloudinary_unsigned_upload_preset_name'<\/span>,\n            })\n            .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">res<\/span>) =&gt;<\/span> res.public_id);\n\n          <span class=\"hljs-comment\">\/\/ Convert to SVG<\/span>\n          <span class=\"hljs-keyword\">const<\/span> url = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">this<\/span>.$cloudinary.image.url(uploadImage, {\n            <span class=\"hljs-attr\">format<\/span>: <span class=\"hljs-string\">'svg'<\/span>,\n            <span class=\"hljs-attr\">effect<\/span>: <span class=\"hljs-string\">'vectorize'<\/span>,\n          });\n\n          <span class=\"hljs-keyword\">this<\/span>.setImage = url;\n\n          <span class=\"hljs-comment\">\/\/ Extract SVG code<\/span>\n          <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">this<\/span>.$axios\n            .$<span class=\"hljs-keyword\">get<\/span>(url)\n            .then((data) =&gt; (this.svgDisplay = formatter.render(data)));\n        } else {\n          alert(<span class=\"hljs-string\">'Choose image first!'<\/span>);\n        }\n\n        <span class=\"hljs-keyword\">this<\/span>.setUploadStatus = <span class=\"hljs-literal\">false<\/span>;\n      },\n    },\n  };\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Imported <code>html-formatter<\/code> as <code>formatter<\/code>\n<\/li>\n<li>Fetched the SVG image from its URL with <code>$axios<\/code>, which returns the SVG code as <code>data<\/code>\n<\/li>\n<li>Updated the value of <code>svgDisplay<\/code> to the formatted <code>data<\/code>, displaying it on the browser<\/li>\n<li>Disabled the loading state by changing <code>setUploadStatus<\/code> to <code>false<\/code>\n<\/li>\n<\/ul>\n<p>Here is the result of your code:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5898D1B8639311ADC11EED4C1E317F644C9BF34B6E9EB8645B4E9B7DC7118C2_1659665221190_demo.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"509\" height=\"234\"\/><\/p>\n<p><strong>Copy SVG code to Clipboard<\/strong><\/p>\n<p>In your terminal, run the command below to install <code>copy-to-clipboard<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">yarn add copy-to-clipboard\n<\/code><\/span><\/pre>\n<p>Or using <code>npm<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install copy-to-clipboard\n<\/code><\/span><\/pre>\n<p>This package lets you save content to your browser\u2019s clipboard.<\/p>\n<p>In the <code>&lt;script&gt;<\/code> tag of your <code>pages\/index.vue<\/code>, import <code>copy-to-clipboard<\/code> and update the <code>copySvg()<\/code> method with the code below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-comment\">\/\/ do not remove pre-existing code<\/span>\n  <span class=\"hljs-keyword\">import<\/span> copy <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'copy-to-clipboard'<\/span>;\n\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">methods<\/span>: {\n      copySvg() {\n        copy(<span class=\"hljs-keyword\">this<\/span>.svgDisplay);\n        <span class=\"hljs-keyword\">this<\/span>.clipboardStatus = <span class=\"hljs-string\">'Copied!'<\/span>;\n        setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n          <span class=\"hljs-keyword\">this<\/span>.clipboardStatus = <span class=\"hljs-string\">'Copy to Clipboard'<\/span>;\n        }, <span class=\"hljs-number\">2000<\/span>);\n      },\n    },\n  };\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Imported the <code>copy-to-clipboard<\/code> package as <code>copy<\/code>\n<\/li>\n<li>Saved the current value of <code>svgDisplay<\/code> to your browser\u2019s clipboard with <code>copy()<\/code>\n<\/li>\n<li>Changed the text of the clipboard button in line 45 to <code>'Copied!'<\/code>, and back to <code>'Copy to Clipboard'<\/code> two seconds later<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to convert an image to SVG using Cloudinary, extract its SVG code and display it in a Nuxt.js project using the <code>&lt;pre \/&gt;<\/code> tag. Check out these resources below for a deeper understanding of how Nuxt.js or Cloudinary works.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/upscaling_raster_image_to_vector_graphic_conversions\">Programmatically Convert Raster Images to Vector Graphics (cloudinary.com)<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FileReader\/readAsDataURL\">FileReader.readAsDataURL() &#8211; Web APIs | MDN (mozilla.org)<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/gist.github.com\/stowball\/e51dde035346eba783f3d8b54dbbf2a4\">Fetch a remote SVG as an img and convert it to an inline SVG (github.com)<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.youtube.com\/watch?v=VqnJwh6E9ak\">Vue Image Upload Made Easy &#8211; YouTube<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28118,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,400,372,371],"class_list":["post-28117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxt","tag-nuxtjs","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Upload and Convert Images To SVG in Nuxt.js<\/title>\n<meta name=\"description\" content=\"Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image. You will implement Cloudinary\u2019s vectorize effect to create the SVG image and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Upload and Convert Images To SVG in Nuxt.js\" \/>\n<meta property=\"og:description\" content=\"Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image. You will implement Cloudinary\u2019s vectorize effect to create the SVG image and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-18T11:04:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T13:12:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"474\" \/>\n\t<meta property=\"og:image:height\" content=\"266\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to Upload and Convert Images To SVG in Nuxt.js\",\"datePublished\":\"2022-08-18T11:04:25+00:00\",\"dateModified\":\"2025-03-02T13:12:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Nuxt\",\"NuxtJS\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\",\"name\":\"How to Upload and Convert Images To SVG in Nuxt.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA\",\"datePublished\":\"2022-08-18T11:04:25+00:00\",\"dateModified\":\"2025-03-02T13:12:40+00:00\",\"description\":\"Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image. You will implement Cloudinary\u2019s vectorize effect to create the SVG image and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA\",\"width\":474,\"height\":266},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Upload and Convert Images To SVG in Nuxt.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Upload and Convert Images To SVG in Nuxt.js","description":"Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image. You will implement Cloudinary\u2019s vectorize effect to create the SVG image and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/","og_locale":"en_US","og_type":"article","og_title":"How to Upload and Convert Images To SVG in Nuxt.js","og_description":"Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image. You will implement Cloudinary\u2019s vectorize effect to create the SVG image and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-08-18T11:04:25+00:00","article_modified_time":"2025-03-02T13:12:40+00:00","og_image":[{"width":474,"height":266,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/"},"author":{"name":"","@id":""},"headline":"How to Upload and Convert Images To SVG in Nuxt.js","datePublished":"2022-08-18T11:04:25+00:00","dateModified":"2025-03-02T13:12:40+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA","keywords":["Guest Post","Image","Nuxt","NuxtJS","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/","name":"How to Upload and Convert Images To SVG in Nuxt.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA","datePublished":"2022-08-18T11:04:25+00:00","dateModified":"2025-03-02T13:12:40+00:00","description":"Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image. You will implement Cloudinary\u2019s vectorize effect to create the SVG image and take advantage of Nuxt\u2019s APIs to upload, get, and convert your SVG images to code.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA","width":474,"height":266},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-and-convert-images-to-svg-in-nuxt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Upload and Convert Images To SVG in Nuxt.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922307\/Web_Assets\/blog\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776\/b7055ce5a76a27929280ecd57d26d057245f05a2-474x266-1_28118c1776.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28117"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28117\/revisions"}],"predecessor-version":[{"id":37056,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28117\/revisions\/37056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28118"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}