Skip to content

Add support for SVG - #1995

Open
yurybubnov wants to merge 1 commit into
nextcloud:mainfrom
yurybubnov:svg-image-support
Open

Add support for SVG#1995
yurybubnov wants to merge 1 commit into
nextcloud:mainfrom
yurybubnov:svg-image-support

Conversation

@yurybubnov

Copy link
Copy Markdown

I use Notes as backend for Obsidian with Excalidraw and Ink plugins.
Both plugins export into SVG but Notes doesn't display SVG images, only show them as downloadable attachment.
This PR adds support to display SVG images.

Testes on my installation NextCloud 34.0.2

Assisted-by: ClaudeCode:opus-5

🤖 AI (if applicable)

  • The content of this PR was partly or fully generated using AI

Signed-off-by: Yury Bubnov <ybubnov@gmail.com>
@enjeck enjeck added the AI assisted This PR contains AI-assisted commits label Aug 29, 2026

@enjeck enjeck left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add screenshots/media showing this working

continue
}
try {
const response = await axios.get(url, { responseType: 'blob' })

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cache is only filled after the fetch completes, so two quick re renders can fetch the same SVG twice?

html: '',
md,
// attachment URL -> object URL of the retyped SVG blob
svgObjectUrls: {},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this reused across notes?

Comment on lines +77 to +80
mounted() {
// the initial onUpdate() runs before the DOM exists
this.hydrateSvgImages()
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need this if we have onUpdate ?

try {
const response = await axios.get(url, { responseType: 'blob' })
const blob = response.data
const objectUrl = URL.createObjectURL(blob.slice(0, blob.size, 'image/svg+xml'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this do same thing?

Suggested change
const objectUrl = URL.createObjectURL(blob.slice(0, blob.size, 'image/svg+xml'))
const objectUrl = URL.createObjectURL(new Blob([blob], { type: 'image/svg+xml' }))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI assisted This PR contains AI-assisted commits

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants