Improvement of rendering continuous color key in SVG

[kimikage]

Due to the limited resolution of SVG of 0.01mm, rounding errors often cause "gaps". The gaps can occur everywhere, but are typically noticeable in continuous color keys, which are collections of small rectangles.

So, what about the following "ugly" discretization? (cf. render_continuous_color_key in "src/guide.jl")

function render_continuous_color_key(colors::Dict,
                                     labels::OrderedDict{Color, AbstractString},
                                     color_function::Function,
                                     title_context::Context,
                                     title_width::Measure,
                                     theme::Gadfly.Theme)

    entry_width, entry_height = max_text_extents(theme.key_label_font,
                                                 theme.key_label_font_size,
                                                 values(labels)...)

    numlabels = length(labels)
    numgrads = theme.key_color_gradations
    title_height = title_context.box.a[2]
    target_height = 1.5 * numlabels * entry_height + title_height
    swatch_height = round(target_height / numgrads / 0.02mm) * 0.02mm
    swatch_width = entry_height / 2
    total_height = swatch_height * numgrads
...

I also noticed that the SVG (SVGJS) backend did not show grid lines due to GiovineItalia/Compose.jl#386. The following explicit strokeopacity(1.0) is a workaround.

    # color bar
    compose!(ctx,
        (context(xoff, yoff + title_height,
                 1w, total_height, units=UnitBox()),
         rectangle([0], [1cy - i * swatch_height for i in 1:numgrads],
                   [swatch_width], [swatch_height]),
         #grid lines
         (context(),
          line([[(0, 1 - y), (swatch_width, 1 - y)] for y in values(colors)]),
          linewidth(theme.grid_line_width),
          stroke(colorant"white"), strokeopacity(1.0)),

         fill([color_function((i - 1) / (numgrads - 1)) for i in 1:numgrads]),
         stroke(nothing), fillopacity(theme.alphas[1]),
         svgattribute("shape-rendering", "crispEdges")))

[lobingera]

Afair SVG has no resolution limit. The gaps you see are impact of discretisation in the rendering process. In most cases this can be avoided by a small overlap of the rectangles

[kimikage]

It seems my explanation was not clear enough. The SVG format has no resolution limit. I mean Compose.jl's SVG (SVGJS) backend.
As you know, the overlapping is helpful but not suitable for transparent color bars.

[kimikage]

Of course, switching behaviors according to transparency is another option. For opaque color bars, stacking the swatches in a pyramidal manner will give good results even in non-vector formats such as PNG.

In any case, they are ad-hoc measure, so if the demand is low, I will close this issue.