Creation of a PLASHKA in SVG (with dynamic data).

# Technical Specification: "Verified Seller" Badge Family 123machinery

A trust badge that a verified dealer places on their website. The image

is provided by our server; part of the text is inserted by the server **dynamically** (translation according to

the page language + the year of the dealer's business registration). Therefore, the text "Verified

Seller" and "since ..." **cannot be baked into the image** — these are live text areas.

**One asset = all 6 languages + any dealer.** The designer does NOT create language and

dealer-specific versions — this is done by our server. The designer creates 4 assets (below).

---

## 1. Format — strictly vector SVG

- All elements are vector. Metallic/chrome/gloss effects are created using SVG (gradients, filters).

- The logo `123 MACHINERY` and all decorations must be **in curves** (outline).

- Raster backgrounds PNG/JPG **are not accepted**.

- Transparent background around the rounded badge.

- The badge is self-sufficient: its own background + border, does not depend on the dealer's website background.

## 2. Both static and dynamic

- **STATIC** (drawn by the designer, always the same): logo, frame/badge, icon

(shield/checkmark), background, decoration, gloss effects.

- **DYNAMIC** (inserted by the server; the designer sets the area and style, text is NOT drawn):

- **LABEL** — "Verified Seller" (translated);

- **SINCE** — "since {YEAR}" (YEAR — 4 digits, unique to each dealer; surrounding words

are also translated).

## 3. Dynamic areas — mandatory in each of the 4 files

Two live `<text>` areas, centered:

| id | placeholder | content |

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

| `sb-label` | `{{LABEL}}` | text "Verified Seller" (on wide — in 2 lines via `<tspan>`) |

| `sb-since` | `{{SINCE}}` | "since {YEAR}" |

Requirements for the areas:

- `text-anchor="middle"`, fixed anchor point at the center of the area.

- Each area has a specified max-width box. The font size should be adjusted so that **the longest

line from the locales table (§5) fits centered without clipping or overlapping**.

- The designer specifies for each file: box (x, y, w, h), font size,

line-height, color, anchor for `sb-label` and `sb-since`.

## 4. Font for dynamic text

- **Noto Sans, weight 700** (for `sb-label`) and **600** (for `sb-since`). OFL license,

embedding allowed. Covers Latin + Cyrillic + Georgian + Lithuanian

diacritics (mandatory — our locales .de/.tr/.ge/.lt). Font subset to be attached.

- Logo/decor — in curves, logo font can be any.

- Style of live text — **flat solid fill** + light shadow (1px) is allowed.

**No 3D bevel/metal** on live text (it will not repeat upon substitution →

desynchronization). All volume/metal effects are only on static (logo, icon, frame).

## 5. Languages and strings (layout for the longest)

| | strings |

|---|---|

| **LABEL** | ru "Verified Seller" · de "Verifizierter Händler" · en "Verified seller" · tr "Onaylı satıcı" · ka "შემოწმებული გამყიდველი" · lt "Patikrintas pardavėjas" |

| **SINCE** | ru "since {YEAR}" · de "seit {YEAR}" · en "since {YEAR}" · tr "{YEAR}’dan beri" · ka "{YEAR} წლიდან" · lt "nuo {YEAR}" |

The widest: Georgian LABEL, Russian SINCE — reserve space for them.

## 6. Four variants (2 sizes × 2 themes)

| File | viewBox | Display, px (width) | Composition |

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

| `badge-wide-dark.svg` | `0 0 480 120` | 280–400 | logo + LABEL (2 lines) + SINCE + icon |

| `badge-wide-light.svg` | `0 0 480 120` | 280–400 | same |

| `badge-compact-dark.svg` | `0 0 260 120` | 150–220 | logo + LABEL (1 line) + SINCE (smaller) |

| `badge-compact-light.svg` | `0 0 260 120` | 150–220 | same |

**Dark** (`-dark`): chrome badge as in references; LABEL/SINCE — white/light gray,

blue accent on numbers/icon.

**Light** (`-light`): white/light gray background + light border/shadow. Logo — in

**dark-readable** version (silver on white is not suitable: keep blue "123",

"MACHINERY" — dark/navigation). LABEL/SINCE — dark (charcoal/navigation),

blue accent. Text contrast to background ≥ 4.5:1.

**Compact** (`-compact-*`): designed for readability from 150px → simplify small

gloss effects/bevels. LABEL — in one line, SINCE — smaller, but mandatory.

Blue accent — corporate blue 123machinery (take from the logo, specify

exact HEX in the submission).

## 7. What NOT to do

- Do not bake LABEL/SINCE into the image.

- Do not use a font in dynamic text that does not cover Cyrillic/Latin/Georgian.

- Do not make the background opaque to the edges of the canvas.

- Do not create raster backgrounds — only vector.

## 8. Submission (deliverables)

- 4 files: `badge-wide-dark.svg`, `badge-wide-light.svg`, `badge-compact-dark.svg`,

`badge-compact-light.svg` — optimized; logo/decor in curves; areas

`sb-label`/`sb-since` as live `<text>` with placeholders `{{LABEL}}`/`{{SINCE}}`.

- Font file (Noto Sans, required weights, subset) + link to the license.

- Source file (Figma/AI), palette (exact HEX).

- Preview: dark variants on light background, light ones on dark, in max. and min. size.

- For each file — table of areas (§3): box, font size, line-height, color, anchor.

## 9. Acceptance

The client provides the final strings for all locales → we check for each of the 4 files and

each language: LABEL/SINCE fit centered without clipping/overlapping and are readable at

minimum size; contrast on light backgrounds ≥ 4.5:1.

---

*Integration on the side of 123machinery is ready to accept these assets: the server selects

the template according to the variant (theme/size) and substitutes `{{LABEL}}` (translation according to locale) and

`{{SINCE}}` (year of dealer's establishment) in the areas `sb-label`/`sb-since`.*

# ТЗ: семейство бейджей «Проверенный продавец» 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`.*