Images are SVGs, usually created with Excalidraw, which has a VSCode extension for editing in the IDE.
Do not commit binary images to the code base, Git was not designed to deal with binary file formats and it will blow up the size of the repository.
The web fonts embedded in the SVG output of Excalidraw do not load inside the GitHub Markdown renderer, so the images don't match exactly, but they still look good.
GitHub flavour markdown supports showing images only for light or dark themes.
If you want to provide an image for each theme, Excalidraw can switch themes in the export menu. By convention we use <image_name>.excalidraw.svg
for the light themed image, and <image_name>_dark.excalidraw.svg
for the dark themed image.
Directly importing the original Excalidraw SVG will result in it using the light theme (at least in the VSCode Excalidraw editor), so treat the original as the light theme image, and from that export another image (with background) in the dark theme, and name that <original_name>_dark.excalidraw.svg
. Then in the GitHub markdown file use it like
![An informative alt text](./images/my_drawing.excalidraw.svg#gh-light-mode-only)
![An informative alt text](./images/my_drawing_dark.excalidraw.svg#gh-dark-mode-only)