Custom callouts with inline svg do not respect attributes on that svg

Steps to reproduce

  • Add a custom callout with an inline svg --callout-icon property as described in the docs
  • In the custom svg code, add the fill="none" attribute, eg:
--callout-icon: '<svg fill="none">...</svg>';
  • Enable the relevant snippet with the custom CSS

Did you follow the troubleshooting guide? [Y/N]


Expected result

The resultant SVG will have specified fill="none" property and therefore not be solid

Actual result

Obsidian appears to apply a default set of svg attributes and instead the rendered svg has fill="currentColor", as well as a host of other properties not specified in the original svg. This causes the icon to appear solid instead of as a line-drawing.

It interferes with the ability to bulk-create custom callouts directly from icon sets that specify these properties on the svg itself.

Importantly, these are applied as attributes on the svg itself, they are not being inherited from another style rule.

As a workaround, you can specify a rule on the callout like:

.callout[data-callout="mycustomcallout"] svg {
  fill: none !important;

however this should not be necessary; Obsidian should respect any attributes set on the inline svg HTML and not overwrite them with its own.


Obsidian version: v1.4.16
Installer version: v1.4.16
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 1
Restricted mode: on


Additional information

1 Like

moved to developers and api