opencloud icon indicating copy to clipboard operation
opencloud copied to clipboard

[FR] SVG Preview

Open snoweuph opened this issue 3 months ago • 7 comments

Initial Checklist

  • [x] I understand this is a feature request and questions should be posted in the Community Discussions
  • [x] I searched issues and couldn’t find anything (or linked relevant results below)

User Story

As a user, I want the Web UI to support rich previews of SVG files so that I can easily view diagrams and graphics directly into without downloading them.

User Value

  • Quickly preview SVG diagrams directly in the browser
  • Enhance overall usability for teams working with vector graphics

Acceptance Criteria

  • Web UI shows an inline preview (thumbnail) of SVG files
  • Clicking an SVG opens a full-size, zoomable preview viewer

Not MVP but ... to talk about

  • Multipage SVGs (Inkscape format) are supported and can be navigated between pages within the preview

original Request

IT would be cool if the Web UI could show a preview of SVGs and when clicking also would show a fullsize Zoomable preview (for example great for diagrams that are svgs) Also would be important that for SVGs with a transparent background to have a toggle somehwer to set the background color for the preview, as dark on dark and light on light might be hard to read.

Also Inkscape supports Multipage SVGs - would be cool if that would be supported as well

snoweuph avatar Sep 05 '25 01:09 snoweuph

Transferring to the opencloud repo, since support for different mime types on the preview endpoint / thumbnail service is a backend thing... although your additional ideas for svg won't work then. The preview endpoint returns JPEG content, always. Still, supporting SVG at all would be a start.

@rhafer do you know if we can just enable support for SVG in libvips? Documentation reads like SVGs have special handling in libvips, so it would be more effort. Correct?

kulmann avatar Sep 05 '25 06:09 kulmann

The preview endpoint returns JPEG content, always. Still, supporting SVG at all would be a start.

Browsers support displaying SVGs natively, so wouldn't it be better to use this as an advantage and just include them with an img tag? a toggle for the background div having a specific color would also just be a simple thing in either js, or as a checkbox with a css rule on its state.

snoweuph avatar Sep 05 '25 09:09 snoweuph

The preview endpoint returns JPEG content, always. Still, supporting SVG at all would be a start.

Browsers support displaying SVGs natively, so wouldn't it be better to use this as an advantage and just include them with an img tag? a toggle for the background div having a specific color would also just be a simple thing in either js, or as a checkbox with a css rule on its state.

"it depends" 😅 we use more or less the same logic in the file list for thumbnails / tiles view for tile previews. We can't render svg there, because svg files can be quite large. We must rely on small image sizes for the listings. That's why we need the thumbnail service in the backend anyway - and using the preview endpoint (with a larger resolution) for the preview app then requires no code changes at all in the preview app.

On top of that we could offer a functionality in the preview app to load image files directly instead of using a (larger) preview from the thumbnail service, but that's a completely different story. Could even be solved separately. Effort <-> user-value ratio is higher solving it in the backend, so with quite limited people and a full roadmap I'd start with the backend solution.

kulmann avatar Sep 05 '25 12:09 kulmann

We can't render svg there, because svg files can be quite large Didnt think about that, after all, most of the time svgs are extremly small.

Effort <-> user-value ratio is higher solving it in the backend, so with quite limited people and a full roadmap I'd start with the backend solution.

Thats also a really good Point

snoweuph avatar Sep 05 '25 15:09 snoweuph

@rhafer do you know if we can just enable support for SVG in libvips? Documentation reads like SVGs have special handling in libvips, so it would be more effort. Correct?

That depends on how the libvips used in our base images is built (it requires libvips to be linked against librsvg AFAICS). We'd need to check that.

But also SVG is one of those formats that can embed Javascript code (similar to PDF) a feature which opens a bit of a can of worms in terms of security. So we need to carefully consider if and how we want to enable that.

rhafer avatar Sep 08 '25 08:09 rhafer

opens a bit of a can of worms in terms of security

Defnitly if implemented, should be Opt in. https://en.wikipedia.org/wiki/Secure_by_design

I personaly don't have any usecase for JS in SVGs or PDFs (only for CSS in SVGs -> prefered color scheme)

Though https://mujs.com/ and https://pkg.go.dev/cmd/cgo exist

though keeping this in mind:

Effort <-> user-value ratio is higher solving it in the backend, so with quite limited people and a full roadmap I'd start with the backend solution.

it might be better to leave embeded JS out for now, as it won't be something most people will need and it comes with a lot of effort to get right.

(maybe JS support is something for an extension/app)

snoweuph avatar Sep 08 '25 15:09 snoweuph

  • needs backend support

db-ot avatar Sep 12 '25 09:09 db-ot