Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds gradient export to SVG library #929

Merged
merged 1 commit into from
Jan 21, 2025

Conversation

tracerstar
Copy link
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
Copy link
Collaborator

Stefterv commented Jan 20, 2025

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
Copy link
Contributor Author

tracerstar commented Jan 20, 2025

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.

Copy link
Collaborator

@Stefterv Stefterv left a comment

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
6 checks passed
@micycle1
Copy link

BIG

@SableRaf
Copy link
Collaborator

@all-contributors please add @tracerstar for code

Copy link
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