Obsidian-Excalidraw 1.0.6 update - Obsidian-Excalidraw

**Created**:: [[2021-04-28 Wednesday]] **Link**:: https://youtu.be/ipZPbcP2B0M **Duration**:: 8:13 ![Obsidian-Excalidraw 1.0.6 update](https://youtu.be/ipZPbcP2B0M) # Summary In this video, the presenter discusses the new features of the Obsidian Excalidraw 1.0.6 update, focusing on the export functionality that now includes SVG and PNG file formats. The tutorial covers how to customize exported images with background themes and transparency options. Additionally, the video explains command palette enhancements and new settings for file synchronization and drawing management. # Key Takeaways - The update allows exporting drawings in both SVG and PNG formats, adhering to the drawing's file name. - Users can customize exports with background themes and create transparent images. - New functionality includes options in the command palette to open drawings in different panes, as well as styling options for size and alignment. # Content Hey all! I'd like to walk you through some of the changes I've made in Excalidraw 1.0.6. The key update is I've added export capabilities to SVG and PNG file formats, and overall, you'll find that all of my exports will use the file name of your drawing and simply add svg or png as an extension to the file, saving it to the same location where your image is. I'll show you in a moment. [* ](https://youtu.be/ipZPbcP2B0M) There are two settings that influence how your image will look. You can export an image with the background and the theme. The theme options allow you to select between a light and a dark theme. If I save this as a dark theme, you can see that this image also followed the dark theme. Let me show you the settings. [* ](https://youtu.be/ipZPbcP2B0M) If I come in here, you’ll notice these two settings. If I turn off applying the theme, then the exported image will not have the theme and will be exported with the default white background. It’s hard to see here, but this image actually had a white background, which in the dark theme was converted to black by Excalidraw. I can also export an image without the background, which will make the image transparent. That’s what you see right now; this image was now exported as transparent. If I change back the theme, that will not change the look and feel of this image. So those are the two settings that you can use to control how your export happens. [* ](https://youtu.be/ipZPbcP2B0M) You can trigger export either manually for a one-time export, and for that, I added two buttons here: export to SVG and export to PNG. If you click a button, like "Export to SVG," you can see that the SVG file has appeared. Clicking on the SVG, you can see that I have my file right here. The same is true for PNG; if I click on "Export to PNG," then you’ll see that the PNG file was created, and there’s the PNG image. [* ](https://youtu.be/ipZPbcP2B0M) You can also use the command palette. When the drawing is active, if I press Ctrl + P and type in "Excalidraw," you’ll see the export SVG and export PNG commands here, and they will do exactly the same thing as the buttons. You can set up automatic exports for these two file formats. If I come to settings, you will see that I have three settings regarding this. First of all, I can set it up to automatically generate an SVG file, and I can also choose to keep the file names of the SVG and PNG files in sync with my drawing file. I’m going to click this; I’m not going to be exporting PNGs now. Let me go ahead and create a new drawing. [* ](https://youtu.be/ipZPbcP2B0M) This is a brand new drawing, and let me just draw something here. When I exit this drawing and switch back to it, you can see that in the meantime, my SVG was created. It sometimes takes a bit for Obsidian to recognize the file was updated. So you saw I opened another PNG, went back here, and then it recognized that this is indeed a valid file. Now, what I want to show you is if I rename my drawing; I'll rename it "Circle." After executing that, you’ll see that the SVG file was also renamed to "Circle." This works also if I move the SVG file to a demo folder; then the Excalidraw file I moved to the demo folder—the SVG file followed it. I can move it back here, and the SVG will follow this file; the same will happen with PNG files. [* ](https://youtu.be/ipZPbcP2B0M) Those are the export settings. I also added two additions to the command palette; this is actually just a very simple addition. If I want to open the drawing, I can decide whether I want to open it on the active page or in a new pane. Let me just bring up the command palette and say I want to open an existing drawing in a new pane. This means the current page will be split, and that’s where the drawing will be placed. Let me open up the demo, and you can see that this was opened up right here. If I would choose the other option and open an existing drawing in the currently active pane, then if I choose "Circle," I would open my circle right here. [* ](https://youtu.be/ipZPbcP2B0M) So, coming back to the description, I've also added some functionality to the ribbon button. Let me just close this. Now if here on the ribbon I click control-click, then a new drawing is created in a new pane. If I simply click the ribbon button, then it will be created in the active pane. [* ](https://youtu.be/ipZPbcP2B0M) Finally, I want to show you some of the formatting that was added. There’s a styling option, where you can see I can add size and alignment. Of course, I can add the alignment without the size as well. Now it’s going to be a smaller demo because that’s not the large 800, but I can also add here “left,” and then my image will appear on the left. In fact, the way I built this is anything you put after the last pipe character is going to be added to this class—"excalidraw-svg" and then it will be "dash-left," "dash-right," "dash-center," or whatever you want. So you can go and develop any kind of CSS for your purposes. [* ](https://youtu.be/ipZPbcP2B0M) So those are the key changes, and I hope you like it. If you have additional ideas, please submit those on GitHub, and I’ll be happy to try to make them happen. Thank you! [* ](https://youtu.be/ipZPbcP2B0M) # YouTube Details ## YouTube Description You can install the plugin from Community Plugins in Obsidian, or download it from GitHub here: https://github.com/zsviczian/obsidian-excalidraw-plugin If you find this helpful please say thanks by buying me a coffee: https://ko-fi.com/zsolt You can reach me (@zsviczian) in the Obsidian Members Group (OMG) on Discord or on Twitter. ## YouTube Transcript [hey all i'd like to walk you through](https://youtu.be/ipZPbcP2B0M?t=0) [some of the changes](https://youtu.be/ipZPbcP2B0M?t=3) [i've made in xcolidraw1.0.6](https://youtu.be/ipZPbcP2B0M?t=4) [and the key update is i've added export](https://youtu.be/ipZPbcP2B0M?t=9) [to](https://youtu.be/ipZPbcP2B0M?t=12) [svg and png file formats and](https://youtu.be/ipZPbcP2B0M?t=12) [overall what you will find is all of my](https://youtu.be/ipZPbcP2B0M?t=16) [exports will use the file name of your](https://youtu.be/ipZPbcP2B0M?t=19) [drawing](https://youtu.be/ipZPbcP2B0M?t=22) [and will simply add svg or png](https://youtu.be/ipZPbcP2B0M?t=23) [as an extension to the file and it will](https://youtu.be/ipZPbcP2B0M?t=27) [save it to the same](https://youtu.be/ipZPbcP2B0M?t=30) [location where your image is i'll show](https://youtu.be/ipZPbcP2B0M?t=31) [you](https://youtu.be/ipZPbcP2B0M?t=33) [in a moment there are two settings that](https://youtu.be/ipZPbcP2B0M?t=34) [influence how your image will look like](https://youtu.be/ipZPbcP2B0M?t=38) [you can export an image with the](https://youtu.be/ipZPbcP2B0M?t=41) [background and with the theme](https://youtu.be/ipZPbcP2B0M?t=43) [so the theme is](https://youtu.be/ipZPbcP2B0M?t=45) [this here that you have a light and a](https://youtu.be/ipZPbcP2B0M?t=49) [dark theme](https://youtu.be/ipZPbcP2B0M?t=51) [if i now save this as a dark theme you](https://youtu.be/ipZPbcP2B0M?t=52) [can see that this image](https://youtu.be/ipZPbcP2B0M?t=55) [also followed the dark theme let me show](https://youtu.be/ipZPbcP2B0M?t=58) [you the settings](https://youtu.be/ipZPbcP2B0M?t=60) [so if i come in here you have these two](https://youtu.be/ipZPbcP2B0M?t=62) [settings](https://youtu.be/ipZPbcP2B0M?t=64) [if i turn off the](https://youtu.be/ipZPbcP2B0M?t=65) [theme applying the theme then you will](https://youtu.be/ipZPbcP2B0M?t=68) [see that the exported image](https://youtu.be/ipZPbcP2B0M?t=71) [doesn't have the theme it will be](https://youtu.be/ipZPbcP2B0M?t=72) [exported with the default](https://youtu.be/ipZPbcP2B0M?t=75) [white background because it's hard to](https://youtu.be/ipZPbcP2B0M?t=77) [see here but this image had actually a](https://youtu.be/ipZPbcP2B0M?t=81) [white background which](https://youtu.be/ipZPbcP2B0M?t=83) [in the dark theme was converted to](https://youtu.be/ipZPbcP2B0M?t=84) [black by x coli draw i can also export](https://youtu.be/ipZPbcP2B0M?t=87) [an image](https://youtu.be/ipZPbcP2B0M?t=91) [without the background which will make](https://youtu.be/ipZPbcP2B0M?t=92) [the image transparent so that's what you](https://youtu.be/ipZPbcP2B0M?t=95) [see](https://youtu.be/ipZPbcP2B0M?t=97) [right now and here that this](https://youtu.be/ipZPbcP2B0M?t=97) [image was now exported as transparent](https://youtu.be/ipZPbcP2B0M?t=101) [and](https://youtu.be/ipZPbcP2B0M?t=105) [if i change back the theme that will not](https://youtu.be/ipZPbcP2B0M?t=106) [change the look and feel of](https://youtu.be/ipZPbcP2B0M?t=109) [this image so that's those are the two](https://youtu.be/ipZPbcP2B0M?t=112) [settings that you can use to control how](https://youtu.be/ipZPbcP2B0M?t=115) [your export happens](https://youtu.be/ipZPbcP2B0M?t=117) [you can exp trigger export either](https://youtu.be/ipZPbcP2B0M?t=119) [manually to have a once off export and](https://youtu.be/ipZPbcP2B0M?t=123) [for that](https://youtu.be/ipZPbcP2B0M?t=126) [i added two buttons here export to svg](https://youtu.be/ipZPbcP2B0M?t=127) [and export to png](https://youtu.be/ipZPbcP2B0M?t=130) [and if you click the button i'll click](https://youtu.be/ipZPbcP2B0M?t=132) [export to svg](https://youtu.be/ipZPbcP2B0M?t=135) [and you can see that the svg file](https://youtu.be/ipZPbcP2B0M?t=136) [has appeared and if i click on the svg](https://youtu.be/ipZPbcP2B0M?t=140) [you can see that i have my file](https://youtu.be/ipZPbcP2B0M?t=143) [right here and the same](https://youtu.be/ipZPbcP2B0M?t=147) [with png so if i click png then you see](https://youtu.be/ipZPbcP2B0M?t=150) [that the png file was created and](https://youtu.be/ipZPbcP2B0M?t=153) [there's the](https://youtu.be/ipZPbcP2B0M?t=155) [png image now](https://youtu.be/ipZPbcP2B0M?t=156) [you can also use the command palette so](https://youtu.be/ipZPbcP2B0M?t=160) [when the drawing is](https://youtu.be/ipZPbcP2B0M?t=162) [active if i press ctrl p and](https://youtu.be/ipZPbcP2B0M?t=163) [i type in x colored rod and you see the](https://youtu.be/ipZPbcP2B0M?t=166) [export svg](https://youtu.be/ipZPbcP2B0M?t=169) [export png commands are here](https://youtu.be/ipZPbcP2B0M?t=171) [and they will do exactly the same as the](https://youtu.be/ipZPbcP2B0M?t=174) [buttons](https://youtu.be/ipZPbcP2B0M?t=177) [you can also set up automatic export to](https://youtu.be/ipZPbcP2B0M?t=179) [these two file formats](https://youtu.be/ipZPbcP2B0M?t=182) [and if i come to settings you will see](https://youtu.be/ipZPbcP2B0M?t=184) [i have three settings regarding this so](https://youtu.be/ipZPbcP2B0M?t=187) [first of all i can set up that i want to](https://youtu.be/ipZPbcP2B0M?t=190) [automatically generate](https://youtu.be/ipZPbcP2B0M?t=192) [an svg file and then i can also set up](https://youtu.be/ipZPbcP2B0M?t=194) [if i want to keep the file name of the](https://youtu.be/ipZPbcP2B0M?t=198) [svg and png file](https://youtu.be/ipZPbcP2B0M?t=201) [in sync with my](https://youtu.be/ipZPbcP2B0M?t=203) [drawing file so i'm going to click this](https://youtu.be/ipZPbcP2B0M?t=207) [i'm not going to be exporting pngs now](https://youtu.be/ipZPbcP2B0M?t=210) [and let me go ahead and create](https://youtu.be/ipZPbcP2B0M?t=213) [a new drawing so this is a brand new](https://youtu.be/ipZPbcP2B0M?t=217) [drawing and let me just draw something](https://youtu.be/ipZPbcP2B0M?t=220) [here](https://youtu.be/ipZPbcP2B0M?t=223) [and you will see that when i](https://youtu.be/ipZPbcP2B0M?t=223) [exit this drawing so i switch back](https://youtu.be/ipZPbcP2B0M?t=228) [to this drawing and come back here](https://youtu.be/ipZPbcP2B0M?t=231) [you can see that in the meantime my](https://youtu.be/ipZPbcP2B0M?t=234) [svg was created it](https://youtu.be/ipZPbcP2B0M?t=238) [sometimes takes a bit for um](https://youtu.be/ipZPbcP2B0M?t=241) [obsidian to recognize that the file was](https://youtu.be/ipZPbcP2B0M?t=246) [updated so you saw](https://youtu.be/ipZPbcP2B0M?t=248) [i opened another png i and back here and](https://youtu.be/ipZPbcP2B0M?t=250) [then](https://youtu.be/ipZPbcP2B0M?t=253) [it recognized that this is indeed the](https://youtu.be/ipZPbcP2B0M?t=254) [valid file](https://youtu.be/ipZPbcP2B0M?t=256) [now what i want to show you is if i](https://youtu.be/ipZPbcP2B0M?t=257) [rename](https://youtu.be/ipZPbcP2B0M?t=260) [my drawing so i'll rename it](https://youtu.be/ipZPbcP2B0M?t=261) [circle and i executed then you see that](https://youtu.be/ipZPbcP2B0M?t=264) [the svg file was also](https://youtu.be/ipZPbcP2B0M?t=269) [renamed to circle this works also](https://youtu.be/ipZPbcP2B0M?t=272) [if i move the svg file to demo](https://youtu.be/ipZPbcP2B0M?t=275) [then you will see that the not the the](https://youtu.be/ipZPbcP2B0M?t=278) [xcode draw file i moved to the demo](https://youtu.be/ipZPbcP2B0M?t=282) [folder the svg file followed it](https://youtu.be/ipZPbcP2B0M?t=285) [and i can move it back here and the svg](https://youtu.be/ipZPbcP2B0M?t=288) [will follow this file and also if you](https://youtu.be/ipZPbcP2B0M?t=291) [have a png the png file will](https://youtu.be/ipZPbcP2B0M?t=294) [follow it as well so those are the](https://youtu.be/ipZPbcP2B0M?t=296) [export settings i also added two](https://youtu.be/ipZPbcP2B0M?t=300) [additions to the command palette and](https://youtu.be/ipZPbcP2B0M?t=304) [this is](https://youtu.be/ipZPbcP2B0M?t=307) [actually just a very simple addition so](https://youtu.be/ipZPbcP2B0M?t=308) [if i want to open the drawing i can](https://youtu.be/ipZPbcP2B0M?t=311) [decide whether i want to open it on the](https://youtu.be/ipZPbcP2B0M?t=314) [active](https://youtu.be/ipZPbcP2B0M?t=317) [page or if i want to open it in a new](https://youtu.be/ipZPbcP2B0M?t=318) [pane](https://youtu.be/ipZPbcP2B0M?t=320) [so let me just bring up the command](https://youtu.be/ipZPbcP2B0M?t=321) [palette and say](https://youtu.be/ipZPbcP2B0M?t=323) [i want to open an existing](https://youtu.be/ipZPbcP2B0M?t=325) [drawing in a new pane which means](https://youtu.be/ipZPbcP2B0M?t=328) [this current page is going to be split](https://youtu.be/ipZPbcP2B0M?t=331) [and that's where the drawing is going to](https://youtu.be/ipZPbcP2B0M?t=334) [be placed so let me open up demo](https://youtu.be/ipZPbcP2B0M?t=336) [and you can see that this was opened up](https://youtu.be/ipZPbcP2B0M?t=338) [right here while if i would choose the](https://youtu.be/ipZPbcP2B0M?t=342) [other option then if i want to open an](https://youtu.be/ipZPbcP2B0M?t=346) [existing drawing and](https://youtu.be/ipZPbcP2B0M?t=349) [currently active pane if i choose circle](https://youtu.be/ipZPbcP2B0M?t=350) [then i would open my circle right here](https://youtu.be/ipZPbcP2B0M?t=354) [so coming back to](https://youtu.be/ipZPbcP2B0M?t=357) [the demo or the description](https://youtu.be/ipZPbcP2B0M?t=362) [you can see uh i've also added](https://youtu.be/ipZPbcP2B0M?t=366) [some functionality to the ribbon button](https://youtu.be/ipZPbcP2B0M?t=369) [so](https://youtu.be/ipZPbcP2B0M?t=372) [let me just close this and now if here](https://youtu.be/ipZPbcP2B0M?t=373) [on the ribbon if i click control click](https://youtu.be/ipZPbcP2B0M?t=377) [then a new drawing is created in](https://youtu.be/ipZPbcP2B0M?t=380) [a new pane if i just simply](https://youtu.be/ipZPbcP2B0M?t=384) [click the ribbon button then it is going](https://youtu.be/ipZPbcP2B0M?t=387) [to be created](https://youtu.be/ipZPbcP2B0M?t=389) [on the active pane](https://youtu.be/ipZPbcP2B0M?t=391) [and then finally i just want to show you](https://youtu.be/ipZPbcP2B0M?t=394) [uh some of the formatting that was now](https://youtu.be/ipZPbcP2B0M?t=397) [added](https://youtu.be/ipZPbcP2B0M?t=400) [so there's a styling option and what you](https://youtu.be/ipZPbcP2B0M?t=401) [can](https://youtu.be/ipZPbcP2B0M?t=404) [do is let me just show you up here](https://youtu.be/ipZPbcP2B0M?t=406) [you can see that i can](https://youtu.be/ipZPbcP2B0M?t=410) [add a size and i can also add](https://youtu.be/ipZPbcP2B0M?t=414) [an alignment and of course i can](https://youtu.be/ipZPbcP2B0M?t=417) [add the alignment without the size as](https://youtu.be/ipZPbcP2B0M?t=421) [well so](https://youtu.be/ipZPbcP2B0M?t=424) [now it's going to be a smaller demo](https://youtu.be/ipZPbcP2B0M?t=425) [because that's](https://youtu.be/ipZPbcP2B0M?t=428) [not the uh 800 large](https://youtu.be/ipZPbcP2B0M?t=429) [but i can also add here](https://youtu.be/ipZPbcP2B0M?t=432) [left and then my image will](https://youtu.be/ipZPbcP2B0M?t=435) [appear on the left in fact the way i've](https://youtu.be/ipZPbcP2B0M?t=438) [built this is anything you put](https://youtu.be/ipZPbcP2B0M?t=442) [after the last pipe character is going](https://youtu.be/ipZPbcP2B0M?t=445) [to be](https://youtu.be/ipZPbcP2B0M?t=449) [added to this class](https://youtu.be/ipZPbcP2B0M?t=449) [so xcolidraw-svg](https://youtu.be/ipZPbcP2B0M?t=453) [and then it's going to be dash left dash](https://youtu.be/ipZPbcP2B0M?t=456) [right dicenter dash whatever you want](https://youtu.be/ipZPbcP2B0M?t=459) [so you can go](https://youtu.be/ipZPbcP2B0M?t=464) [and develop any kind of](https://youtu.be/ipZPbcP2B0M?t=468) [css for your purposes](https://youtu.be/ipZPbcP2B0M?t=472) [so those are the key changes](https://youtu.be/ipZPbcP2B0M?t=475) [and i hope you like it if you have](https://youtu.be/ipZPbcP2B0M?t=479) [additional ideas](https://youtu.be/ipZPbcP2B0M?t=481) [please submit those on github](https://youtu.be/ipZPbcP2B0M?t=483) [and i'll be happy to try to make them](https://youtu.be/ipZPbcP2B0M?t=486) [happen](https://youtu.be/ipZPbcP2B0M?t=490) [thank you](https://youtu.be/ipZPbcP2B0M?t=491)