Most GitHub projects have a problem: their documentation is often bare, lacking images or illustrations that show a project visually or otherwise document its design. But this is not a limitation of how GitHub works. The public-facing output of open source projects can be designed.
Scalable Vector Graphics are amazing – regardless of screen density or size of image, the result will be sharp. Plenty of open source projects include PNG images embedded in their readme documents, which are rendered on GitHub pages as HTML (processed with Markdown). An SVG in a GitHub readme can be higher resolution than the sharpest PNG source, limited only by the resolution of the screen that it is displayed on.
An SVG in a readme can’t be included without consideration.
style="display: block; width: 144px; margin: 0 auto" (to limit the width and center a block element) will have no effect, since the
style tag gets stripped by GitHub’s HTML processing filter.
<img> element with an SVG source without a specified width will be set by GitHub at
max-width: 100%, which will harm the output of the file, since the SVG at 100% width will almost certainly be oversized for the context. However, setting
height attributes on an element is allowed. Limiting the element size with these attributes allows resizing and even rudimentary layout constraints for images.