Callout (custom) SVG icons

[alex-m-d]

What I’m trying to do

I’m trying to create custom callouts with their own SVG icons (not lucid!). SVG file itself I generate from LaTeX formula, i.e., I type \Omega in one converter which generates SVG file from it and then I past it in the following custom callout:

.callout[data-callout="word"] {
    --callout-color: 100, 100, 100;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="130.64" height="127.44" viewBox="0 -704 722 704" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"><defs><path id="a" d="M55 454q0 49 20 92t52 71 70 48 75 30 65 9h15q44 0 52-1 123-16 192-88t70-161q0-62-31-124t-76-130-60-117v-3h44q46 1 57 3t17 10q5 9 12 42t7 37l1 5h40v-2l-17-86Q645 3 644 2V0H488q-27 0-32 3t-5 17q0 69 48 215t49 220q0 57-18 100t-47 67-59 34-63 12q-29 0-58-10t-60-32-50-66-19-104q0-76 48-223t48-213q0-13-7-20H77v2q-1 1-16 87l-17 86v2h40l1-5q0-1 3-17t8-36 8-26q5-7 16-9t58-4h44v3q-16 49-60 116T87 329 55 454Z"/></defs><g data-mml-node="math" stroke="currentColor" fill="currentColor" stroke-width="0"><use data-c="3A9" xlink:href="#a" data-mml-node="mi" transform="scale(1 -1)"/></g></svg>';
    /*--callout-title-size: 20px;*/
    --callout-radius: 6px;
    --callout-title-color: rgba(150,150,150,0.5);
    --callout-border-width: 0.5px;
    --callout-border-opacity: 0.2;
}

Unfortunately, Obsidian doesn’t show the icon… I also tried other custom SVG icons (from svgviewer, for example) and they usually work, so the problem here with SVG icons generated from LaTeX symbols.

P.S. I’m using macOS and obsidian 1.4.16.
P.S.S I checked SVG in the verifier and it indeed generates a normal icon, so it’s not corrupted.

[alex-m-d]

Edit:

I also tried LaTeXiT to generate the following SVG (which also didn’t help):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="27" viewBox="0 0 24 27"><defs><path id="a" d="M24.281-5.813h-.906c-.172.938-.313 1.766-.64 2.625-.172.563-.282.86-2.36.86H17.5c.469-2.016 1.578-3.735 3.188-6.094 1.687-2.547 3.156-5.031 3.156-7.86 0-4.984-4.844-9-10.907-9-6.156 0-10.921 4.095-10.921 9 0 2.829 1.468 5.313 3.14 7.86 1.578 2.36 2.735 4.078 3.203 6.094H5.484c-2.078 0-2.187-.297-2.359-.828-.297-.828-.469-1.75-.656-2.656h-.89L2.765 0H8.5c.781 0 .89 0 .89-.75 0-2.516-1.109-5.672-1.937-7.969-.75-2.078-1.75-4.906-1.75-7.594 0-5.734 3.938-8.171 7.203-8.171 3.453 0 7.25 2.578 7.25 8.172 0 2.687-.968 5.406-2.015 8.359-.532 1.5-1.688 4.719-1.688 7.203 0 .75.11.75.938.75h5.703Zm0 0"/></defs><use xlink:href="#a" x="-.958" y="26.248"/></svg>

[ariehen]

Sometimes the --callout-icon: '<svg... format doesn’t work for whatever reason.

You could use this site https://yoksel.github.io/url-encoder/ to encode the SVG, and give this version a try:

.callout[data-callout="word"] {
    --callout-color: 100, 100, 100;
    /*--callout-title-size: 20px;*/
    --callout-radius: 6px;
    --callout-title-color: rgba(150,150,150,0.5);
    --callout-border-width: 0.5px;
    --callout-border-opacity: 0.2;
}

.callout[data-callout="word"] > .callout-title > .callout-icon > svg {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 27'%3E%3Cdefs%3E%3Cpath id='a' d='M24.281-5.813h-.906c-.172.938-.313 1.766-.64 2.625-.172.563-.282.86-2.36.86H17.5c.469-2.016 1.578-3.735 3.188-6.094 1.687-2.547 3.156-5.031 3.156-7.86 0-4.984-4.844-9-10.907-9-6.156 0-10.921 4.095-10.921 9 0 2.829 1.468 5.313 3.14 7.86 1.578 2.36 2.735 4.078 3.203 6.094H5.484c-2.078 0-2.187-.297-2.359-.828-.297-.828-.469-1.75-.656-2.656h-.89L2.765 0H8.5c.781 0 .89 0 .89-.75 0-2.516-1.109-5.672-1.937-7.969-.75-2.078-1.75-4.906-1.75-7.594 0-5.734 3.938-8.171 7.203-8.171 3.453 0 7.25 2.578 7.25 8.172 0 2.687-.968 5.406-2.015 8.359-.532 1.5-1.688 4.719-1.688 7.203 0 .75.11.75.938.75h5.703Zm0 0'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' x='-.958' y='26.248'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
}

[alex-m-d]

@ariehen , the approach indeed works! Thank you.

The only problem I found is that in general (if I typed two symbols $\Omega\Omega, for example) the icon is “shifted” a little that looks strange:

The url encoding ov this SVG is the following:

url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="49.005" height="23.895" viewBox="0 -704 1444 704" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"%3E%3Cdefs%3E%3Cpath id="a" d="M55 454q0 49 20 92t52 71 70 48 75 30 65 9h15q44 0 52-1 123-16 192-88t70-161q0-62-31-124t-76-130-60-117v-3h44q46 1 57 3t17 10q5 9 12 42t7 37l1 5h40v-2l-17-86Q645 3 644 2V0H488q-27 0-32 3t-5 17q0 69 48 215t49 220q0 57-18 100t-47 67-59 34-63 12q-29 0-58-10t-60-32-50-66-19-104q0-76 48-223t48-213q0-13-7-20H77v2q-1 1-16 87l-17 86v2h40l1-5q0-1 3-17t8-36 8-26q5-7 16-9t58-4h44v3q-16 49-60 116T87 329 55 454Z"/%3E%3C/defs%3E%3Cg data-mml-node="math" stroke="currentColor" fill="currentColor" stroke-width="0"%3E%3Cuse data-c="3A9" xlink:href="%23a" data-mml-node="mi" transform="scale(1 -1)"/%3E%3Cuse data-c="3A9" xlink:href="%23a" data-mml-node="mi" transform="matrix(1 0 0 -1 722 0)"/%3E%3C/g%3E%3C/svg%3E')

[ariehen]

You could try adjusting the width and height a bit in the above url(), but not sure if that’s the look you’re going for.

... width="19" height="18" ...

[alex-m-d]

I see. Maybe I’ll use this approach then.

But there is no way to extend the icon “view box” to be rectangular so that it includes more symbols, right?

[ariehen]

You could play around with these. Adjusting the width to 36px creates a rectangle. You’ll then, of course, need to re-adjust the SVG size and set this to individual callouts, etc.

.callout-icon .svg-icon {
    height: var(--icon-size); /* default 18px */
    width: var(--icon-size); /* default 18px */
    stroke-width: var(--icon-stroke); /* default 1.75px */
}

[alex-m-d]

Thanks a lot for pointing to this!