# Makie / GLMakie: Plot image into an axis object

**URL:** <https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996>\
**Category:** General Usage\
**Tags:** makie, glmakie\
**Created:** [March 13, 2023, 11:08am UTC](https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996 "2023-03-13T11:08:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [March 13, 2023, 11:08am UTC](https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996/1 "2023-03-13T11:08:12Z")

</div>

Regarding the function [`image()`](https://docs.makie.org/stable/examples/plotting_functions/image/index.html#image) I have two questions

1. If I use `space=:pixel`, how can I get the current upper offset / padding?
2. Is it possible to plot a SVG-figure into a GLMakie-figure?

I had to struggle to understand the concept of the parameter `space` of the function `image() / image!()` and in the end the concept is now clear to me, below my snippet that should help others to get started with the `Makie`-function `image() / image!()`:

```julia
using GLMakie
using FileIO: load
# --- params:
case_nr = 5 # space options: #1 :data, #2 :pixel, #3 :relative, #4 :clip (top, left), #5 :clip (center, center) 
y_scale = 1.0
fig_width = 800
fig_hight = 600
x_offset = +0
y_offset = -80
x_img_frac = 0.1

# ---
img_ = load(assetpath("icon_transparent.png"));
# img_ = load(assetpath("icon_transparent.svg"));
aspect_ratio = size(img_)[1] / size(img_)[2]

# --- plot:
fig_ = Figure(resolution = (fig_width, fig_hight))
ax_ = Axis(fig_[1, 1])

x_vec = [0, 0.2, 0.4, 0.6, 0.8, 1] 
y_vec = y_scale .* x_vec
scatter!(ax_, x_vec, y_vec)

# --- space: ---
# --- space::Symbol = :data sets the transformation space for the position of the image. See Makie.spaces() for possible inputs.
# --- spaces() = (:data, :pixel, :relative, :clip)
if case_nr == 1
    Δx_img = x_img_frac * abs(x_vec[end] - x_vec[1])
    # image!(ax_, [x_vec[end] - Δx_img, x_vec[end]], [y_vec[1], y_vec[1] + aspect_ratio * Δx_img], img_, space = :data, overdraw = true, transparency = true)
    x_range = [x_vec[1], x_vec[1] + Δx_img]
    y_range = [y_vec[end] - aspect_ratio * Δx_img, y_vec[end]]
    @show x_range y_range
    image!(ax_, x_range, y_range, img_, space = :data, overdraw = true, transparency = true)
    ax_.title = "space = :data"
elseif case_nr == 2
    Δx_img = x_img_frac * fig_width
    x_range = x_offset .+ [0, Δx_img]
    y_range = y_offset .+ [fig_hight - aspect_ratio * Δx_img, fig_hight] 
    @show x_range y_range
    image!(ax_, x_range, y_range, img_, space = :pixel, overdraw = true, transparency = true)
    ax_.title = "space = :pixel"
elseif case_nr == 3
    image!(ax_, [0.0, 0.1], [0.9, 1.0], img_, space = :relative, overdraw = true, transparency = true)
    ax_.title = "space = :relative"
elseif case_nr == 4
    image!(ax_, [-1.0, -0.8], [0.8, 1.0], img_, space = :clip, overdraw = true, transparency = true)
    ax_.title = "space = :clip (top. left)"
elseif case_nr == 5
    image!(ax_, [-0.1, 0.1], [-0.1, 0.1], img_, space = :clip, overdraw = true, transparency = true)
    ax_.title = "space = :clip (center, center)"
else
    error("Case not defined!")
end

screen_ = display(fig_)

```

---

<div class="post-metadata">

**Author:** ![asinghvi17](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/asinghvi17/32/8272_2.png) [@asinghvi17](https://discourse.julialang.org/u/asinghvi17)\
**Post date:** [March 15, 2023, 8:15pm UTC](https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996/2 "2023-03-15T20:15:59Z")

</div>

1. if you mean the axis’s padding, `ax_.layoutobservables.computedbbox[]` gives you the axis rectangle in pixel space.
2. kind of, I had this at some point in MakieTeX but it’s not easy to do. I would make the SVG into a PNG and plot it that way, it’s easier all around.

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [March 15, 2023, 11:27pm UTC](https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996/3 "2023-03-15T23:27:56Z")

</div>

Thanks for the replay! - I have the impression that in my case 80 pixel is a good estimation for the top  
boarder, but this is not in agreement with the four numbers, that the variable `computedbbox[]` reports.

---

<div class="post-metadata">

**Author:** ![asinghvi17](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/asinghvi17/32/8272_2.png) [@asinghvi17](https://discourse.julialang.org/u/asinghvi17)\
**Post date:** [March 16, 2023, 10:43am UTC](https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996/4 "2023-03-16T10:43:57Z")

</div>

ah, you might also try `suggestedbbox` (which is the size of the layout cell) then.

It’s useful to note that the rectangle type which these bboxes are stored as is composed of origin and widths, not corners - use `maximum(bbox)` to get the top right corner.

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [March 16, 2023, 2:21pm UTC](https://discourse.julialang.org/t/makie-glmakie-plot-image-into-an-axis-object/95996/5 "2023-03-16T14:21:15Z")

</div>

> [@asinghvi17](#):
>
> you might also try `suggestedbbox`

I am lost, the result of `suggestedbbox` differs, first time the value is larger then in the 2nd statement:

```julia
using GLMakie
using FileIO: load
# --- params:
case_nr = 3 # space options: #1 :data, #2 :pixel, #3 :relative, #4 :clip (top, left), #5 :clip (center, center) 
y_scale = 1.0
fig_width = 800
fig_hight = 600
x_img_frac = 0.1

# --- plot:
fig_ = Figure(resolution = (fig_width, fig_hight))
ax_ = Axis(fig_[1, 1])
# --- scatter:
x_vec = collect(0:0.1:1) 
y_vec = y_scale .* x_vec
scatter!(ax_, x_vec, y_vec)
# --- image:
icon_ = load(assetpath("icon_transparent.png"));
aspect_ratio_icon = size(icon_)[1] / size(icon_)[2]
suggestedbbox_ = ax_.layoutobservables.suggestedbbox[]
y_top = suggestedbbox_.widths[2] 
Δx_img = x_img_frac * fig_width
x_range = [0, Δx_img]
y_range = [y_top - aspect_ratio_icon * Δx_img, y_top] 
@show y_top x_range y_range    
image!(ax_, x_range, y_range, icon_, space = :pixel, overdraw = true, transparency = true)
ax_.title = "space = :pixel"

# --- repetition:
suggestedbbox_ = ax_.layoutobservables.suggestedbbox[]
computedbbox_ = ax_.layoutobservables.computedbbox[]
@show suggestedbbox_.widths[2] computedbbox_.widths[2];

# --- display:
screen_ = display(fig_)

```