SVG files are broken

[maliMirkec]

When I try to save the remote image with the Eleventy Image plugin, the SVG file is broken. I've tried to use Buffer but had no luck. So I've tried to debug what is going on.

The function createSvg in the src/format-hooks/svg.js file returns the following Uint8Array data, which is then stored as an SVG file. I don't know how to fix this.

[Aankhen]

This is a strange bug, as we discussed on Discord, because what you’re getting in the screenshot is the string representation of a Uint8Array. In other words, you’ve somehow got the bytes of the string of the bytes of the image.

[Aankhen]

I can confirm that this happens with other SVG images too, like this one: https://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg

Here’s a small demonstration:

❯❯ cat .\.eleventy.js
const Image = require("@11ty/eleventy-img");

module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("image", async function (src, alt, sizes) {
    let metadata = await Image(src, {
      widths: [300, 600],
      formats: [null],
    });

    let imageAttributes = {
      alt,
      sizes,
      loading: "lazy",
      decoding: "async",
    };

    // You bet we throw an error on a missing alt (alt="" works okay)
    return Image.generateHTML(metadata, imageAttributes);
  });
};
❯❯ cat .\test.njk
{% image 'https://images.ctfassets.net/qbmf238cr6te/2ExPY7uYyafazH0IfFnpTD/610bce5faa1598685f2985d2062dcf1f/heyflow-logo.svg', '', '30vw' %}
{% image 'https://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg', '', '30vw' %}
❯❯ npx eleventy
[11ty] Writing _site/test/index.html from ./test.njk
[11ty] Wrote 1 file in 0.38 seconds (v2.0.1)
❯❯ la -T img .cache
Mode   Size Date Modified    Date Accessed    Git Name
d----     - 2024-04-15 14:34 2024-04-15 14:34  -N .cache
-a---    87 2024-04-15 14:34 2024-04-15 14:34  -N ├── eleventy-fetch-627a3ab0d5a14cfae88fefbc8d6d06
-a---   477 2024-04-15 14:34 2024-04-15 14:34  -N ├── eleventy-fetch-627a3ab0d5a14cfae88fefbc8d6d06.buffer
-a---    87 2024-04-15 14:34 2024-04-15 14:34  -N ├── eleventy-fetch-732d66e39e1245c8666eeb1d7869e9
-a--- 2.5Ki 2024-04-15 14:34 2024-04-15 14:34  -N └── eleventy-fetch-732d66e39e1245c8666eeb1d7869e9.buffer
d----     - 2024-04-15 14:34 2024-04-15 14:34  -N img
-a--- 1.6Ki 2024-04-15 14:34 2024-04-15 14:34  -N ├── cKJqfkmfxt-467.svg
-a--- 7.5Ki 2024-04-15 14:34 2024-04-15 14:34  -N └── tn8vIuPE6f-1500.svg
❯❯ foreach ($p in (gci .cache | ?{ -not $_.Name.EndsWith(".buffer") })) { cat $p }
[{"627a3ab0d5a14cfae88fefbc8d6d06":"1"},{"cachedAt":1713171842099,"type":"2"},"buffer"]
[{"732d66e39e1245c8666eeb1d7869e9":"1"},{"cachedAt":1713171841858,"type":"2"},"buffer"]
❯❯ cat .\img\cKJqfkmfxt-467.svg
60,63,120,109,108,32,118,101,114,115,105,111,110,61,34,49,46,48,34,63,62,13,10,60,33,68,79,67,84,89,80,69,32,115,118,103,32,80,85,66,76,73,67,32,34,45,47,47,87,51,67,47,47,68,84,68,32,83,86,71,32,49,46,49,47,47,69,78,34,13,10,32,32,34,104,116,116,112,58,47,47,119,119,119,46,119,51,46,111,114,103,47,71,114,97,112,104,105,99,115,47,83,86,71,47,49,46,49,47,68,84,68,47,115,118,103,49,49,46,100,116,100,34,62,13,10,13,10,60,115,118,103,32,120,109,108,110,115,61,34,104,116,116,112,58,47,47,119,119,119,46,119,51,46,111,114,103,47,50,48,48,48,47,115,118,103,34,13,10,32,119,105,100,116,104,61,34,52,54,55,34,32,104,101,105,103,104,116,61,34,52,54,50,34,62,13,10,32,32,60,114,101,99,116,32,120,61,34,56,48,34,32,121,61,34,54,48,34,32,119,105,100,116,104,61,34,50,53,48,34,32,104,101,105,103,104,116,61,34,50,53,48,34,32,114,120,61,34,50,48,34,13,10,32,32,32,32,32,32,115,116,121,108,101,61,34,102,105,108,108,58,35,102,102,48,48,48,48,59,32,115,116,114,111,107,101,58,35,48,48,48,48,48,48,59,115,116,114,111,107,101,45,119,105,100,116,104,58,50,112,120,59,34,32,47,62,13,10,32,32,13,10,32,32,60,114,101,99,116,32,120,61,34,49,52,48,34,32,121,61,34,49,50,48,34,32,119,105,100,116,104,61,34,50,53,48,34,32,104,101,105,103,104,116,61,34,50,53,48,34,32,114,120,61,34,52,48,34,13,10,32,32,32,32,32,32,115,116,121,108,101,61,34,102,105,108,108,58,35,48,48,48,48,102,102,59,32,115,116,114,111,107,101,58,35,48,48,48,48,48,48,59,32,115,116,114,111,107,101,45,119,105,100,116,104,58,50,112,120,59,13,10,32,32,32,32,32,32,102,105,108,108,45,111,112,97,99,105,116,121,58,48,46,55,59,34,32,47,62,13,10,60,47,115,118,103,62

[maliMirkec]

Does my fix help?

https://github.com/11ty/eleventy-img/pull/221

[Aankhen]

It does, but the approach concerns me. There ought to be some way to get the right content from the request.

[shkarinn]

It does, but the approach concerns me. There ought to be some way to get the right content from the request.

But it working, better working approach, than nothing. In v 4.0 I can't use SVG files.

Does my fix help?

This commit is working, thank you!