The color of the SVG is not visible in the PNG rendition

Question

The color of the SVG is not visible in the PNG rendition

I have applied a style to an svg image and successfully changed the fill color using a random colors function in JavaScript. However, when I convert the svg to a png format after making these color changes, the PNG file retains the original colors instead of the updated ones.

<style type="text/css">
:root{
    --back:#662D91;
    --shadow:0.28;
    --highlight:#F3B4AE;
    --stomach:#EA8A82;
    --lightHigh:#FEE9E5;
    --lasso:#9B5D12;
    --gloves:#29A6DE;--glovesStroke:#000674;--gloves2:#29A6DE;--gloves3:#1C7FC9;--gloves4:#1D7DC6;--gloves5:#1C7DC4;
    --hatBelow:#DB8556;
    --hatBelow2:#8A3C13;
    --hatInner:#8C4017;
    --hatInner2:#934A24;
    --hatInner3:#9D5C3A;
    --stripe:#8A7454;
    --stripeEnd:#382000;

}
    .st0{fill:var(--back);}
    .st1{opacity:var(--shadow);}
    .st2{fill:var(--highlight);}
    .st3{fill:var(--stomach);}
    .st4{fill:var(--lightHigh);}

    (other CSS styles omitted for brevity)
</style>

This is the style element within my svg that I am modifying with the following code:

  root.style.setProperty('--back',colors[0]);

The 'colors' variable contains an array of randomly generated colors created by a script embedded within the svg. Can someone please assist me with resolving this issue?

Here is how I am converting the svg to png:

<script>
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL||self.webkitURL||self;
var img = new Image();
var svg = new Blob([svgString],{type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function(){
ctx.drawImage(img,0,0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
DOMURL.revokeObjectURL(png);
};
img.src = url;
</script>

javascript html css svg colors

Answer 1

Answer №1

Upon further reflection, it became clear why the original approach didn't work as expected. The svg blob is limited to only include contents within the svg tag itself, meaning any CSS variables set on the html tag outside of it are not recognized. The styles defined with :root are scoped within the SVG, causing a disconnect when removed from the HTML context, leading :root to reference the svg tag instead.

The reason for this behavior remains ambiguous, but in cases involving canvas, CSS variables set on ancestor elements of the svg tag tend to be disregarded. To rectify this issue, one can apply inline styles directly to either the svg tag or its child elements.

Below is an adjusted version with a solution implemented. Disregard any modifications made to the JS code; it replicates the same functionality while setting the CSS variable on the svg tag rather than the html tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SVG thingy</title>
  </head>
  <body>
    <svg
      viewBox="0 0 10 10"
      xmlns="http://www.w3.org/2000/svg"
    >
      <style>
        :root {
          --color: red;
        }

        circle {
          fill: var(--color);
        }
      </style>

      <circle
        cx="5"
        cy="5"
        r="4"
      />
    </svg>

    <canvas></canvas>

    <div id="png-container"></div>

    <script>
      const root = document.documentElement; // html tag
      // root.style.setProperty('--color', 'black'); // Doesn't work

      const svgElement = document.querySelector('svg');
      svgElement.style.setProperty('--color', 'black'); // Works
      
      const svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
      const svgBlob = new Blob([svgElement.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
      const url = URL.createObjectURL(svgBlob);
      
      const canvasElement = document.querySelector('canvas');
      const ctx = canvasElement.getContext('2d');
      
      const img = new Image();
      img.src = url;
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        const png = canvasElement.toDataURL('image/png');
        document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
        URL.revokeObjectURL(png);
      };
    </script>
  </body>
</html>

Answer 2

Upon further reflection, it became clear why the original approach didn't work as expected. The svg blob is limited to only include contents within the svg tag itself, meaning any CSS variables set on the html tag outside of it are not recognized. The styles defined with :root are scoped within the SVG, causing a disconnect when removed from the HTML context, leading :root to reference the svg tag instead.

The reason for this behavior remains ambiguous, but in cases involving canvas, CSS variables set on ancestor elements of the svg tag tend to be disregarded. To rectify this issue, one can apply inline styles directly to either the svg tag or its child elements.

Below is an adjusted version with a solution implemented. Disregard any modifications made to the JS code; it replicates the same functionality while setting the CSS variable on the svg tag rather than the html tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SVG thingy</title>
  </head>
  <body>
    <svg
      viewBox="0 0 10 10"
      xmlns="http://www.w3.org/2000/svg"
    >
      <style>
        :root {
          --color: red;
        }

        circle {
          fill: var(--color);
        }
      </style>

      <circle
        cx="5"
        cy="5"
        r="4"
      />
    </svg>

    <canvas></canvas>

    <div id="png-container"></div>

    <script>
      const root = document.documentElement; // html tag
      // root.style.setProperty('--color', 'black'); // Doesn't work

      const svgElement = document.querySelector('svg');
      svgElement.style.setProperty('--color', 'black'); // Works
      
      const svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
      const svgBlob = new Blob([svgElement.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
      const url = URL.createObjectURL(svgBlob);
      
      const canvasElement = document.querySelector('canvas');
      const ctx = canvasElement.getContext('2d');
      
      const img = new Image();
      img.src = url;
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        const png = canvasElement.toDataURL('image/png');
        document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
        URL.revokeObjectURL(png);
      };
    </script>
  </body>
</html>

The color of the SVG is not visible in the PNG rendition

Answer №1

Similar questions

Using Thymeleaf to display <TR> elements according to specific conditions

Activate fullscreen mode in Krpano on desktop by clicking a button

The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

Using JSP to send variables from an external Javascript file

Choose a date range from the date picker

Using Event Delegation in Practice

Tips for sending an Ajax request to a separate URL on the same server

Wrapping is disabled for all elements within the container div that contains three additional div elements

Renaming the month in Material-UI React

Capturing Screenshots with Ionic Framework

Enhance the appearance of the standard black rectangle displaying the messages "No video source" or "No video permissions"

Assistance with jQuery in Javascript is needed

There seems to be a hiccup in the distribution build of Angular grunt, as it is unable to locate the

Razzle fails to initiate the server

"Enhance Your Highchart Experience by Adding Hyperlinks to Every Segment of Your Stacked Bar

Navigating through each element of an array individually by using the onClick function in React

Encountering this issue: Unable to access the property 'length' of an undefined variable

An error notification received from the command "jspm install jquery"

Creating a material texture with file api in three.js is a straightforward process

Implementing a confirmation dialog for POST requests in Flask