GitHub Camo Sanitize Rules & Best Practices

Why GitHub Camo Exists#

GitHub displays README files written by millions of untrusted third parties. To protect users from IP tracking, cross-site scripting (XSS), and SSL downgrade attacks, GitHub proxies all README media through its Camo CDN:

https://camo.githubusercontent.com/<hash>/<hex-encoded-origin-url>

Camo parses the incoming SVG XML tree and strips any element or attribute that could potentially execute malicious code.

Forbidden & Stripped SVG Elements#

The following items are completely removed by the Camo sanitizer:

• `<script>` tags: Any embedded JavaScript will result in the entire image being dropped or sanitized.
• `<foreignObject>`: Cannot be used to embed HTML within SVGs.
• External stylesheets: <link rel="stylesheet"> or @import statements.
• Inline event handlers: onclick, onload, onmouseover.

Safe 60fps Animation Techniques#

To animate SVGs through Camo safely, use only embedded CSS `@keyframes` targeting GPU-accelerated CSS properties:

1. `transform`: translate3d(), rotate(), scale().
2. `opacity`: 0.0 to 1.0 fades.
3. `stroke-dasharray` & `stroke-dashoffset`: For neon border beam and laser tracing animations.

Always declare:

transform-box: fill-box;
transform-origin: center;

to ensure animations scale consistently across all device pixel densities.

System Font Fallback Invariant#

Because Camo blocks external Google Fonts or web fonts, all text elements in MonoForge SVGs must specify system monospace font stacks:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;