[PR #3452] [CLOSED] SVG Image and Drawing Support

## 📋 Pull Request Information **Original PR:** https://github.com/BookStackApp/BookStack/pull/3452 **Author:** [@ssddanbrown](https://github.com/ssddanbrown) **Created:** 5/22/2022 **Status:** ❌ Closed **Base:** `development` ← **Head:** `svg_image` --- ### 📝 Commits (8) - [`c9aa1c9`](https://github.com/BookStackApp/BookStack/commit/c9aa1c979f7689aea6bae6ad7c2f2b75f45f4c0e) Added SVG support to the image gallery. - [`b69722c`](https://github.com/BookStackApp/BookStack/commit/b69722c3b5aa0c64f46c97f4ba6e4532387e711b) Fixed issue caused by changing test method defaults - [`d926ca5`](https://github.com/BookStackApp/BookStack/commit/d926ca5f71314c40058932ac7886c5fe9e2c8a6b) Updated draw.io code to support SVGs as primary data type - [`5fd8e7e`](https://github.com/BookStackApp/BookStack/commit/5fd8e7e0e98d97337daadc18ebe88c6f28b0c18c) Updated drawio tinymce plugin to use embeds - [`641a26c`](https://github.com/BookStackApp/BookStack/commit/641a26cdf7bcf68bae7dc38597dd539d19bf5ee7) Updated markdown editor to use svg drawio images - [`1d1186c`](https://github.com/BookStackApp/BookStack/commit/1d1186c901d200011183fa3eadd8636005884f53) Replaced markdown preview display iframe with div - [`05f8034`](https://github.com/BookStackApp/BookStack/commit/05f8034439e528fad272ab46e3698e998fa01cf1) Added embed support for contained HTML exports - [`bf0ba9f`](https://github.com/BookStackApp/BookStack/commit/bf0ba9f756fca20d2457832e8d8adca3a2be785e) Replaced embeds with images in exports ### 📊 Changes **17 files changed** (+220 additions, -128 deletions) <details> <summary>View changed files</summary> 📝 `app/Entities/Tools/ExportFormatter.php` (+9 -9) 📝 `app/Http/Controllers/Controller.php` (+1 -1) 📝 `app/Http/Controllers/Images/DrawioImageController.php` (+4 -1) 📝 `app/Uploads/ImageRepo.php` (+2 -1) 📝 `app/Uploads/ImageService.php` (+11 -3) 📝 `resources/js/components/markdown-editor.js` (+27 -62) 📝 `resources/js/components/page-editor.js` (+1 -1) 📝 `resources/js/services/drawio.js` (+17 -3) 📝 `resources/js/wysiwyg/plugin-drawio.js` (+39 -22) 📝 `resources/sass/_forms.scss` (+7 -13) 📝 `resources/sass/_tinymce.scss` (+5 -0) 📝 `resources/views/pages/parts/markdown-editor.blade.php` (+5 -1) 📝 `tests/Entity/ExportTest.php` (+18 -0) 📝 `tests/Uploads/DrawioTest.php` (+48 -4) 📝 `tests/Uploads/ImageTest.php` (+17 -0) 📝 `tests/Uploads/UsesImages.php` (+6 -7) ➕ `tests/test-data/diagram.svg` (+3 -0) </details> ### 📄 Description The main intent of this PR is to support SVG images and use SVG-based drawings. This PR will explore integrating drawings through the use of `<embed>` tags to allow interactivity. Related to #1103 and #1170 ### TODO - [x] Support SVG for the standard image gallery. - [x] Support SVG format for drawings and make it the default. - [ ] Update drawing editor logic to use embed tags. - [x] WYSIWYG editor support. - [x] Markdown editor support. - [ ] Handle embeds for contained HTML exports. - [ ] Handle embeds for PDF exports. - [ ] Testing - [ ] Ensure old PNG drawings work for all editor functionality. - [ ] Ensure SVG images are handled/display in exports. ### Docs Update Potentially breaking change: The `displayEl` of the `editor-markdown::setup` editor event will now no longer be an iframe, but instead the direct parent wrapper of markdown preview content. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

OVERLORD commented

2026-02-05 10:26:40 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/BookStackApp/BookStack/pull/3452
Author: @ssddanbrown
Created: 5/22/2022
Status: ❌ Closed

Base: development ← Head: svg_image

📝 Commits (8)

c9aa1c9 Added SVG support to the image gallery.
b69722c Fixed issue caused by changing test method defaults
d926ca5 Updated draw.io code to support SVGs as primary data type
5fd8e7e Updated drawio tinymce plugin to use embeds
641a26c Updated markdown editor to use svg drawio images
1d1186c Replaced markdown preview display iframe with div
05f8034 Added embed support for contained HTML exports
bf0ba9f Replaced embeds with images in exports

📊 Changes

17 files changed (+220 additions, -128 deletions)

View changed files

📝 app/Entities/Tools/ExportFormatter.php (+9 -9)
📝 app/Http/Controllers/Controller.php (+1 -1)
📝 app/Http/Controllers/Images/DrawioImageController.php (+4 -1)
📝 app/Uploads/ImageRepo.php (+2 -1)
📝 app/Uploads/ImageService.php (+11 -3)
📝 resources/js/components/markdown-editor.js (+27 -62)
📝 resources/js/components/page-editor.js (+1 -1)
📝 resources/js/services/drawio.js (+17 -3)
📝 resources/js/wysiwyg/plugin-drawio.js (+39 -22)
📝 resources/sass/_forms.scss (+7 -13)
📝 resources/sass/_tinymce.scss (+5 -0)
📝 resources/views/pages/parts/markdown-editor.blade.php (+5 -1)
📝 tests/Entity/ExportTest.php (+18 -0)
📝 tests/Uploads/DrawioTest.php (+48 -4)
📝 tests/Uploads/ImageTest.php (+17 -0)
📝 tests/Uploads/UsesImages.php (+6 -7)
➕ tests/test-data/diagram.svg (+3 -0)

📄 Description

The main intent of this PR is to support SVG images and use SVG-based drawings.
This PR will explore integrating drawings through the use of <embed> tags to allow interactivity.

Related to #1103 and #1170

TODO

Support SVG for the standard image gallery.
Support SVG format for drawings and make it the default.
Update drawing editor logic to use embed tags.
- WYSIWYG editor support.
- Markdown editor support.
- Handle embeds for contained HTML exports.
- Handle embeds for PDF exports.
Testing
- Ensure old PNG drawings work for all editor functionality.
- Ensure SVG images are handled/display in exports.

Docs Update

Potentially breaking change: The displayEl of the editor-markdown::setup editor event will now no longer be an iframe, but instead the direct parent wrapper of markdown preview content.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

OVERLORD added the pull-request label 2026-02-05 10:26:40 +03:00

OVERLORD closed this issue

2026-02-05 10:26:44 +03:00

[PR #3452] [CLOSED] SVG Image and Drawing Support #6199