Створення ПЛАШКИ в SVG (з динамічними даними).

# ТЗ: сімейство бейджів «Перевірений продавець» 123machinery

Плашка довіри, яку верифікований дилер ставить на свій сайт. Картинку

віддає наш сервер; частина тексту сервер підставляє **динамічно** (переклад під

мову сторінки + рік реєстрації бізнесу дилера). Тому текст «Перевірений

продавець» і «з … року» **запікати в картинку не можна** — це живі текстові зони.

**Один ассет = всі 6 мов + будь-який дилер.** Дизайнер НЕ робить мовні і

пер-дилерські версії — це робить наш сервер. Дизайнер робить 4 ассета (нижче).

---

## 1. Формат — строго векторний SVG

- Усі елементи — вектор. Металлік/хром/блики — засобами SVG (градієнти, фільтри).

- Логотип `123 MACHINERY` і весь декор — **в кривих** (outline).

- Растрові підкладки PNG/JPG **не приймаються**.

- Прозорий фон навколо скругленої плашки.

- Плашка самодостатня: свій фон + рамка, не залежить від фону сайту дилера.

## 2. Що статика, що динаміка

- **СТАТИКА** (малює дизайнер, однакова завжди): логотип, рамка/плашка, іконка

(щит/галка), фон, декор, блики.

- **ДИНАМИКА** (підставляє сервер; дизайнер задає зону і стиль, текст НЕ малює):

- **LABEL** — «Перевірений продавець» (перекладається);

- **SINCE** — «з {РІК} року» (РІК — 4 цифри, свій у кожного дилера; слова навколо

теж перекладаються).

## 3. Динамічні зони — обов'язкові в кожному з 4 файлів

Дві живі `<text>`-зони, центровані:

| id | плейсхолдер | вміст |

|---|---|---|

| `sb-label` | `{{LABEL}}` | надпис «Перевірений продавець» (на wide — в 2 рядки через `<tspan>`) |

| `sb-since` | `{{SINCE}}` | «з {РІК} року» |

Вимоги до зон:

- `text-anchor=

# ТЗ: семейство бейджей «Проверенный продавец» 123machinery

Плашка доверия, которую верифицированный дилер ставит на свой сайт. Картинку

отдаёт наш сервер; часть текста сервер подставляет **динамически** (перевод под

язык страницы + год регистрации бизнеса дилера). Поэтому текст «Проверенный

продавец» и «с … года» **запекать в картинку нельзя** — это живые текстовые зоны.

**Один ассет = все 6 языков + любой дилер.** Дизайнер НЕ делает языковые и

пер-дилерские версии — это делает наш сервер. Дизайнер делает 4 ассета (ниже).

---

## 1. Формат — строго векторный SVG

- Все элементы — вектор. Металлик/хром/блики — средствами SVG (градиенты, фильтры).

- Логотип `123 MACHINERY` и весь декор — **в кривых** (outline).

- Растровые подложки PNG/JPG **не принимаются**.

- Прозрачный фон вокруг скруглённой плашки.

- Плашка самодостаточна: свой фон + рамка, не зависит от фона сайта дилера.

## 2. Что статика, что динамика

- **СТАТИКА** (рисует дизайнер, одинакова всегда): логотип, рамка/плашка, иконка

  (щит/галка), фон, декор, блики.

- **ДИНАМИКА** (подставляет сервер; дизайнер задаёт зону и стиль, текст НЕ рисует):

  - **LABEL** — «Проверенный продавец» (переводится);

  - **SINCE** — «с {ГОД} года» (ГОД — 4 цифры, свой у каждого дилера; слова вокруг

    тоже переводятся).

## 3. Динамические зоны — обязательны в каждом из 4 файлов

Две живые `<text>`-зоны, центрированные:

| id | плейсхолдер | содержимое |

|---|---|---|

| `sb-label` | `{{LABEL}}` | надпись «Проверенный продавец» (на wide — в 2 строки через `<tspan>`) |

| `sb-since` | `{{SINCE}}` | «с {ГОД} года» |

Требования к зонам:

- `text-anchor="middle"`, фиксированная опорная точка по центру зоны.

- У каждой зоны — заданный бокс макс-ширины. Кегль подобрать так, чтобы **самая

  длинная строка из таблицы локалей (§5) вписалась по центру без обрезки и наезда**.

- Дизайнер в сдаче указывает по каждому файлу: бокс (x, y, w, h), кегль,

  line-height, цвет, anchor для `sb-label` и `sb-since`.

## 4. Шрифт динамического текста

- **Noto Sans, вес 700** (для `sb-label`) и **600** (для `sb-since`). Лицензия OFL,

  встраивание разрешено. Покрывает латиницу + кириллицу + грузинский + литовские

  диакритики (обязательно — наши локали .de/.tr/.ge/.lt). Шрифт-сабсет приложить.

- Логотип/декор — в кривых, шрифт логотипа любой.

- Стиль живого текста — **плоская сплошная заливка** + допустима лёгкая тень (1px).

  **Без 3D-бевела/металла** на живом тексте (он не повторится при подстановке →

  рассинхрон). Весь объём/металл — только на статике (логотип, иконка, рамка).

## 5. Языки и строки (верстать под самые длинные)

| | строки |

|---|---|

| **LABEL** | ru «Проверенный продавец» · de «Verifizierter Händler» · en «Verified seller» · tr «Onaylı satıcı» · ka «შემოწმებული გამყიდველი» · lt «Patikrintas pardavėjas» |

| **SINCE** | ru «с {ГОД} года» · de «seit {ГОД}» · en «since {ГОД}» · tr «{ГОД}’dan beri» · ka «{ГОД} წლიდან» · lt «nuo {ГОД}» |

Самые широкие: грузинский LABEL, русский SINCE — закладывать запас под них.

## 6. Четыре варианта (2 размера × 2 темы)

| Файл | viewBox | Показ, px (ширина) | Состав |

|---|---|---|---|

| `badge-wide-dark.svg` | `0 0 480 120` | 280–400 | логотип + LABEL (2 строки) + SINCE + иконка |

| `badge-wide-light.svg` | `0 0 480 120` | 280–400 | то же |

| `badge-compact-dark.svg` | `0 0 260 120` | 150–220 | логотип + LABEL (1 строка) + SINCE (мельче) |

| `badge-compact-light.svg` | `0 0 260 120` | 150–220 | то же |

**Тёмные** (`-dark`): хром-плашка как в референсах; LABEL/SINCE — белые/светло-серые,

голубой акцент на цифрах/иконке.

**Светлые** (`-light`): фон белый/светло-серый + лёгкая рамка/тень. Логотип — в

**тёмно-читаемом** варианте (серебро на белом не годится: синий «123» оставить,

«MACHINERY» — тёмный/навигационный). LABEL/SINCE — тёмные (угольный/навигационный),

голубой акцент. Контраст текста к фону ≥ 4.5:1.

**Компактные** (`-compact-*`): рассчитаны на читаемость от 150px → упростить мелкие

блики/бевелы. LABEL — в одну строку, SINCE — мельче, но обязателен.

Голубой акцент — фирменный синий 123machinery (взять из логотипа, в сдаче указать

точный HEX).

## 7. Что НЕ делать

- Не запекать LABEL/SINCE в изображение.

- Не использовать в динамике шрифт без покрытия кириллицы/латиницы/грузинского.

- Не делать фон непрозрачным до краёв холста.

- Не делать растровые подложки — только вектор.

## 8. Сдача (deliverables)

- 4 файла: `badge-wide-dark.svg`, `badge-wide-light.svg`, `badge-compact-dark.svg`,

  `badge-compact-light.svg` — оптимизированные; логотип/декор в кривых; зоны

  `sb-label`/`sb-since` как живые `<text>` с плейсхолдерами `{{LABEL}}`/`{{SINCE}}`.

- Шрифт-файл (Noto Sans, нужные веса, сабсет) + ссылка на лицензию.

- Исходник (Figma/AI), палитра (точные HEX).

- Превью: тёмные варианты на светлом фоне, светлые — на тёмном, в макс. и мин. размере.

- По каждому файлу — таблица зон (§3): бокс, кегль, line-height, цвет, anchor.

## 9. Приёмка

Заказчик даёт финальные строки всех локалей → проверяем по каждому из 4 файлов и

каждому языку: LABEL/SINCE вписываются по центру без обрезки/наезда и читаются на

минимальном размере; контраст на светлых ≥ 4.5:1.

---

*Интеграция на стороне 123machinery готова принять эти ассеты: сервер выбирает

шаблон по варианту (тема/размер) и подставляет `{{LABEL}}` (перевод по локали) и

`{{SINCE}}` (год основания дилера) в зоны `sb-label`/`sb-since`.*