css-in-readme-like-wat

This project demonstrates a clever workaround to style text and images in GitHub README files using CSS—something GitHub normally doesn't allow directly.

GitHub's README files use Markdown, which has very limited styling options. You can make text bold or italic, but you can't control colors, fonts, layouts, or positioning the way you would on a regular website. This project shows you how to get around that limitation by embedding an SVG image file instead of plain text. SVG is a special image format that can contain styled text and graphics, so by creating your content as an SVG file and linking to it in your README, you effectively get full CSS styling power while still appearing within your README.

The example in this repository includes a header.svg file—an image that could contain styled headlines, colorful text, custom fonts, or any visual design you want. When you reference it in your README using a simple image link, visitors see your beautifully styled content instead of plain Markdown text. The trick is that SVG files are essentially XML with CSS capabilities, so you can design exactly what you want using web styling techniques.

This is useful if you're building a project and want your GitHub README to look polished and visually distinct. Instead of being limited to black-and-white Markdown, you could create a branded header image with your project's colors, logo, and custom typography. It's particularly handy for projects where first impressions matter—open-source libraries, developer tools, or portfolio projects where you want to stand out.

The tradeoff is that maintaining styled content as SVG files is more effort than writing plain Markdown, and the files are harder to update quickly. But for key visual elements like titles or badges, the extra polish can be worth it.