Preview differs from PDF when rendering SVG

[Tim Voßhenrich]

Describe the bug
I was using harbinger to create boxes with a box-shadow and noticed that the preview differs from the final PDF.

Preview:

PDF:

This does not seem like a bug in Typst itself as a SVG export looks fine in Inkscape but not Edge or Typst Preview.

SVG in Inkscape (hard to see the shadows but they are there):

To Reproduce

#import "harbinger/src/shadow-box.typ": shadow-box

#show raw.where(block: true): it => {
    pad(4pt)[
      #shadow-box(
        fill: white,
        shadow-fill: rgb(89, 85, 101),
        radius: 4pt,
        inset: 12pt,
        width: 100%,
        blur: 5,
        margin: 5,
        dy: 4pt,
        opacity: 0.2,
      )[
        #align(left)[
          #it
        ]
      ]
    ]
  }

```rs
pub fn main() {
  println!("Hello World");
}
```

Expected behavior
A clear and concise description of what you expected to happen.

Package/Software version:

VSCode version(Help -> About):

Version: 1.88.0 (user setup)
Commit: 5c3e652f63e798a5ac2f31ffd0d863669328dc4c
Date: 2024-04-03T13:26:18.741Z
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Windows_NT x64 10.0.19045

typst-preview extension version: v0.11.3

[Wenzhuo Liu]

looks like it is creating a svg file to produce shadow effect. interesting

[Wenzhuo Liu]

The crafted svg background doesn't looks like shadow in chrome. It also looks the same in official svg export. I think this is harbinger's bug

[Wenzhuo Liu]

[Wenzhuo Liu]

I'm closing this issue because it looks like it's upstream's bug. I change the 5pt 5pt to 5 5 and it works. see also https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stdDeviation

[Wenzhuo Liu]

Please also report this bug to harbinger!

[Tim Voßhenrich]

Thank you. I wasnt sure where to file this bug because it worked in the PDF and in Inkscape. I didnt think about checking the error messages in the browser. I will file a bug at harbingers repo.