Sharp: SVG with large base64 image "Couldn't find end of Start Tag image line 16"

[kimmobrunfeldt]

Are you using the latest version? Is the version currently in use as reported by npm ls sharp the same as the latest version as reported by npm view sharp dist-tags.latest?

Yes, latest version 0.25.2, installation reported "info sharp Using cached /home/alvar/.npm/_libvips/libvips-8.9.1-linux-x64.tar.gz"

What are the steps to reproduce?

I'm trying to construct a new sharp instance with an SVG that has a large base 64 embedded image tag.

const sharp = require('sharp');
const image = sharp('classic-70x100cm-portrait-server.svg', { density: 72, limitInputPixels: false })
  .resize(1000, null)
  .png()
  .toBuffer()

The full error I get:

Error: Input file has corrupt header: glib: XML parse error: Error domain 1 code 73 on line 16 column 10000071 of data: Couldn't find end of Start Tag image line 16

I chose to use base64 embedded png image because referencing to local files via xlink stopped working for some reason (and in our previous setup it relied on working directory to be exactly set). Also read https://github.com/lovell/sharp/issues/1871.

What is the expected behaviour?

The file would be parsed correctly, or I would be able to set a flag to allow larger limit for XML parser.

Are you able to provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem?

Yes, see ZIP file below.

Are you able to provide a sample image that helps explain the problem?

This zip file contains example-error/ directory where you can reproduce the issue. Run npm I && node index.js

example-error.zip

What is the output of running npx envinfo --binaries --system?

npx: installed 1 in 0.872s

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 48.28 GB / 62.70 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    npm: 6.14.4 - ~/.nvm/versions/node/v10.20.1/bin/npm

[kimmobrunfeldt]

I ended up solving this by actually using absolute paths instead of the data blob, like so: file:///path/to/my/image.png. If I understood correctly, this requires the png image to be at the same level or below in the filesystem as the svg file. The answer by to this question https://stackoverflow.com/questions/2961624/rsvg-doesnt-render-linked-images was very helpful.

However, this change introduced a new issue: font's were incorrectly loaded. I first thought this must happen because of the file system restrictions, so I moved custom fonts under the same path where my SVG files are located. It didn't help though. Issue search revealed an older issue: https://github.com/lovell/sharp/issues/1549, but the workaround solution turned out to be the final solution to make fonts render correctly. Instead of font-family="JosefinSans-Light, Josefin Sans" I used font-family="'JosefinSans-Light, Josefin Sans'", which fixed the issue.

[kimmobrunfeldt]

To just blurp this information somewhere, I'll continue on this issue. Turns out the file reference didn't work out in our remote server when the process was running with pm2. I enabled librsvg logging using export RSVG_LOG=parse_errors,filters (see here) and got these errors:

setting base_uri to "file:///home/myuser/my-node-app/9632a57c-9b5b-4dd1-8149-6e1e95629095.svg"
could not load image "file:///home/myuser/my-node-app/posters/dist/images/classic-gradient-70x100cm-portrait.png": Unrecognized image file format

After googling a bit I tried to upgrade my system librsvg, and it worked. Fix for embedded images with pm2 was: sudo apt-get install -y librsvg2-2

Edit: I believe this is a separate issue from the base64 image embedding. I'm not sure why this happens but it could be because of how pm2 runs the node process, and somehow the system librsvg is used. Sorry for not creating a new issue, I currently don't have any more time to make another reproducible example.

[lovell]

Hi, this looks like #1339 - older versions of librsvg required setting an "unlimited" flag (not exposed in sharp).

The prebuilt version of librsvg provided by the latest sharp should work but, as you say, it does not.

[lovell]

Commit 86acf24 should fix this, plus the missing xlink namespace needs adding to the example SVG.

The librsvg 10MB vs "unlimited" flag previously applied to the SVG document as a whole, but in newer versions appears to apply to the length of attribute values.

I believe librsvg is removing the dependence on libxml2 so this flag will go away at some point, but for now we can hard-code to unlimited to future-proof things.

[kimmobrunfeldt]

Amazing work @lovell :) Thank you for this library, it is one of the most well-maintained and professional node software pieces out there!

[lovell]

v0.25.3 now available, thanks for reporting.