search

11ty / eleventy-img

Utility to perform build-time image transformations.
https://www.11ty.dev/docs/plugins/image/
436 stars 54 forks source link

Are raster images *not* supported in SVG source files? #186

Closed pmpinto closed 7 months ago

pmpinto commented 1 year ago

I'm trying to generate automated opengraph images on build time, following this technique.

Basically, I generate an SVG file for each post. These SVGs have a raster image, such as:

<image id="image" width="1200" height="900" xlink:href="../../../photos/citroen-ami-buggy-1200w.jpeg" />

Then, Image will convert these SVG into JPEG images which can them be used for opengraph images.

Right now, the resulting JPEG file Image is generating has all the vector elements in the correct positions, but lacks the raster image. Renders only a black area. The source SVGs though, when opened in a browser work just fine.

Feels like I'm missing something. Or is this I'm trying to achieve just not possible at all?

zachleat commented 7 months ago

Looks like Sharp does support this, but maybe only for Base64 encoded raster sources.

A few upstream resources: https://github.com/lovell/sharp/blob/26d0b7147d874d497aa5500debce5df2804ffb6a/test/unit/svg.js#L66 https://github.com/lovell/sharp/issues/2157#issuecomment-612621988

Search: https://github.com/lovell/sharp/issues?q=is%3Aissue+svg+href

If sharp adds this for relative sources, we’ll have it too.

zachleat commented 7 months ago

Some more notes about formats here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

zachleat commented 7 months ago

This is the root issue for relative source xlink references: https://github.com/lovell/sharp/issues/1871