# SVG image doesn't work

**URL:** <https://discourse.processing.org/t/svg-image-doesnt-work/32115>\
**Category:** p5.js\
**Created:** [September 6, 2021, 6:55am UTC](https://discourse.processing.org/t/svg-image-doesnt-work/32115 "2021-09-06T06:55:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quorum](https://avatars.discourse-cdn.com/v4/letter/q/ad7895/32.png) [@Quorum](https://discourse.processing.org/u/Quorum)\
**Post date:** [September 6, 2021, 6:55am UTC](https://discourse.processing.org/t/svg-image-doesnt-work/32115/1 "2021-09-06T06:55:36Z")

</div>

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

```auto
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?

```auto
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

```auto
    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](https://stackoverflow.com/questions/46880175/changing-the-fill-of-an-svg-image-in-p5-js)  
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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 18, 2021, 8:42pm UTC](https://discourse.processing.org/t/svg-image-doesnt-work/32115/2 "2021-09-18T20:42:06Z")

</div>

> [@Quorum](#):
>
> and tried replacing loadimages with loadsvg, but doing so doesn’t load the grid.

Try looking up methods in the reference or examples on [p5js.org](http://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()](https://p5js.org/reference/#/p5/loadImage).

Here is an example of loading an svg:

> **[p5.js Web Editor](https://editor.p5js.org/lmccart/sketches/ry7Yfwbgg)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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.

> [@Quorum](#):
>
> I am trying to use SVG images so that they take a random color from the URL constant, but they do not color.

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.