How to convert image (svg) to rendered svg in javascript?

问题

I have an image that loads when clicking a div like so:

<img class="svg" src="{{asset('public/images/my_image.svg') }}" alt="" id='image'>

When calling this image from the backend side, it's returned as an image and not vectors (SVG render). How can I render it to SVG using Javascript or any other similar tool?

Thanks!

回答1:

Using an img tag with a src in essentially makes an HTTP request to the server for you. In this case you have to make the request yourself. You can do that with the Fetch API which is native to JavaScript.

// This should be the path to your SVG file.
// Modify if incorrect.
const svgFilePath = 'public/images/my_image.svg';

// Select the current image.
const image = document.querySelector('.svg');

// Create a new dom parser to turn the SVG string into an element.
const parser = new DOMParser();

// Fetch the file from the server.
fetch(svgFilePath)
  .then(response => response.text())
  .then(text => {

    // Turn the raw text into a document with the svg element in it.
    const parsed = parser.parseFromString(text, 'text/html');

    // Select the <svg> element from that document.
    const svg = parsed.querySelector('svg');

    // If both the image and svg are found, replace the image with the svg.
    if (image !== null && svg !== null) {
      image.replaceWith(svg);
    }

  });

And with handling multiple files. In this case I've used an array with objects that hold the id of the image element you want to get and the src of the svg file.

// Array of object containing the id of the image you want to replace
// and the src of the SVG that takes it's place.
const svgFiles = [
  { id: 'image1', src: 'public/images/my_image_1.svg' },
  { id: 'image2', src: 'public/images/my_image_2.svg' },
  { id: 'image3', src: 'public/images/my_image_3.svg' },
];

// Create a new dom parser to turn the SVG string into an element.
const parser = new DOMParser();

// Loop over each object in the array and use the id and src
// with a destructuring assignment.
for (const { id, src } of svgFiles) {

  // Find the image. If it is not there, continue with the
  // loop to the next iteration.
  let image = document.getElementById(id);
  if (image === null) continue;

  // Fetch the file from the server.
  fetch(src)
    .then(response => response.text())
    .then(text => {

      // Turn the raw text into a document with the svg element in it.
      const parsed = parser.parseFromString(text, 'text/html');

      // Select the <svg> element from that document.
      const svg = parsed.querySelector('svg');

      // If the svg is found, replace the image with the svg.
      // Otherwise, continue the loop.
      if (svg === null) continue;
      image.replaceWith(svg);

    });
}

回答2:

I noticed that you are using asset() function so I'm guessing you don't necessary want it to be JS
You can use Laravel SVG package which provides @svg() blade directive.
it's small and convenient

<a href="/settings">
    @svg('cog', 'icon-lg') Settings
</a>

<!-- Renders.. -->
<a href="/settings">
    <svg class="icon icon-lg">
        <path d="..." fill-rule="evenodd"></path>
    </svg>
    Settings
</a>

来源：https://stackoverflow.com/questions/60985791/how-to-convert-image-svg-to-rendered-svg-in-javascript

标签

javascript

html

svg