I want to create a custom callout, and I’m using an SVG icon. Where do I put the icon image? That is, where do I store the actual svg file, so Obsidian knows where to look for it?
Hey @a2jc4life
Please take a look at this articles:
1 Like
Thank you. I didn’t understand what was being instructed in the help file. This video showed me the missing piece, though:
1 Like
It’s still not working. What am I doing wrong?
.callout[data-callout="time"] {
--callout-color: var(--color-blue-rgb);
--callout-icon: '<svg viewBox="0 0 1877 1875" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M1275.75,707.75c-312.417,0 -565.5,253.208 -565.5,565.5c0,312.292 253.125,565.5 565.5,565.5c312.292,0 565.5,-253.208 565.5,-565.5c0,-312.25 -253.208,-565.5 -565.5,-565.5Zm-76.875,542.25l-191.208,-3.417c-29.042,-0.583 -32.959,44.667 4.625,45.375l186.25,3.292c-4.167,-14.75 -4.042,-30.583 0.333,-45.25Zm19,78.792l-206.208,-3.667c-81.959,-1.542 -76.167,-113.042 -3.542,-111.75l210.25,3.792l1.417,-1.417l-0,-145.375c-0,-73.917 111.833,-73.917 111.833,0l0,145.375c51.958,51.042 15.125,137.708 -55.875,137.708c-22.667,0 -43.333,-9.416 -57.875,-24.666Zm80.417,-132.542l-0,-125.917c-0,-29.875 -45.125,-29.875 -45.125,0l-0,125.917c14.666,-4.333 30.375,-4.333 45.125,0Zm-39.209,-321c0,-21.958 33.292,-21.958 33.292,-0l0,52.458c0,21.959 -33.292,21.959 -33.292,0l0,-52.458Zm-336.375,213.417c-18.916,-11 -2.25,-39.792 16.667,-28.834l45.458,26.209c18.917,11 2.25,39.791 -16.791,28.833l-45.334,-26.208Zm16.542,397.916c-18.917,11 -35.417,-17.833 -16.542,-28.708l45.459,-26.208c18.916,-10.875 35.541,17.833 16.541,28.708l-45.458,26.208Zm353.167,184.625c-0,21.959 -33.292,21.959 -33.292,0l0,-52.458c0,-21.833 33.292,-21.833 33.292,0l-0,52.458Zm336.25,-213.333c19,11 2.375,39.667 -16.667,28.833l-45.375,-26.333c-19,-10.875 -2.375,-39.667 16.667,-28.708l45.375,26.208Zm-16.542,-398.042c18.917,-10.875 35.417,17.959 16.542,28.834l-45.459,26.208c-18.916,10.875 -35.416,-17.833 -16.541,-28.833l45.458,-26.209Zm-336.375,166.542c-41.708,0 -62.708,50.542 -33.208,80.083c29.416,29.417 80.083,8.5 80.083,-33.208c0,-25.833 -21,-46.875 -46.875,-46.875Zm0,-388.708c-240.583,-0 -435.583,195 -435.583,435.583c-0,240.458 195,435.458 435.583,435.458c240.458,0 435.458,-195 435.458,-435.458c0,-240.583 -195,-435.583 -435.458,-435.583Zm-331.542,104.083c183.084,-183.083 479.875,-183.083 663.084,0c183.083,183.083 183.083,480 -0,663.083c-183.209,183.084 -480,183.084 -663.084,0c-183.166,-183.083 -183.166,-480.041 0,-663.083Zm-790.958,-822.292l147.75,0l0,-56.083c0,-33.667 27.625,-61.292 61.292,-61.292l250.166,0c33.792,0 61.292,27.625 61.292,61.292l0,56.083l301.417,0l-0,-56.083c-0,-33.667 27.625,-61.292 61.291,-61.292l250.167,0c33.792,0 61.292,27.625 61.292,61.292l-0,56.083l147.75,0c83.25,0 151.291,68.042 151.291,151.292l0,532.583c280.875,222.292 305.792,639.667 52.209,893.375c-246.959,246.959 -651.375,230.917 -878.375,-34l-667.542,0c-83.167,0 -151.167,-68.041 -151.167,-151.291l0,-1240.67c-0.041,-83.25 68,-151.292 151.167,-151.292Zm1460.42,659.417l-0,-343.583l-1578.29,-0l0,1076.08c0,64.833 53.167,118 117.875,118l641,0c-22.333,-30.25 -41.917,-62.583 -58.458,-96.833l-506.042,-0c-44.542,-0 -80.917,-36.375 -80.917,-80.917l0,-839.75c0,-44.542 36.375,-80.917 80.917,-80.917l1189.38,0c44.542,0 80.917,36.375 80.917,80.917l-0,106.083c40.291,16.125 78.291,36.709 113.625,60.917Zm-761.334,70.958c17.584,-17.708 36.375,-34.25 56.084,-49.625l-198.292,0l0,214.834l25.167,-0c29.375,-61.625 69.208,-117.459 117.041,-165.209Zm119.875,-92.916c68.75,-40.375 146.084,-67.542 228.792,-77.834l0,-114.791l-228.792,-0l0,192.625Zm262.209,-81.042c79.958,-5.417 158.75,4.958 232.333,29.625l0,-93.667c0,-26.083 -21.375,-47.583 -47.583,-47.583l-184.709,0l0,111.625l-0.041,0Zm-513.417,823.333c-3.917,-9.458 -7.542,-19.125 -10.875,-28.833l0,28.833l10.875,0Zm-10.875,-423.041c3.208,-9.334 6.75,-18.542 10.375,-27.75l-10.375,-0l0,27.75Zm228.792,-309.25l-0,-202.667l-228.792,0l0,202.667l228.792,-0Zm-262.209,732.291l0,-202.541l-228.791,-0l-0,202.541l228.791,0Zm0,-235.958l0,-214.833l-228.791,-0l-0,214.833l228.791,0Zm0,-248.167l0,-214.833l-228.791,0l-0,214.833l228.791,0Zm0,-248.166l0,-202.667l-228.791,0l-0,202.667l228.791,-0Zm-262.083,732.291l0,-202.541l-232.458,-0l-0,154.958c-0,26.208 21.5,47.583 47.583,47.583l184.875,0Zm0,-235.958l0,-214.833l-232.458,-0l-0,214.833l232.458,-0Zm0,-248.167l0,-214.833l-232.458,-0l-0,214.833l232.458,0Zm0,-248.166l0,-202.667l-184.875,-0c-26.083,-0 -47.583,21.5 -47.583,47.583l-0,155.084l232.458,-0Zm1199.04,-364.959l-0,-131.208c-0,-64.833 -53.167,-117.875 -118,-117.875l-147.75,-0l-0,56.083c-0,33.667 -27.5,61.292 -61.292,61.292l-250.167,-0c-33.666,-0 -61.291,-27.625 -61.291,-61.292l-0,-56.083l-301.417,-0l0,56.083c0,33.667 -27.5,61.292 -61.292,61.292l-250.166,-0c-33.667,-0 -61.292,-27.625 -61.292,-61.292l0,-56.083l-147.75,-0c-64.708,-0 -117.875,53.042 -117.875,117.875l0,131.208l1578.29,0Zm-327.042,-366.458l-250.167,-0c-15.25,-0 -27.875,12.5 -27.875,27.875l0,145.625c0,15.375 12.625,28 27.875,28l250.167,-0c15.375,-0 28,-12.625 28,-28l0,-145.625c0,-15.375 -12.667,-27.875 -28,-27.875Zm-674.167,-0l-250.166,-0c-15.25,-0 -27.875,12.5 -27.875,27.875l-0,145.625c-0,15.375 12.625,28 27.875,28l250.166,-0c15.375,-0 28,-12.625 28,-28l0,-145.625c-0.041,-15.375 -12.666,-27.875 -28,-27.875Z" style="fill:#057b88;fill-rule:nonzero;stroke:#057b88;stroke-width:4.17px;"/></svg>';
}
(I’ve tried it with and without the single quotes around the svg code.) The rest of the callout is working, but the image is just simply not showing up.)
Are you on a recent installer? There was an issue a bit back with custom SVGs not showing up because of an installer/Electron issue. It should be alright now.
Also, where’s the source of the SVG?
1 Like
Well, I’m not sure what was up because it was showing that the newest installer version was a version that matched what I already had installed, but it said the “new” version was ready for installation and relaunching fixed it, so thank you!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.