Loading SVG files with advanced SVG features

Processing Coding Questions
1

Hi Guys! :grinning: :grinning:

How about this one: I’m trying to load certain advanced SVG features, such as gradients and CSS styles

For Example:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 531 531">
  <defs>
    <style>
      .cls-1 {
        fill: url(#radial-gradient);
        stroke-width: 0px;
      }
    </style>
    <radialGradient id="radial-gradient" cx="266.5" cy="266.5" fx="266.5" fy="266.5" r="257.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset=".08" stop-color="#dffbe9"/>
      <stop offset=".32" stop-color="#7ff1a9"/>
      <stop offset=".69" stop-color="#55dda5"/>
      <stop offset=".87" stop-color="#2ecba0"/>
      <stop offset="1" stop-color="#17c09e"/>
    </radialGradient>
  </defs>
  <path class="cls-1" d="M431.95,412.32c-23.09,17.34-48.12,30.83-76.03,37.2-9.13,2.22-18.29,3.56-27.68,4.21-32.94,2.93-65.33.14-95.37-13.08-32.44-14.33-59.73-39.55-77.23-70.35-9.98-20.08-16.42-42.51-16.34-64.56.23-24.85,5.75-51.29,22.08-70.77,8.32-10.26,19.71-19.69,31.12-26.87,15.45-9.3,34.95-13.63,52.49-9.89,13.04,2.68,23.21,9.66,30.23,19.94-12.85-10.25-30.23-15.1-46.03-14.04-34.44,2.51-60.44,31.34-71.43,62.09-13.44,36.44-2.46,77.39,19.56,107.74,23.21,32,60.09,51.69,98.44,57.03,76.09,10.85,142.13-27.02,179.81-92.41,30.15-50.55,36.08-114.47,15.91-169.6-10.01-29.33-24.93-57.35-45.38-80.74-39.82-46.6-99.54-72.71-159.6-79.2,93.48,22.34,161.34,78.57,184.18,173.86,7.11,28.53,6.86,58.96-.33,87.24-2.03,7.13-4.29,14.17-7.01,21.06-.94,2.11-3.17,7.33-4.09,9.39-1,1.9-3.64,7.17-4.66,9.12-26.6,47.69-70.21,83.07-126.62,83.78-43.73.65-85.65-18.86-103.78-57.39-12.11-23.98-12.69-50.37,4.1-71.87,4.08-5.32,9.33-10.45,15.31-13.38-5.44,4.44-10.05,9.97-13.4,16.19-11.2,21.46-6.73,46.33,5.07,66,30.22,52.65,101.96,58.35,149.24,26.17,14.06-10.52,26.61-21.56,37.62-35.79,35.19-45.31,37.84-111.37,14.02-162.29-13.48-30.05-36.24-55.84-62.91-74.75-17.6-12.75-37.02-23.22-57.94-29.26-33.46-9.83-69.09-9.12-102.92-2.42-69.22,13.25-128.61,62.65-160.43,124.54-4.6,9.11-8.68,18.27-12.13,28.01-5.89,19.84-6.82,39.7-10.82,59.27,6.38-18.62,9.49-38.86,17.14-56.87,31.94-66.49,96.31-120.27,170.43-129.87,38.61-5.2,79.69-1.92,113.73,18.09,23.23,13.89,44.46,32.27,59.26,54.91,19.14,29.41,27.27,65.71,20.03,100.03-4.67,25.29-17.68,46.23-38.44,62.8-3.43,2.84-7.46,5.9-10.97,8.43-15.75,9.83-35.77,14.14-53.84,10.07-12.44-2.71-22.71-9.24-29.84-18.91,7.94,6.21,17.62,10.6,27.49,12.56,28.97,4.58,56.2-8.94,73.64-31.66,28.88-37.42,26.18-88.87,2.41-127.98-9.34-14.45-20.48-26.36-33.77-36.74-39.14-29.65-91.58-38.07-138.44-25.73-39.67,10.56-77.98,37.49-100.82,71.27-28.17,42.7-43.97,93.43-37.47,144.44,5.05,39.35,20.29,77.49,43.78,109.43,41.68,55.8,104.57,87.33,173.18,93.23-51.65-11.39-96.24-32.99-132.63-71.77-21.77-22.99-38.1-50.84-47.63-81-13.97-41.77-14.92-88.04,2.99-128.81,12.46-30.35,30.03-57.68,57.02-76.21,27.25-19.44,60.42-29.83,93.6-25.78,21.99,2.3,43.43,10.2,60.74,23.91,20.72,16.5,34.97,41.86,34.58,68.46-.19,18.25-9.39,38.56-25.41,47.53.97-.87,1.92-1.77,2.73-2.63,16.56-16.42,19.15-40.78,11.27-61.39-1.87-5.33-5.31-11.76-7.99-16.77-29.69-53.01-100.54-57.98-147.8-26.47-24.3,16.53-45.92,38.85-57,66.67-17.53,44.48-13.69,96.93,7.74,139.13.48.94,1.34,2.85,1.89,3.76,1.18,2.19,2.84,5.57,4.24,7.59,13.81,21.93,31.92,41.5,53.06,56.47,44.52,32.58,99.73,41.31,153.29,32.66,52.23-6.62,99.39-36.36,133.44-75.67,33.72-37.92,55.01-86.62,59.37-137.18-12.24,58.55-45.3,109.88-92.05,145.82Z"/>
</svg>

As you may know or not know issue seems to be with how Processing handles certain advanced SVG features… So the color loads black instead of gradient. any ideas? :disguised_face: Have a good day ! [=

2

We solved it!

To solve the issue, we applied a fix that ensures the SVG’s color is overridden directly in the code. This approach involved iterating over all child shapes of the loaded SVG and setting their fill color to white. This method works around the limitation where Processing may not fully respect the SVG’s internal style definitions, especially if they are defined using <style> tags or if the SVG has certain formatting issues.

Here is the relevant part of the code that solved the issue:

void display() {
  pushMatrix();
  translate(x, y);
  rotate(rotation);
  shapeMode(CENTER);

  // Override the SVG's color with white
  for (int i = 0; i < img.getChildCount(); i++) {
    PShape child = img.getChild(i);
    child.setFill(color(255)); // Set fill color to white
  }

  shape(img, 0, 0, size, size); // Display the SVG shape
  popMatrix();
}

Explanation of the Solution:

  1. Push and Pop Matrix:
  • pushMatrix() and popMatrix() are used to save and restore the current transformation matrix, ensuring that the transformations (translation and rotation) only affect the rendering of the black hole.
  1. Translation and Rotation:
  • translate(x, y) moves the origin to the position of the black hole.
  • rotate(rotation) rotates the shape around this new origin.
  1. Shape Mode:
  • shapeMode(CENTER) sets the shape mode to CENTER, meaning the shape will be drawn centered around the coordinates provided (0, 0 in this case).
  1. Override SVG Color:
  • The loop for (int i = 0; i < img.getChildCount(); i++) iterates over all child elements of the SVG.
  • PShape child = img.getChild(i) retrieves each child element.
  • child.setFill(color(255)) sets the fill color of each child element to white (255 in grayscale).
  1. Display Shape:
  • shape(img, 0, 0, size, size) draws the SVG shape centered at the specified coordinates (0, 0) with the specified size.

By explicitly setting the fill color to white in the code, we ensure that the shape is rendered in white, regardless of any internal styles or attributes that may have been lost or ignored during the SVG file’s processing. This approach provides a straightforward solution to control the appearance of the SVG in the Processing sketch.

If you are still reading this, well, It’s important to mention we did end up using white color, because the gradient was a fail, so you know by chance how to load gradient too that will be great, Have a good day!