render SVG by p5.image should be change

Increasing Access

Unsure.
Might be included in the following details.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature enhancement details

Situation

1. load SVG by p5.loadImage()
2. render SVG through canvas by p5.image()
3. the resolution of the rendered SVG depends on the width and height of the SVG.

Example

<svg width="16" height="16">{svg-content}</svg> // first image

<svg width="256" height="256">{svg-content}</svg> // second image having same svg-content with the first one

p5.image(svgImage, x, y, width, height)

Although the content is the same, the rendered image of the second svg on canvas is much better.

Minimum working example

Solution

1. p5.js should not depend on the width, height, viewBox written in the SVG file.
2. Otherwise, give the programmatical approach to change the width, and height of the SVG-loaded Image object without making the resolution awful.

My prediction

• the first solution is easier to implement p5.js and use for non-programmers or SVG newbie
• the second solution is harder to implement and use, but more general solution for different use cases.

Similar cases found on the web

https://stackoverflow.com/questions/72368646/images-blur-with-resize-with-p5-js
https://www.reddit.com/r/p5js/comments/12e035e/images_render_as_blurry_on_p5_canvas/
https://github.com/processing/p5.js/issues/3274

:)

It might be a feature, not a bug.
It might be concerned with SVG, not p5.js itself.
However, if p5.js exists for lots of non-programmers, I wish better documentation or explanation.
I spend lots of time for solving this issue, I wish my content can help someone else :)

Start with the p5.loadImage() and p5.image() paths described in the issue, then reproduce the difference using the linked minimum working example and SVGs with 16×16 and 256×256 dimensions. Compare the rendered quality when the SVG content is identical; done should mean the chosen SVG-rendering behavior is implemented or documented clearly for resized images.