feat(svg): add native p5.svg experimental feature module and contributor docs by VANSH3104 · Pull Request #9123 · processing/p5.js

VANSH3104 · 2026-09-02T09:00:41Z

Resolves #4630

Note: This work is related to GSoC 2026 development for native SVG support in p5.js.

Changes:

Native SVG Module (src/shape/svg/): Added core SVG export, import, and shape recording capabilities:
- svg_recorder.js: ShapeRecorder AST node graph (ScopeNode, ShapeNode, BackgroundNode, ClearNode, ImageNode) and TransformStack.
- svg_export.js: SVGExportAddon, SVGVisitor XML DOM renderer, and public APIs (createShape(), buildShape(), getSVG(), shape(), saveSVG()).
- svg_import.js: SVGImportAddon, path command parser (M, L, C, S, Q, A, Z), element converters, and public APIs (createSVG(), async loadSVG()).
- p5.svg.js: SVG module entry point combining export and import addons.
Core Addon Registration (src/app.js): Registered svg addon via p5.registerAddon(svg), bundling SVG capabilities directly into main lib/p5.js.
Experimental Warning System (src/core/experimental.js): Added 'p5.svg' message to experimentalMessages and wrapped public SVG prototype methods with markExperimental('p5.svg', p5) warning decorators.
Contributor Documentation (contributor_docs/p5.svg.md): Created contributor guide covering project goals, API ergonomics, technical architecture, and community guidelines.

PR Checklist

npm run lint passes
Inline reference is included / updated

…ibutor guide

…nterceptor

…nverters

…gister in src/app.js

p5-bot · 2026-09-02T09:01:34Z

Continuous Release

CDN link

https://raw.esm.sh/pr/p5@141d8e5/lib/p5.min.js

Published Packages

https://pkg.pr.new/p5@141d8e5

Commit hash: 141d8e5

Previous deployments

`ff5f532`

`ff8c36d`

This is an automated message.

VANSH3104 · 2026-09-02T09:05:32Z

@davepagurek I’ve added the code for this. Let me know what you think or if anything needs to be changed!

ksen0

Very exciting to see this! Added some high-level documentation comments. Non blocking

ksen0 · 2026-09-03T09:43:36Z

+
+# p5.svg Overview
+
+`p5.svg` is an experimental native vector graphics system provided in p5.js starting from version 2. It aims to bring resolution-independent vector rendering, SVG file importing, and SVG XML exporting directly into p5.js without requiring external third-party addons. It allows users to record 2D drawing operations using familiar p5 APIs (`rect`, `circle`, `path`, `fill`, `stroke`, `translate`, `rotate`, etc.) and convert them into scalable vector structures.


nitpick: from version 2.4

ksen0 · 2026-09-03T09:48:34Z

+
+`p5.svg` addresses several key goals:
+
+- **Resolution-Independent Vector Output**: Traditional canvas rendering in p5.js is raster (pixel) based. `p5.svg` enables artists, designers, and educators to generate scalable vector graphics suitable for high-DPI displays, print, pen plotters, CNC routers, laser cutters, and embroidery machines.


"p5.svg enables artists, designers, and educators to generate scalable vector graphics suitable for high-DPI displays, print, pen plotters, CNC routers, laser cutters, and embroidery machines." Feels like it should be in the opening paragraph?

ksen0 · 2026-09-03T09:50:14Z

+`p5.svg` addresses several key goals:
+
+- **Resolution-Independent Vector Output**: Traditional canvas rendering in p5.js is raster (pixel) based. `p5.svg` enables artists, designers, and educators to generate scalable vector graphics suitable for high-DPI displays, print, pen plotters, CNC routers, laser cutters, and embroidery machines.
+- **Familiar p5 Drawing Workflow**: Rather than introducing a complex vector editing paradigm, `p5.svg` hooks directly into the existing 2D drawing pipeline. You can record shapes using standard p5 drawing functions inside `createShape()` or `buildShape()`.


I think this phrasing should be simplified, eg not "Rather than introducing a complex vector editing paradigm, p5.svg hooks directly into the existing 2D drawing pipeline. You can record shapes using standard p5 drawing functions inside createShape() or buildShape()." but, "to create SVG output, the only thing you need to do differently is use crateshape and build shape. Inside these functions, use standard drawing API (rect, circle, path, fill, stroke, translate, rotate, etc.) as you usually would

ksen0 · 2026-09-03T09:51:43Z

+
+# p5.svg Overview
+
+`p5.svg` is an experimental native vector graphics system provided in p5.js starting from version 2. It aims to bring resolution-independent vector rendering, SVG file importing, and SVG XML exporting directly into p5.js without requiring external third-party addons. It allows users to record 2D drawing operations using familiar p5 APIs (`rect`, `circle`, `path`, `fill`, `stroke`, `translate`, `rotate`, etc.) and convert them into scalable vector structures.


I think this paragraph should use very simple terms, nothing significantly technical (ie not "resolution-independent")

ksen0 · 2026-09-03T10:01:22Z

+
+The main ways you can help develop `p5.svg` are:
+
+- **API Ergonomics & Shape API**: Test vector shape recording and rendering functions like `createSVG()`, `loadSVG()`, `buildShape()`, `createShape()`, `shape()`, `getSVG()`, and `saveSVG()`. Share feedback on `shape()` playback, coordinate bounds, positioning, scaling options, and alignment modes (`CORNER`, `CENTER`, `VIEWBOX`).


This section could be just "Shape API". I do not recommend the phrase "ergonomics," because in general API ergonomics does not imply a focus on learning and beginners as a user group, which is a specific focus in p5.js (part of access statement that relates to this feature)

In this case, in the whole feedback section, maybe it is useful top provide a bit more context on what the priorities are: maintaining familiarity with rest of p5.js; creating non-OOP, top-level, readable function calls to allow smooth svg recording / loading. The question is not ergonomics generally but: "how does this feel as a beginner?" or "if you teach with p5.js, do you see API choices that would be tricky for students?"

That's still quite broad, but for example, feedback like "I think this should be more compact / more OOP" would not really be relevant/applicable.

Just a general feedback, please feel free to implement as much as it makes sense

ksen0 · 2026-09-03T10:01:44Z

 import strands from './strands/p5.strands';
 p5.registerAddon(strands);
+import svg from './shape/svg/p5.svg';
+p5.registerAddon(svg);


VANSH3104 and others added 6 commits September 2, 2026 13:59

docs(experimental): add p5.svg experimental warning message and contr…

2323cc4

…ibutor guide

feat(svg): add ShapeRecorder AST node hierarchy and transform stack i…

e9bf36e

…nterceptor

feat(svg): add SVGExportAddon and SVGVisitor renderer implementation

dfa6255

feat(svg): add SVGImportAddon, path command tokenizer, and element co…

e8e0eac

…nverters

feat(svg): add p5.svg entry point with experimental decorators and re…

ff8c36d

…gister in src/app.js

Merge branch 'main' into feat/svg-integration

ff5f532

Merge branch 'main' into feat/svg-integration

141d8e5

ksen0 reviewed Sep 3, 2026

View reviewed changes

Navigation Menu

Uh oh!

Uh oh!

feat(svg): add native p5.svg experimental feature module and contributor docs - #9123

feat(svg): add native p5.svg experimental feature module and contributor docs#9123
VANSH3104 wants to merge 7 commits into
processing:mainfrom
VANSH3104:feat/svg-integration

VANSH3104 commented Sep 2, 2026

Uh oh!

p5-bot Bot commented Sep 2, 2026 •

edited

Loading

`ff5f532`

`ff8c36d`

Uh oh!

VANSH3104 commented Sep 2, 2026

Uh oh!

ksen0 left a comment

Uh oh!

ksen0 Sep 3, 2026

Uh oh!

ksen0 Sep 3, 2026

Uh oh!

ksen0 Sep 3, 2026

Uh oh!

ksen0 Sep 3, 2026

Uh oh!

ksen0 Sep 3, 2026

Uh oh!

ksen0 Sep 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		# p5.svg Overview

		`p5.svg` is an experimental native vector graphics system provided in p5.js starting from version 2. It aims to bring resolution-independent vector rendering, SVG file importing, and SVG XML exporting directly into p5.js without requiring external third-party addons. It allows users to record 2D drawing operations using familiar p5 APIs (`rect`, `circle`, `path`, `fill`, `stroke`, `translate`, `rotate`, etc.) and convert them into scalable vector structures.


		`p5.svg` addresses several key goals:

		- Resolution-Independent Vector Output: Traditional canvas rendering in p5.js is raster (pixel) based. `p5.svg` enables artists, designers, and educators to generate scalable vector graphics suitable for high-DPI displays, print, pen plotters, CNC routers, laser cutters, and embroidery machines.


		The main ways you can help develop `p5.svg` are:

		- API Ergonomics & Shape API: Test vector shape recording and rendering functions like `createSVG()`, `loadSVG()`, `buildShape()`, `createShape()`, `shape()`, `getSVG()`, and `saveSVG()`. Share feedback on `shape()` playback, coordinate bounds, positioning, scaling options, and alignment modes (`CORNER`, `CENTER`, `VIEWBOX`).

Uh oh!

Uh oh!

Conversation

VANSH3104 commented Sep 2, 2026

Changes:

PR Checklist

Uh oh!

p5-bot Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Continuous Release

CDN link

Published Packages

Uh oh!

VANSH3104 commented Sep 2, 2026

Uh oh!

ksen0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

p5-bot Bot commented Sep 2, 2026 •

edited

Loading