Can't rotate loaded SVG in p5js

Question

I'm trying to load an external SVG with

I'm using p5js-svg with p5js and for the most part I don't have any issues, but I'm stuck trying to rotate a loaded SVG. I'm working with both the last versions of pj5s and the library (p5js v1.4.1 and p5js-svg v1.3.3). Here is the code to reproduce:

function preload() {
  svgs = [
  loadSVG('/img/plantilla_01.svg'),
  loadSVG('/img/plantilla_02.svg'),
  loadSVG('/img/plantilla_03.svg')
]}

function setup() {
  createCanvas(windowWidth, windowHeight, SVG)
  noLoop()
  angleMode(DEGREES)
  imageMode(CENTER)
}

function draw() {
  let posX = 0
  let posY = 0
  let imagen
  for (let index = 0; index < 10; index++) {
    let giro = random(-90, 90)
    push()
      translate(width/2, height/2)
      rotate(giro)
      imagen = svgs[floor(random(0,3))]
      image(imagen, posX, posY, width/10, height/10)
      posX += width/10
      posY += height/10
    pop()
  }
  }

The loaded SVGs are Adobe Illustrator-produced, and there's no issue with loading and displaying them. Which can be the issue with the rotation?

Answer 1

I think there's a bug with transforms not being applied to image() with the SVG renderer and loadSVG() (and I see you've already raised an issue on github).

One workaround could be using loadImage() instead of loadSVG():

function preload() {
  svgs = [
  loadImage('/img/plantilla_01.svg'),
  loadImage('/img/plantilla_02.svg'),
  loadImage('/img/plantilla_03.svg')
]}

function setup() {
  createCanvas(windowWidth, windowHeight, SVG)
  noLoop()
  angleMode(DEGREES)
  imageMode(CENTER)
}

function draw() {
  let posX = 0
  let posY = 0
  let imagen
  for (let index = 0; index < 10; index++) {
    let giro = random(-90, 90)
    push()
      translate(width/2, height/2)
      rotate(giro)
      imagen = svgs[floor(random(0,3))]
      image(imagen, posX, posY, width/10, height/10)
      posX += width/10
      posY += height/10
    pop()
  }
}