render SVG by p5.image should be change

[JeukHwang]

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/
#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 :)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[Qianqianye]

Thanks @JeukHwang for bringing up this issue. I'm invite the p5.js Image stewards to this discussion @GusBusDraws, @albertomancia, @ramya202000, @hannahvy, @robin-haxx, and please feel free to share your comments or questions. Thank you!

[davepagurek]

We also have some prior discussion here, for extra context: #5779

[JeukHwang]

We also have some prior discussion here, for extra context: #5779

Thank you for providing more resources.

[lakshz]

Is this issue open? I want to work on this

[JeukHwang]

@LakshyaSatpal I don't think this has been resolved yet.

Personally, I found svgo which can optimize SVG files.
It seems to be able to convert SVG files into standard formats, which makes it much easier for me to handle SVG files from other sources, so I can rely less on this issue.

But I think it's still an important issue! Thanks for your attention :)