Skip to content

Adds gradient export to SVG library - #929

Merged
Stefterv merged 1 commit into
processing:mainfrom
tracerstar:svg-gradient
Jan 21, 2025
Merged

Adds gradient export to SVG library#929
Stefterv merged 1 commit into
processing:mainfrom
tracerstar:svg-gradient

Conversation

@tracerstar

Copy link
Copy Markdown
Contributor

Adding an extension handler to the SVG library to allow linear and radial gradients to export correctly as SVG (currently they export as solid black fills).

The extension handler is a copy of https://gist.github.com/msteiger/4509119 by Martin Steiger with minor changes for Processing.

Several classes and methods in PShapeSVG and PShapeJava2D have been made public or modified to support the export of gradients.

Current SVG export of gradients results in fill:none on the shapes, leaving everything filled black. This adds gradients into the export handler, allowing fill:url(#gradientID) to work as expected.

I originally made this pull request in August 2023 against the old processing4 repo, but I saw that git activity had recently started up again so wanted to make a new PR.

…dial gradients to export as SVG

The extension handler is a copy of https://gist.github.com/msteiger/4509119 by Martin Steiger with minor changes for Processing
Several classes and methods in PShapeSVG and PShapeJava2D have been made public or modified to support the export of gradients
@Stefterv
Stefterv self-requested a review January 19, 2025 22:23
@Stefterv

Stefterv commented Jan 20, 2025

Copy link
Copy Markdown
Member

Hi @tracerstar, thank you for this PR! Could you provide an example on how this new functionality would be used?

I'd like to test the functionality you wrote, other than that it looks good!

@tracerstar

tracerstar commented Jan 20, 2025

Copy link
Copy Markdown
Contributor Author

Sure thing. A simple sketch like below will demonstrate the export:

import processing.svg.*;

PShape myShape;
boolean canRecord;

void setup() {
	size(1000, 1000);
	background(255);
	canRecord = false;
	myShape = loadShape("test.svg");
}

void draw() {

	if (canRecord) {
		beginRecord(SVG, "frame-####.svg");
	}

	background(255);
	shape(myShape, 0, 0);

	if (canRecord) {
		endRecord();
		canRecord = false;
	}

}

void keyPressed() {
	if (key == ' ') {
		canRecord = true;
	}
}

The SVG file is attached here:
test

This is primarily to fix gradient exports in the SVG library. If you test the attached file currently, everything will be filled in black. The code I added will allow the exported SVGs to have gradients in the export.

I need to do some additional testing to see if I can add gradient fills to PShape objects dynamically and have them export too, but for SVGs that are imported with gradients and then exported, this code works.

@Stefterv Stefterv left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, tested on macOS arm64 and works as expected!

@SableRaf
SableRaf self-requested a review January 21, 2025 17:00
@Stefterv
Stefterv merged commit b024526 into processing:main Jan 21, 2025
@micycle1

Copy link
Copy Markdown

BIG

@SableRaf

Copy link
Copy Markdown
Collaborator

@all-contributors please add @tracerstar for code

@allcontributors

Copy link
Copy Markdown
Contributor

@SableRaf

I've put up a pull request to add @tracerstar! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants