typst.ts
typst.ts copied to clipboard
Render different pages into seperate SVGs
Is your feature request related to a problem? Please describe.
My 20-page pdf is rendered into a single SVG and is causing severe performance issues. The browser reacts slowly and sometimes stuck. Example is here: https://alias.qliphoth.tech/post/stlc/
Describe the solution you'd like
Though not tested, I think dividing it into multiple SVGs may help, and it's natural to render each page into a seperate SVG.
Describe alternatives you've considered
It's also possible to render only the part displayed in the screen, but this sounds harder.
it's natural to render each page into a seperate SVG.
What would you do if you get seperated svg? Putting all seperated SVGs into webpage will just have same performance as a single SVG one.
It's also possible to render only the part displayed in the screen, but this sounds harder.
Another project, typst-preview, using typst.ts applies the partial rendering technique, but I have not adopted them to typst.ts yet. I'm working on it.
If we are willing to sacrifice link
s, we can lazy load individual ꜱᴠɢs using <img>
or <object>
tags. Additionally, isolated ꜱᴠɢs that are not in the page's DOM will have better performance.
The ideal approach would be to generate reasonable chunks based on Frame
, so that parts with links can be directly embedded into HTML, while others are loaded as images. This way it won't break anchors (I guess).
We are rendering only the part displayed in the screen.