Cairo SVG diagrams created with Windows Dia have partially white/transparent background

[SicroAtGit]

I noticed that the Cairo SVG diagrams created with the Windows version of Dia have a white box as a background, but it does not fill the entire background, making the unfilled background transparent.

To have a quick look at what I mean, switch to a dark theme in GitHub (for example, the "Dark dimmed" theme that I use) and look at the diagrams.

Cairo SVG diagrams created with the Linux version of Dia, have a white box that always fills the entire background, but they unfortunately have the black border, around the entire SVG.

It's not a big problem because we have a white background in the GitBook anyway, but does the box have any purpose? If not, we should remove the "erroneous" box from the diagrams.

[tajmone]

I noticed that the Cairo SVG diagrams created with the Windows version of Dia have a white box as a background, but it does not fill the entire background, making the unfilled background transparent.

To have a quick look at what I mean, switch to a dark theme in GitHub (for example, the "Dark dimmed" theme that I use) and look at the diagrams.

You're right. It looks like in some of the Diagrams the BG box is not correctly sized. I didn't noticed it because I don't have any good SVG previewer (except the one from Inkscape) so I just open them in Chrome.

Also, I'm not sure why the boxes are white, they should be transparent, so I'll have to check that too.

It seems that work with these diagrams is never ending ... so far they have taken up over 70% of the overall project time.

OK, when I managed to have some free time I'll try to setup a correct preview system, e.g. by adding to the repository an HTML document with a chequered background to allow testing for transparency, and I'll go over all the diagrams (once again).

Cairo SVG diagrams created with the Linux version of Dia, have a white box that always fills the entire background, but they unfortunately have the black border, around the entire SVG.

Yes, that was the main reason we opted to use that specific Dia version for Windows, which supports zero-width borders in Cairo SVG. Later version don't support these borders on Windows either, and IRC the problem is that that specific version of Dia is only available for Windows, and was skipped for Linux.

It's not a big problem because we have a white background in the GitBook anyway,

The fact that we're currently using a white BG document template for the HTML backend doesn't mean that others won't be using a differently coloured theme to build the book, or to show the diagrams (e.g. on a dark website). Separation of concerns between contents and styles is always preferable when possible, and in this case it makes sense that anything surrounding the diagrams should be transparent.

but does the box have any purpose? If not, we should remove the "erroneous" box from the diagrams.

We need the BG box for two reasons:

1. To enforce some padding around the diagrams.
2. Because some diagrams belong to a set where variations of a same repository state is shown in different steps, but not all images have the same width. Since SVGs dimensions are handled via percentage, we need to enforce a same width on all images of a same series, so they will:
   1. Be shown equally proportioned.
   2. Be properly centre-aligned in the document.

Without these outer boxes the diagrams will look strange (one bigger than the other) and without any padding around them, which will end up showing the diagram bottom text right on top of the image caption.

Unfortunately the default HTML themes for Asciidoctor are not too friendly to tweak. I didn't check them lately, but in the past they relied on a overtly complicated framework to work with. And, frankly, I don't really want to get into tweaking the CSS right now, but focus on the AsciiDoc contents, ensuring they are as much backend-agnostic as possible (which is why I thought that using SVG was a better choice over raster images).

[SicroAtGit]

Without these outer boxes the diagrams will look strange (one bigger than the other) and without any padding around them

I just removed the white box from the diagram docs_src/images/commit-graph.svg with Inkscape and then viewed docs_src/GitBook_Preview.html in Firefox. The diagram is still in the same position and has the same padding, which means that removing the box has no negative effect and the box is not the box responsible for centering the diagram correctly.

[tajmone]

But then diagrams of a same series with different widths will look out of proportion.

[tajmone]

Added Previewer

I've now added a Bash script to auto-generate a special HTML page to preview all generated SVGs against a checkered background in order to clearly see their outbox, transparency, etc. Need to run the script once to generate the page, or every time a new SBV is added to the folder (but no need to re-generate if rebuilding the SVGs, since it loads them from disk).

Now I'll start experimenting previews, by removing the SVGO optimization step, and see if that's the problem. Then I'll go over all the Dia sources again, to fix boxes, etc. Maybe not today, but I'll do some tests at least, to begin.

[tajmone]

Box Sixe Problem Solved

I've managed to discover why some background boxes are not being rendered in the correct size: it's because their top left angle is not aligned to coordinates 0.0. It looks like Dia (or the exporter) is buggy when handling negative coordinates.

So, now I'm re-aligning all the BG Boxes to 0.0, and the diagrams inside them. This solves one problem.

But you're right, the background is being painted white, even though it's set to be undrawn! I have no idea how to fix this. Let's just hope everyone uses white background for now, so we can have the diagrams aligned properly.

It doesn't look like SVGO had anything to do with either problem though, since I've tried rebuilding the diagrams by skipping the optimization part and the results are the same.

[tajmone]

Fixed

@SicroAtGit, I've polished all diagrams all over again. Quite a few needed re-aligning their BG box to 0:0, but for others I had already done that (not knowing it was so important). Now you can see in the dedicated HTML preview page that the background boxes are consistent with their diagram, and all in white.

I've removed quite a few empty text boxes and labels, which I believe were there due to cut and copy operations (i.e. pasting sample elements when starting a new diagram from scratch).

I only found one diagram which was using a generic font (Monospace), so I hope that there are none left now (most of them were actually empty labels).

So I'm closing this issue, for we should consider all diagrams polished now.

As for the transparency of the BG Box, I actually think that I was aware that it wouldn't be transparent in the final image, but since the border was not being shown I was happy with it. IRR, other export options and/or Dia version could preserve the BG transparency, but would paint its border in black, so I believe we ultimately settled with this arrangement. Anyhow, for now having a white BG is OK, in the future we'll see.

And ... YES WE NEED THE BG BOXES!!! If you look closely at the Rebase Images Group you'll remember why we need it with the SVG format, otherwise we can't control the proportions of similar images:

---

As you can see, these two comprise a series of before/after image, so they need to be same-width and same in-image alignment of the common elements — none of which can be achieved without a BG box with identical width in both images.

[SicroAtGit]

Very good work!

Anyhow, for now having a white BG is OK, in the future we'll see.

Yes, that's okay. I'll check tomorrow if there is already an issue created for it in the Dia repository. If not, I will create one.

YES WE NEED THE BG BOXES!!!

Sure, I didn't claim otherwise. Above I wrote that I assumed that the white box is another box, so not the box that is responsible for the correct centering. But obviously my quick test was not sufficient after I removed the white box.

[tajmone]

Sure, I didn't claim otherwise. Above I wrote that I assumed that the white box is another box, so not the box that is responsible for the correct centering. But obviously my quick test was not sufficient after I removed the white box.

😜 It's just that these diagrams have turned out into a nightmare. Sure, it was a great chance to learn more about Dia, but let's hope that now they're good.

[SicroAtGit]

Yes, I hope so too.

Bug reported in the Dia repository: Cairo SVG export: Transparent background is colored white

[tajmone]

Thanks. I guess the problem is due to an internal lack of support of transparent as a color value, so the don't draw BG directive probably only works in some output formats. IRC, Dia tries to stick to the basic SVG standard, in order to ensure that the generated images will be viewable on any tool that supports SVG.

The SVG standard is quite huge, and it's actually a set of different standards, not just one. So ensuring full support of all SVG features can be tricky.

E.g. yesterday I've experimented creating an executable eBook from the ALAN Manual, using a new Asciidoctor chunker tool that splits the single document into chapters. The eBook software uses the IE Trident engine (WebControl) to show HTML contents, so it has limited support for CSS3, HTML5 and SVG. But all the Dia SVG diagrams are showing correctly, because Dia sticks to SBG baseline standard.