SVG Renderer throws an error

Commit or branch: Master

Observed behavior

Error in console when using the SVG Renderer, loading screen does not disappear

Expected behavior

Working pilingJS with 5 SVG images

Steps to reproduce

See https://codepen.io/lehnerchristian/pen/LYZYWMo?editors=1111 and open browser console

The error is thrown in this line:

piling.js/src/svg-renderer.js

Line 39 in abec7fb

image.src = image64;

Probably catching the error would give us a better error message (I gladly will submit a PR for the error handling, if you'd like)

Thanks for reporting the issue and setting up the codepen. It turns out the issue was caused by the <?xml and <!DOCTYPE definitions at the beginning of the external SVG file.

Here's a working example:

import createPilingJs, { createSvgRenderer } from 'piling.js';

const create = async (element) => {
  const response = await fetch('/1.svg'); // from https://sample-videos.com/svg/1.svg
  const svg = await response.text();

  return createPilingJs(element, {
    renderer: createSvgRenderer(),
    items: [{ src: svg }],
  })
};

Since it's tedious to manually fetch external SVG images, I integrated the fetch related part. Hence, the following works in v0.7.12:

import createPilingJs, { createSvgRenderer } from 'piling.js';

const create = createPilingJs(element, {
  renderer: createSvgRenderer(),
  items: [{ src: '/1.svg' }],
})

ok, thanks for your reply. I think last week we also had a problem if getting the image returned a 404 - Not Found HTTP status code. however I haven't tried again

If the above solution works, can you close the issue?

Regarding the 404 issue, could you open a new issue? In general, piling.js will throw an onload error if the image is not available. One option to not break the initialization could be a placeholder image. However that's not implemented yet.

Closing this for now as I assume it's working. Please feel free to reopen if the issue persists