Is it possible to mirror an imported svg in cetz?

Questions
, ,
1

Hello,
I am drawing an image using cetz. There I also import some external svgs (e.g. this one) which I would like to mirror (not rotate!).

My attempts so far:

#import "@preview/cetz:0.4.2"

// Normal usage of scale to mirror svg outside of cetz
*Svg mirroring in typst works*
#scale(x: -100%, image("clker-free-vector-images-airplane-309386.svg", width: 1cm))

*cetz*
#cetz.canvas({
  import cetz.draw: *

  content((0,0), [Normal embedding works ✅])
  content((rel: (0, -1)), image("clker-free-vector-images-airplane-309386.svg", height: 1cm))

  // Rotating works
  content((rel: (0, -2)), [Rotating works ✅])
  content((rel: (0, -1)), angle: 20deg, image("clker-free-vector-images-airplane-309386.svg", height: 1cm))

  // Mirroring not
  content((rel: (0, -2)), [Mirroring not ❌])
  // > As I interpret https://cetz-package.github.io/docs/api/draw-functions/transformations/scale/
  scale(x: -100%)
  content((rel: (0, -1)), image("clker-free-vector-images-airplane-309386.svg", height: 1cm))
  // > Other methods I tried
  content((rel: (0, -1)), scale: (x: -100%), image("clker-free-vector-images-airplane-309386.svg", height: 1cm))
  content((rel: (0, -1)), scale: (x: -100%, y: 100%), image("clker-free-vector-images-airplane-309386.svg", height: 1cm))
  // content((rel: (0, -1)), scale(x: -100%)[#image("clker-free-vector-images-airplane-309386.svg", height: 1cm)]) // Not working at all (wrnog usage of scale as far as I understand it)
})

Output

image
image525×812 34.3 KB

Is this just not possible in cetz, do you have other hints, am I just doing it wrong?

2

Hello. I don’t know if the CeTZ’s scale supposed to work or not, but Typst’s scale works as expected.

#import "@preview/cetz:0.4.2"

#let airplane = image.with("clker-free-vector-images-airplane-309386.svg")
#scale(x: -100%, airplane(width: 1cm))
#cetz.canvas({
  import cetz.draw: *
  content((rel: (0, -1)), airplane(height: 1cm))
  content((rel: (0, -1)), angle: 20deg, airplane(height: 1cm))
  content((rel: (0, -1)), std.scale(x: -100%, airplane(height: 1cm)))
})

image

1 Like
3

Thanks. I also found the reason in my original question with the help of a colleague.

The issue is the import cetz.draw: * in which the typst scale funtion is shadowed.

#import "@preview/cetz:0.4.2"

#cetz.canvas({
  import cetz.draw: content

  content((0,0), [Normal embedding works ✅])
  content((rel: (0, -1)), image("clker-free-vector-images-airplane-309386.svg", height: 1cm))

  // Rotating works
  content((rel: (0, -2)), [Rotating works ✅])
  content((rel: (0, -1)), angle: 20deg, image("clker-free-vector-images-airplane-309386.svg", height: 1cm))

  // Mirroring works
  content((rel: (0, -2)), [Mirroring works ✅])
  content((rel: (0, -1)), scale(x: -100%, image("clker-free-vector-images-airplane-309386.svg", height: 1cm)))

})
1 Like
4

On top, you can also always use built-in names that are shadowed by other definitions through the std namespace: like std.scale.

2 Likes
5

Amazing. Thanks for the hint. :blush: