Search code examples
javascriptreactjsfile-uploadimage-upload

If I update a file of type svg then how can I get the svg string out of it?

I need the data in this format after selecting an SVG icon from any file upload.

<svg
  width="100%"
  height="100%"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M5 21C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5ZM6 18V6H18V18H15V9H12V18H6Z"
    fill="currentColor"
  />
</svg>

Please take help of this website: https://jakearchibald.github.io/svgomg/

here we can upload any SVG and under the markup section, we can see its HTML version.

I also want to implement something similar.

Solution

  • Got it solved:

          const reader = new FileReader();
      reader.onload = function (evt) {
        console.log("onload: ", evt.target.result);
      };
      reader.readAsText(file);