45 lines
2.2 KiB
Markdown
45 lines
2.2 KiB
Markdown
# Brand-Assets
|
||
|
||
## Was hier liegt
|
||
|
||
| Datei | Inhalt | Verwendung |
|
||
|---|---|---|
|
||
| `logo-mark.svg` | Das W-Monogramm mit Wolfskopf, aus dem Original-Logo der Kundin abgeleitet | Header, Hero, WOLF-Prinzip, Footer, Vorhang beim Seitenwechsel, 404 |
|
||
| `logo-full.png` | Komplettes Lockup (Monogramm + Wortmarke) auf Tinte, 2400 × 1260 px | Social-Preview (OpenGraph), z. B. beim Teilen auf LinkedIn |
|
||
|
||
## Wie `logo-mark.svg` entstanden ist
|
||
|
||
Quelle: `v3-anelia-wolf-gold.svg` der Kundin. Daraus wurde für die Website aufbereitet:
|
||
|
||
- C2PA-Metadaten entfernt. Der Block war rund 16 KB groß und wird auf **jeder** Seite
|
||
mit eingebettet, weil das Monogramm inline im HTML steht.
|
||
- Weißes Hintergrundrechteck entfernt, damit die Marke auf Tinte und auf Elfenbein sitzt.
|
||
- Wortmarke entfernt. „ANELIA WOLF“ steht auf der Website als echter Text (Jost, gesperrt),
|
||
nicht als Bild: das bleibt bei jeder Fenstergröße scharf, ist vorlesbar und lässt sich
|
||
markieren. Das Original-Lockup steckt in `logo-full.png`.
|
||
- `viewBox` auf die Marke beschnitten, damit sie in ihrem Feld keine Luft verschenkt.
|
||
- Die schwarzen Flächen auf `currentColor` gestellt. Dadurch ist das W auf dunklen Flächen
|
||
elfenbein und auf hellen tinte, ohne zweite Datei. Der Wolf behält seinen Goldverlauf.
|
||
- Feste IDs vergeben: `v-left`, `v-right`, `wolf`. `BrandMark.tsx` hängt daran die Klassen
|
||
für die Animation.
|
||
|
||
**Die Original-Koordinaten wurden nicht verändert**, nur der Ausschnitt. Der Goldverlauf
|
||
(`userSpaceOnUse`) trifft deshalb exakt dieselben Stellen wie im Original.
|
||
|
||
## Wenn ein neues Logo kommt
|
||
|
||
Die Datei einfach ersetzen. Voraussetzungen:
|
||
|
||
- **SVG, kein `<script>`.** Ein Skript bricht den Build absichtlich ab, mit Fehlermeldung.
|
||
Die Datei wird inline eingebettet, auf einer Seite, die „keine externen Skripte“ zusagt.
|
||
- Kein Hintergrundrechteck, transparent.
|
||
- Die schwarzen Teile auf `fill="currentColor"`, der Wolf auf seinen Verlauf.
|
||
- IDs `v-left`, `v-right`, `wolf` vergeben, sonst wird in DOM-Reihenfolge animiert.
|
||
|
||
Fehlt die Datei ganz, zeichnet die Website automatisch die eigene Näherung
|
||
(`src/components/brand/WolfMark.tsx`). Nichts bricht.
|
||
|
||
## Portraits
|
||
|
||
Fotos von Anelia gehören nach `public/photos/`, siehe die dortige README.
|