Skip to content

Add custom SVG marker support#53

Open
olvidalo wants to merge 3 commits intoobsidianmd:masterfrom
olvidalo:custom-svg-markers
Open

Add custom SVG marker support#53
olvidalo wants to merge 3 commits intoobsidianmd:masterfrom
olvidalo:custom-svg-markers

Conversation

@olvidalo
Copy link
Copy Markdown

@olvidalo olvidalo commented Dec 3, 2025

This PR adds support for custom SVG markers. SVG is read from a user-chosen property (just like custom icon names), parsed, and rendered onto the map. This allows users to use custom marker shapes beyond the Lucide icon composite markers. It also enables data-driven markers, for example, for displaying values such as ratings/prices or varying the size of a marker via formulas.

The SVG property or formula is expected to evaluate to a valid SVG element wrapped in <svg></svg>. SVGs with explicit dimensions (width/height property on the <svg> element) render at a fixed size, SVGs with only viewBox scale with zoom just as normal markers. Invalid SVGs show a fallback marker with error details in the popup.

Marker property precedence is: Custom SVG marker --> Custom Icon marker --> Default marker. This makes it possible to use SVG markers only for specific entries, falling back to icon or default markers for others.

Main changes

  • markers.ts: Add SVG parsing (using DOMParser), validation, and rendering
  • popup.ts: Display SVG validation errors
  • exapmles/: Added demo views showing static, dynamic text, and dynamic size SVG markers via formulas and a per-entry SVG marker via a plain frontmatter property.

Limitations

  • No CSS variable support in custom SVGs
  • No interactivity (script tags, event handlers, animations etc.)
  • Dimensions required (svg element must have eitherviewBox or explicit width/height attributes)
  • String literals in formulas don't support line breaks, which makes typing or pasting SVG code inside the formula a bit awkward (should be fine if documented).

Examples

Simple markers using a formula
Simple SVG markers using a formula

Dynamic text markers displaying the rating property
image

Dynamic size markers
image

Per-Item marker using a simple frontmatter property
image
(Public domain Eiffel tower SVG from Wikimedia Commons)


If you consider merging this, I'll be happy to make any changes needed or add documentation for the feature in the Map View docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant