Horizontal rule line CSS (use a local SVG in a custom horizontal rule line)

Custom CSS & Theme Design
1

I’m working on customizing horizontal rules lines using CSS snippets. So far, I’ve followed guides like: Creating fancy Horizontal Rule lines

However, instead of using emoji or data URIs, I want to use an SVG file stored locally in my vault (e.g., vault/.my-snippets/my-dragon.svg) and reference it in the CSS.

Is it possible to

  • Place a local SVG file in the center of a horizontal rule in Obsidian,
  • Style the line (e.g. color, gradient)

A million thanks

2

You can’t include local files from Obsidian’s CSS; this includes images, svgs, fonts, etc.

I know you mentioned you don’t want to use data URIs, but that seems the way to go. There are numerous online svg → base64 converters. I’d give one of those a try.

Developer docs, but relevant: Embed fonts and images in your theme - Developer Documentation

3

Thank you so much! I might try data URls.

I have found something similar - GitHub - Carbonateb/obsidian-encore-theme: The Encore theme aims to freshen up the UI of Obsidian.md with modern design, loosely based off Material 3.

image
image620×169 11.4 KB

But when I copy its horizontal rule code into my css and enable the script, nothing seems to be changed

// Horizontal rule
body:not(.encore-disable-logo-on-hr) {
  .markdown-rendered hr,
  .cm-line.hr hr {
    height: 1px;
    background-image: linear-gradient(
      to right,
      transparent,
      var(--hr-color) 46.2%,
      transparent 46.2%,
      transparent 54%,
      var(--hr-color) 54%,
      transparent
    );
    border: none;
    position: relative;
    overflow: visible;
  }
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr::after,
  .markdown-rendered hr::after,
  .cm-line.hr hr::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--obsidian-logo-small);
  }
  // Horizontal rule live preview tweak
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr {
    position: relative;
  }
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: 1px;
    background-image: linear-gradient(
      to right,
      transparent 10%,
      var(--hr-color) 46.2%,
      transparent 46.2%,
      transparent 54%,
      var(--hr-color) 54%,
      transparent
    );
  }
  .markdown-source-view:not(.is-live-preview) .HyperMD-hr::after {
    top: 2px;
  }
}

Is there something I’m missing?

4

I seem to have gotten it to work.

But the svg doesn’t show up in color

image

body {
    --hr-line-offset: 25%; /* Sets the offset for the line to be drawn inside the <hr> */
    --hr-color: lightblue; /* Defines the color of the horizontal line */
    /* --hr-text-color: lightblue; */
    /* --hr-text-offset: 2ch; */
    --hr-thickness: 2px;
}

:root hr {
    --hr-line-color: var(--hr-color);
    display: grid;
    place-items: center;
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent,
        var(--hr-line-color) calc(50% - var(--hr-line-offset)),
        var(--hr-line-color) calc(50% + var(--hr-line-offset)),
        transparent
    );
}

:root hr::after {
    content: "";
    position: absolute;
    background-image: url("data:image/ ...");
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px; /* Adjust width as needed */
    height: 40px; /* Adjust height as needed */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%);
}