Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svg with data URI embedded image losing image after conversion #387

Closed
artfulinfo opened this issue Apr 22, 2023 · 5 comments
Closed

Svg with data URI embedded image losing image after conversion #387

artfulinfo opened this issue Apr 22, 2023 · 5 comments

Comments

@artfulinfo
Copy link

Hello

After constructing an SVG with the following format:

svg = """\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="{} {} {w} {h}" width="{w}" height="{h}">
    <path id="cropPath" d="{d}" />
    <clipPath id="crop">
        <use xlink:href="#cropPath" />
    </clipPath>
    <image xlink:href="data:image/{ext};base64,{encoded}" clip-path="url(#crop)"/>
</svg>
""".format(xmin, ymin, w=width, h=height, d=path.d(), ext=ext, encoded=encoded)

After converting with:

cairosvg.svg2png(
            bytestring=svg, write_to=f'./{p}.png', background_color=None, unsafe=True)

It returns a black filled version of the shape cropped with the clipPath, but the image is not kept. After searching through some of the other issues, I attempted to install the other dependencies recommended (Pillow and the css specific ones); switching to using xlink:href rather than href and enabling unsafe mode, with no success.
I think the docs mentioned support of all of the approaches I'm using in the svg construction, and I have run out of ideas to try.
I've confirmed saving the exact same string to disk with the below works fine as expected:

with open(f'./{p}.svg', 'w') as file:
            file.write(svg)

To test, I checked what the svg2svg output was and no image is present:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120pt" height="100.8pt" viewBox="0 0 120 100.8" version="1.1">
<g id="surface41">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 0 0 L 112.5 0 C 112.5 0 129.375 47.25 112.5 37.800781 C 95.625 28.351562 95.625 66.148438 112.5 56.699219 C 129.375 47.25 112.5 94.5 112.5 94.5 C 112.5 94.5 56.25 108.675781 67.5 94.5 C 78.75 80.324219 33.75 80.324219 45 94.5 C 56.25 108.675781 0 94.5 0 94.5 L 0 0 "/>
</g>
</svg>
@liZe
Copy link
Member

liZe commented Apr 23, 2023

Hi,

Is this a duplicate of #383?

@artfulinfo
Copy link
Author

In my case it does not work regardless of whether unsafe flag is enabled or not. But could potentially be related. Is there any more information I can provide to help that I left out in the first comment?

@liZe
Copy link
Member

liZe commented Apr 23, 2023

Is there any more information I can provide to help that I left out in the first comment?

Yes. Could you please share a SVG file generated from your template? If it contains personal data you don’t want to share publicly, you can send a mail.

@artfulinfo
Copy link
Author

Sure thing, just shared over email

@liZe liZe closed this as completed in 7dea7cf Apr 29, 2023
@liZe
Copy link
Member

liZe commented Apr 29, 2023

It’s fixed, feedback is welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants