SVG image doesn't work

p5.js
1

I created a grid where the squares have a color assigned by the URL constant.

const URL  = [
  "https://coolors.co/283d3b-197278-edddd4-c44536-772e25"
];

Inside the squares I place individual images.
In two squares I am trying to use SVG images so that they take a random color from the URL constant, but they do not color.

I haven’t found any reference about SVGs. This is my code.
This is my code. Why doesn’t work?

function preload() {
  fontRegular = loadFont('data/Regular.ttf');
  fontSemiBold = loadFont('data/SemiBold.ttf');
  fontBold = loadFont('data/Bold.ttf');
  dettagli[0] = loadImage('data/circle.svg');
  dettagli[1] = loadImage('data/base.svg');
  dettagli[2] = loadImage('data/l1.png');
  dettagli[3] = loadImage('data/l2.png');
  dettagli[4] = loadImage('data/l3.png');
}

With this on draw that works with PNG

    image(dettagli[1], -s/2, -s/2, s*2, s*2);

I found this Changing the fill of an SVG image in P5.js - Stack Overflow
and tried replacing loadimages with loadsvg, but doing so doesn’t load the grid.
And I didn’t assign the pathattribute because I didn’t understand it.

2

Try looking up methods in the reference or examples on p5js.org. You will see that this is no “loadsvg”. However, I see why this was hard – SVG isn’t listed in the reference, either. What you want is loadImage().

Here is an example of loading an svg:

However: some svg images do not work. p5.js loadImages has only partial SVG support (the SVG spec is enormous, with tons of features, some of which aren’t supported).

If you have a complex SVG that cannot be viewed, you can try making a simpler version of it / recreating it, or you can try using the HTML DOM to display the SVG in the browser as a separate layer on top of the canvas, not draw it on the canvas. But it sounds like you want to draw it on the canvas.

I didn’t understand this part of your question. The rest and your code example sounds like you are having a hard time loading your SVG images – they don’t work – but this sounds like you can display them and are trying to tint them? Or they are line drawings and you want to change the line color? More information needed, and a code example, not a fragment.

1 Like