I have script like this, it uses svg file.

import exclamationSolid from "../images/exclamation-solid.svg";


const canvas = document.getElementById("canvas");
const ctx    = canvas.getContext("2d");
const img    = new Image();
      img.src    = exclamationSolid;
      img.onload = function(){
        ctx.drawImage(img,0,0,12, 50);
      }

It shows the image correctly but, I would like to change the color of this and edging if possible.

How can I handle svg image on canvas?

I have script like this, it uses svg file.

import exclamationSolid from "../images/exclamation-solid.svg";


const canvas = document.getElementById("canvas");
const ctx    = canvas.getContext("2d");
const img    = new Image();
      img.src    = exclamationSolid;
      img.onload = function(){
        ctx.drawImage(img,0,0,12, 50);
      }

It shows the image correctly but, I would like to change the color of this and edging if possible.

How can I handle svg image on canvas?

• html
• svg
• canvas
• drawimage

• Color of what element (or background)? Why do you need to change it? Is the new color static, or it should be variable? Is static, why not change it in SVG source? Is the element to change color always the same? If the same, you can use CSS of the HTML hosting the canvas. – Sergey A Kryukov Commented Feb 7 at 14:12
• You may try to use Path2D. This will draw the SVG shape, and you can use the fillStyle you like. – enxaneta Commented Feb 7 at 16:24

1 Answer 1

A "proper" way to do this is to parse the file into a DOM (DOMParser) and then manipulate the DOM using API (like here, just querySelector() and setAtrribute()). After changing the DOM you need a data URI that you can use as a source for the image. This can be done using a File object object and a FileReader.

Notice that the event listener for the load event on the filereader is defined before the file is parsed to the reader (readAsDataURL). And the same for the image -- first define the event listener and then assign the src to the image.

const svgStr = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100"><circle fill="orange" cx="50" cy="50" r="50" /></svg>';

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// parse and change something
let parser = new DOMParser();
let svgDoc = parser.parseFromString(svgStr, "image/svg+xml");
svgDoc.querySelector('circle').setAttribute('fill', 'darkgreen');

// serialize to a string
let svgData = new XMLSerializer().serializeToString(svgDoc);

// create a File object
let file = new File([svgData], 'svg.svg', {
  type: "image/svg+xml"
});

// and a reader
let reader = new FileReader();

reader.addEventListener('load', e => {
  let img = new Image();
  // wait for it to got load
  img.addEventListener('load', e => {
    // update canvas with new image
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(e.target, 0, 0);
  });
  img.src = e.target.result;
});
// read the file as a data URL
reader.readAsDataURL(file);

<canvas id="canvas" width="200" height="200"></canvas>