Centering and scaling svgs with the Obsidian Digital Garden plugin

What I’m trying to do

I’ve been using the Obsidian Digital Garden plugin made by oleeskild and it’s been working great. A lot of my notes have several diagrams I’ve made using Excalidraw and exported into SVGs and I’ve been trying to find a way to center in my digital garden. Here is the CSS snippet that I used in order to get it to work:

img[alt*="center"]{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

And typing this: ![[image.svg|center|450]]

Allows me to both center and scale my image in Obsidian. However when I check my site, it seems that the image aligned in the center but my custom scaling is no longer present:

Things I have tried

I read along some forum, can’t remember where, that removing the “[alt*=“center”]” part from the CSS snippet would make the behavior default and would allow me to just type ![[image.svg|450]] in order to get the picture to render properly but that didn’t work.

Tip: depends on what theme you use.

I am currently using the “Prism” theme on my digital garden with the only modifications done through style settings being a change in color scheme.

I don’t know what Prism does with images by default. I was going to write I don’t know how with Style Settings (plugin) one can manipulate this but I realized DG doesn’t (didn’t?) handle Style Settings settings anyway.

I do remember I’ve seen themes where those put all my images in the middle by default:

  • Blue Topaz
  • Chime

But if you don’t want to use those themes, you would need to forgo having to add ‘center’ in each link, meaning a custom snippet would need to be used.
Once you have that, you need to add your custom css to your ‘src/site/styles/user’ folder.
How to do that? Clone the git repo of your Digital Garden with Github Desktop, find the folder on your drive, copy the snippet there, and commit+push changes.
You would need to learn some git along the way.
But from the text I gather you managed to get the snippet up to the site?

Anyway, this is what I can say now.

I see, thank you for answering.

I’m gonna try Blue Topaz and Chime first to see if I like them and if they will work with DG, but if not I’ll give that other method a go.

So I’ve tried the two themes and their centering seems to work in obisidian but not in my Digital Garden?

I probably need to center them using a snippet instead. I’m not very familiar with git, do you have any tutorials you could link on how I’d go about adding the snippet?

Thanks

Apart from what I wrote above, I can offer chat response idea:

It looks like commits are created automatically, which is needed to trigger deployment.

Chat link:
https://hf.co/chat/r/SDrVFfk?leafId=cdff2df2-7429-42c6-9d6f-8d7625280a0f

Ok so I’ve followed the steps for adding custom css snippets to obsidian. I made the following folders and .css files according to oleeskild’s documentation like so:

image

That css snippet was what I used in my obsidian vault, auto-centering images without requiring a “center” added in each link, however it still didn’t work. My images are still left-aligned on my digital garden :frowning:

Any idea on how to fix it?

I don’t do svgs. I think you need diffrent snippet for svgs, no?

I’m not quite sure since I haven’t tried centering them outside of obsidian before. Obsidian has been treating them like any other png and centering them with this snippet so I haven’t tried others.

Try ‘svg’ in place of ‘img’ or check the forum for how people handled svg images.
If the snippet works in Obsidian, it should work on DG as well.

Can you share the solution for others?

Your solution of replacing ‘img’ with svg worked and this is what I ended up with:

image

And it worked without any changes to how you would normally link images. Weird side effect is that my sidebar is now all weird:

The bottom part of the snippet…maybe remove it, no?
But looking at the top part, that looks hacky, too.

Why not look through the forum for image centering snippets?
You can look for excalidraw, maybe even plantuml related stuff as well.

I’ll go searching and trying other snippets and see if any of them prevent the icons from getting messed up. I’ll post here if I find one that works perfectly.

1 Like

Ok so annoyingly enough, after some double-checking I still cannot scale my svgs actually. They will now auto-center without requiring me to type ‘center’, however they no longer scale and I cannot control their scale.