# Colour Bar for heatmap does not render for SVG

**URL:** https://discourse.julialang.org/t/colour-bar-for-heatmap-does-not-render-for-svg/114039
**Category:** Visualization
**Tags:** makie, cairomakie
**Created:** [May 9, 2024, 7:56am UTC](https://discourse.julialang.org/t/colour-bar-for-heatmap-does-not-render-for-svg/114039 "2024-05-09T07:56:39Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![xztt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/xztt/32/33843_2.png) [@xztt](https://discourse.julialang.org/u/xztt)
#### Post date: [May 9, 2024, 7:56am UTC](https://discourse.julialang.org/t/colour-bar-for-heatmap-does-not-render-for-svg/114039/1 "2024-05-09T07:56:39Z")

</div>

When rendering a heatmap with a colour bar as a PNG this displays perfectly

 ![image](https://global.discourse-cdn.com/julialang/original/3X/1/e/1e0059b02b32fee12cb2d16ae360faa0d2904363.png)

However when I render as an svg the colour bar goes black. Image and MWE below  
 ![image](https://global.discourse-cdn.com/julialang/original/3X/7/6/760a4852bb70898ba64b264a712cb6b0011f2bcd.png)

```julia
using CairoMakie
a = rand(10,10)
f = Figure();
ax = Axis(f[1,1])
hm = CairoMakie.heatmap!(ax,a)
Colorbar(f[:, end+1], hm)   
f

# Render as SVG 
CairoMakie.activate!(type = "svg")
f

```

---

<div class="post-metadata">

### Author: ![ederag](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ederag/32/4106_2.png) [@ederag](https://discourse.julialang.org/u/ederag)
#### Post date: [May 9, 2024, 9:04am UTC](https://discourse.julialang.org/t/colour-bar-for-heatmap-does-not-render-for-svg/114039/2 "2024-05-09T09:04:15Z")

</div>

Partially confirmed in Pluto ( **not** from the REPL), and firefox.  
Except here the svg image is just black.

A direct `save("try.svg", f)` is weird as well (black in firefox/libreoffice, blurry in inkscape).  
This looks like [this comment](https://github.com/MakieOrg/Makie.jl/issues/3016#issuecomment-2069698642).

---

<div class="post-metadata">

### Author: ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)
#### Post date: [May 9, 2024, 9:22am UTC](https://discourse.julialang.org/t/colour-bar-for-heatmap-does-not-render-for-svg/114039/3 "2024-05-09T09:22:25Z")

</div>

I suspect it’s that the colorbar is a 1-pixel wide image. Somebody could try and see if that’s actually the problem, if so there would be several options for workarounds

---

<div class="post-metadata">

### Author: ![ederag](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ederag/32/4106_2.png) [@ederag](https://discourse.julialang.org/u/ederag)
#### Post date: [May 9, 2024, 10:04am UTC](https://discourse.julialang.org/t/colour-bar-for-heatmap-does-not-render-for-svg/114039/4 "2024-05-09T10:04:23Z")

</div>

> I suspect it’s that the colorbar is a 1-pixel wide image

I saw your comment above after writing [this comment](https://github.com/MakieOrg/Makie.jl/issues/3016#issuecomment-2102331234),  
which adds some support to your analysis.

What do you mean by “try and see if that’s actually the problem” ?  
I’d be glad to help, but know close to nothing about svg.

It might be trickier though, as [this comment](https://bugs.documentfoundation.org/show_bug.cgi?id=151618#c9) says

> Or in other words: It’s not a SVG gradient at all, it’s a encoded PNG used as pattern fill - bitmap data.