# Ringier Brand Snippets

Ready-to-use HTML fragments containing inline `<svg>` elements. **Read and copy the `<svg>` element directly into your output** — do not create empty placeholder containers.

## Logo Snippets

| File | Use When | Flag Color | Source Asset |
|---|---|---|---|
| `flag-logo-cyan.html` | Page bg is magenta, yellow, or warm-toned photo | Cyan | `Ringier_FlagC_RGB.svg` |
| `flag-logo-magenta.html` | Page bg is cyan, yellow, marine, black, or dark photo (most common) | Magenta | `Ringier_FlagM_RGB.svg` |
| `flag-logo-yellow.html` | Page bg is magenta, cyan, or cool-toned photo | Yellow | `Ringier_FlagY_RGB.svg` |
| `standard-logo.html` | White backgrounds only (title slides, reports) | N/A | `Ringier_RGB.svg` |

Each flag snippet is a self-contained `<svg>` element with the complete flag logo (coloured triangle + white rectangle + Ringier logo) rendered inline. No wrapper div is needed.

## How to Use

1. **Read** the appropriate snippet file for your context
2. **Copy** the `<img>` tag into your output
3. **Adjust** the `width` style if needed (default: 154px for 1920x1080)

## Flag Color Quick Reference

| Page Background | Flag Snippet |
|---|---|
| Magenta `#e6007e` | `flag-logo-cyan.html` or `flag-logo-yellow.html` |
| Cyan `#009fe3` | `flag-logo-magenta.html` or `flag-logo-yellow.html` |
| Yellow `#ffde14` | `flag-logo-magenta.html` (preferred) |
| Marine `#162d46` | `flag-logo-magenta.html` |
| Black `#000000` | `flag-logo-magenta.html` |
| Photo / busy | Choose flag color that provides best contrast with dominant tones |

## Flag Logo Sizing

| Format | Flag Width |
|---|---|
| 1920x1080px (presentation/video) | 154px |
| 1080x1080px (social media square) | 216px |

## SVG Preferred for HTML

All snippets use inline **SVG** elements rather than `<img>` tags or PNG. Inline SVG is the preferred format for all HTML output because:
- Scales perfectly at any size without pixelation
- No encoding overhead — the SVG is pasted directly as markup
- Crisp rendering on all screen densities (Retina, 4K, etc.)
- Allows CSS and JS interaction with logo elements if needed
