Rendering SVG from buffer with external or local image using xlink

What are you trying to achieve? Render an SVG from buffer that refers to an external or local image file.

For example:

<svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

(image taken from this Mozilla example: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image)

Have you searched for similar questions? Yes.

Are you able to provide a standalone code sample that demonstrates this question? This code:

const sharp = require('sharp');

var svgData = `<svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>`;

sharp(new Buffer.from(svgData))
	.toFile("test.png")
	.catch(err => {
		console.error(err);
	});

Results in this error:

[Error: vips_realpath: unable to form filename
unix error: No such file or directory
svgload_buffer: SVG rendering failed
vips2png: unable to write "test.png"
]

I am probably missing something simple, but it seems that buffer input confuses the path resolution somehow. For local files with relative paths, would these be relative to the execution directory?

Are you able to provide a sample image that helps explain the question? See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

[kleisauke]

librsvg will not load http resources. As librsvg is shared across the GNOME environment, it’s pretty important to have a strict deny on remote resources. This to keep malicious SVG data from “phoning home”.

[kleisauke]

librsvg needs a base URL for referenced files. If a base URL is not given, then any referenced files will not be allowed. https://gitlab.gnome.org/GNOME/librsvg/blob/b4aa8d277d30f4042797dc8b64c073b10f8bac4b/rsvg_internals/src/allowed_url.rs#L60

When loading from a file, librsvg will set the base file to the file itself. But when a SVG image is loaded from a buffer (Buffer.from) a base file isn’t set. https://github.com/libvips/libvips/blob/3b0d44be51fac4d04355f409e12ffed34d886efd/libvips/foreign/svgload.c#L582

This will require a new optional argument within vips_svgload_buffer (for e.g. base_uri) that will set the base URL (this can be done with rsvg_handle_set_base_uri).

To workaround this for now you’ll need to base64 encode the relevant image directly within the SVG file. data: URLs doesn’t require a base URL.