Skip to content

Latest commit

 

History

History

images

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

Images

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.

Excalidraw Limitations

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.

Light and Dark Themes

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.

Recommended Workflow

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)