Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[p5.js 2.0+ Bug Report]: SVG importer does not respect preserveAspectRatio="none" for <symbol>/<use>

Open Beginner friendly
  • Is something wrong?
#9,257 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 2 days

@Danyccsf is already working on this.

Since Oct 8, 2026.

  • #9261 by @Danyccsf — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
83/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
computer-graphics

Research direction

Start with the <defs> and <use> elements suite in test/unit/svg/svg_import.js and run npm test -- test/unit/svg/svg_import.js to confirm the failure. Trace how the SVG importer handles preserveAspectRatio for a symbol referenced by <use>. Done means the regression test passes with horizontal transform 2 and vertical transform 1.

Written by the indexing model from the issue text.

Description

Area:Core p5.js 2.0+
Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.3.2

Web browser and version

No response

Operating system

macOS 15.7.3

Steps to reproduce this
Steps:
  1. Add the regression test below to the <defs> and <use> elements suite in test/unit/svg/svg_import.js.
  2. Run npm test -- test/unit/svg/svg_import.js.
  3. Observe that the test fails because node.state.transform.a is 1 instead of the expected 2.

The test uses a 100×100 <symbol> with preserveAspectRatio="none" inside a 200×100 <use> viewport. In this case, the expected transform is non-uniform scaling: 2× horizontally and 1× vertically.

I reproduced this on p5.js 2.3.2 (main at 7f9e0fda5). The SVG importer test suite reports 92 passing tests and this test failing with:

AssertionError: expected 1 to be close to 2 +/- 0.001

Snippet:
test('use respects preserveAspectRatio=none', function () {
  const record = createSVG(`
    <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <symbol id="stretch" viewBox="0 0 100 100" preserveAspectRatio="none">
          <rect x="0" y="0" width="100" height="100" />
        </symbol>
      </defs>
      <use href="#stretch" width="200" height="100" />
    </svg>
  `);

  const scope = firstChild(record);
  const node = scope.children[0];

  assert.closeTo(node.state.transform.a, 2, 0.001);
  assert.closeTo(node.state.transform.d, 1, 0.001);
});
Dominant language
JavaScript
Stars
24.1k
Forks
3.9k
Avg merge
3d 19h
Merged PRs (30d)
33

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from processing/p5.js

All issues in processing/p5.js

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.