Steps to reproduce
- Add a custom callout with an inline svg
--callout-iconproperty 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]
Y
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.
Environment
SYSTEM INFO:
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
RECOMMENDATIONS:
none