This SVG does not render properly as PNG

[Vic152]

Hey All,

I spent a day trying to get below SVG converted to PNG

I used this code and some other variations (tried write as PNG directly too):

wget.download('https://prop.kc2g.com/renders/current/mufd-normal-now.svg', out='rigreference_wide.svg')
    drawing = svg2rlg("rigreference_wide.svg")
    # renderPDF.drawToFile(drawing, "rigreference_wide.pdf")
    # renderPM.drawToFile(drawing, "rigreference_wide.png", fmt="PNG")
    pdf = renderPDF.drawToString(drawing)

    # Open pdf with fitz (pyMuPdf) to convert to PNG
    doc = fitz.Document(stream=pdf)
    pix = doc.load_page(0).get_pixmap(alpha=True, dpi=300)
    pix.save("rigreference_wide.png")

This is what I end up with

Is there something wrong with this SVG? I tried Wand like this:

    with Color('#00000000') as bgcolor, Image(filename="rigreference_wide.svg", background=bgcolor) as img:
        # to save output to a file:
        with img.convert('png') as output_img:
            output_img.save(filename='rigreference_wide.png')
        # or, to get the output data in a variable:
        png_data = img.make_blob(format='png')

Wand works in Windows but in Linux it draws rubbish:

I also tried rendering here and it works fine.

[deeplook]

Interesting. I've run svg2pdf on your sample file and it produces the one big oversaturated image. Then I've extracted/decoded the embedded two PNG images and they both look normal. I first thought of gradients in the SVG but there seem to be no gradients. Can you experiment a bit more and remove various bits in the SVG and verify the effects with svglib?

[Vic152]

Interesting. I've run svg2pdf on your sample file and it produces the one big oversaturated image. Then I've extracted/decoded the embedded two PNG images and they both look normal. I first thought of gradients in the SVG but there seem to be no gradients. Can you experiment a bit more and remove various bits in the SVG and verify the effects with svglib?

It is not my SVG. To be honest I am not sure what am I looking at in general with SVG. There are of course 2 layers at least. One the heatmap and the second is the map of the world. It's surprising how hard it is to extract PNG from SVG. Thanks for looking into this :)

[deeplook]

It's not too difficult... I ran something like this below in a notebook with hashes indicating new cells:

import base64
import re
from IPython.display import Image, SVG
import requests

# 
path = "https://prop.kc2g.com/renders/current/mufd-normal-now.svg"
SVG(url=path)

#
svg = requests.get(path).text
images = re.findall('"data:image/png;base64, (.*?)"', svg)

# 
Image(data=base64.b64decode(images[0]))

#
Image(data=base64.b64decode(images[1]))

[Vic152]

fixed it with regex :D ooh that's interesting, I could overlay them again maybe... This is way too much of the workaround but still better than using webdriver to get screen shot...

[claudep]

I guess it should be related to PNG transparency poor handling by Reportlab. But it's really just a guess.

[deeplook]

This sounds like a good bet, indeed. Maybe @replabrobin has an idea?

[Vic152]

Did anybody else had a chance to have a look. I would love some not very hacky solution. For now splitting to two images and merging them seems the least hacky.

[MrBitBucket]

Standard reportlab renderPM output doesn't know anything about transparency at all. We are supposed to be moving to using cairo as a pixmap renderer and there it ought to be possible to use ARGB32 in the rlPyCairo.GState object. I suppose we would also need to hack the save code for renderPM to check the various special cases. Normally the PMCanvas.toPil method is called, but that assumes we are creating an image in RGB and just hacks the backend bytes into it. Firstly we need to be able to pass an argument into the PMCanvas to indicate that we are trying for ARGB32 etc and then hack the toPil to use it.

On the other hand there's no need to mess with reportlab at all if the real problem is to merge two images. Of course if the svg is manipulating the images that's a different story. At any rate the lib is called svgtopdf, but it could actually be called svgToRLDrawing; the drawing produced can save directly to an image which would allow some of the above to actually work.