Tworzenie PŁASZKI w SVG (z danymi dynamicznymi).

<p># TZ: rodzina badge'ów „Zweryfikowany sprzedawca” 123machinery</p><p><br /></p><p>Plik zaufania, który zweryfikowany dealer umieszcza na swojej stronie. Obrazek</p><p>przekazuje nasz serwer; część tekstu serwer podstawia **dynamicznie** (tłumaczenie na</p><p>język strony + rok rejestracji działalności dealera). Dlatego tekst „Zweryfikowany</p><p>sprzedawca” i „od … roku” **nie mogą być wkomponowane w obrazek** — to są żywe strefy tekstowe.</p><p><br /></p><p>**Jeden asset = wszystkie 6 języków + każdy dealer.** Projektant NIE robi wersji językowych i</p><p>przed-dealerowych — to robi nasz serwer. Projektant tworzy 4 assety (poniżej).</p><p><br /></p><p>---</p><p><br /></p><p>## 1. Format — ściśle wektorowy SVG</p><p><br /></p><p>- Wszystkie elementy — wektorowe. Metalik/chrom/odblaski — za pomocą SVG (gradienty, filtry).</p><p>- Logo `123 MACHINERY` i cały dekor — **w krzywych** (outline).</p><p>- Rastralne podkłady PNG/JPG **nie są akceptowane**.</p><p>- Przezroczyste tło wokół zaokrąglonego pliku.</p><p>- Plik jest samowystarczalny: własne tło + ramka, nie zależy od tła strony dealera.</p><p><br /></p><p>## 2. Co statyczne, co dynamiczne</p><p><br /></p><p>- **STATYKA** (rysuje projektant, zawsze taka sama): logo, ramka/plakietka, ikona</p><p> (tarcza/ptaszek), tło, dekor, odblaski.</p><p>- **DYNAMIKA** (podstawia serwer; projektant ustawia strefę i styl, tekst NIE jest rysowany):</p><p> - **LABEL** — „Zweryfikowany sprzedawca” (tłumaczone);</p><p> - **SINCE** — „od {ROK} roku” (ROK — 4 cyfry, własny dla każdego dealera; słowa wokół</p><p> również są tłumaczone).</p><p><br /></p><p>## 3. Strefy dynamiczne — obowiązkowe w każdym z 4 plików</p><p><br /></p><p>Dwie żywe `<text`-strefy, wyśrodkowane:</p><p><br /></p><p>| id | placeholder | zawartość |</p><p>|---|---|---|</p><p>| `sb-label` | `{{LABEL}}` | napis „Zweryfikowany sprzedawca” (na szerokim — w 2 linijki przez `<tspan>`) |</p><p>| `sb-since` | `{{SINCE}}` | „od {ROK} roku” |</p><p><br /></p><p>Wymagania dotyczące stref:</p><p>- `text-anchor="middle"`, stały punkt odniesienia w centrum strefy.</p><p>- Każda strefa ma określony box maks. szerokości. Kegiel dobrać tak, aby **najdłuższa</p><p> linia z tabeli lokalizacji (§5) zmieściła się w centrum bez obcięcia i nachodzenia**.</p><p>- Projektant w oddaniu wskazuje dla każdego pliku: box (x, y, w, h), kegiel,</p><p> line-height, kolor, anchor dla `sb-label` i `sb-since`.</p><p><br /></p><p>## 4. Czcionka dynamicznego tekstu</p><p><br /></p><p>- **Noto Sans, waga 700** (dla `sb-label`) i **600** (dla `sb-since`). Licencja OFL,</p><p> do osadzenia dozwolone. Pokrywa łacińskie + cyrylicę + gruzińskie + litewskie</p><p> diakrytyki (obowiązkowe — nasze lokalizacje .de/.tr/.ge/.lt). Plik czcionki dołączyć.</p><p>- Logo/dekor — w krzywych, czcionka logo dowolna.</p><p>- Styl żywego tekstu — **płaska jednolita wypełnienie** + dopuszczalny lekki cień (1px).</p><p> **Bez 3D-bevela/metalu** na żywym tekście (nie powtórzy się przy podstawieniu →</p><p> desynchronizacja). Cała objętość/metal — tylko na statyce (logo, ikona, ramka).</p><p><br /></p><p>## 5. Języki i linie (układać pod najdłuższe)</p><p><br /></p><p>| | linie |</p><p>|---|---|</p><p>| **LABEL** | ru „Zweryfikowany sprzedawca” · de „Verifizierter Händler” · en „Verified seller” · tr „Onaylı satıcı” · ka „შემოწმებული გამყიდველი” · lt „Patikrintas pardavėjas” |</p><p>| **SINCE** | ru „od {ROK} roku” · de „seit {ROK}” · en „since {ROK}” · tr „{ROK}’dan beri” · ka „{ROK} წლიდან” · lt „nuo {ROK}” |</p><p><br /></p><p>Najszersze: gruziński LABEL, rosyjski SINCE — przewidzieć zapas pod nie.</p><p><br /></p><p>## 6. Cztery warianty (2 rozmiary × 2 tematy)</p><p><br /></p><p>| Plik | viewBox | Wyświetlanie, px (szerokość) | Skład |</p><p>|---|---|---|---|</p><p>| `badge-wide-dark.svg` | `0 0 480 120` | 280–400 | logo + LABEL (2 linie) + SINCE + ikona |</p><p>| `badge-wide-light.svg` | `0 0 480 120` | 280–400 | to samo |</p><p>| `badge-compact-dark.svg` | `0 0 260 120` | 150–220 | logo + LABEL (1 linia) + SINCE (mniejsze) |</p><p>| `badge-compact-light.svg` | `0 0 260 120` | 150–220 | to samo |</p><p><br /></p><p>**Ciemne** (`-dark`): chromowana plakietka jak w referencjach; LABEL/SINCE — białe/jasnoszare,</p><p>niebieski akcent na cyfrach/ikonie.</p><p><br /></p><p>**Jasne** (`-light`): tło białe/jasnoszare + lekka ramka/cień. Logo — w</p><p>**ciemno-czytelnym** wariancie (srebro na białym się nie nadaje: niebieskie „123” zostawić,</p><p>„MACHINERY” — ciemne/nawigacyjne). LABEL/SINCE — ciemne (węglowe/nawigacyjne),</p><p>niebieski akcent. Kontrast tekstu do tła ≥ 4.5:1.</p><p><br /></p><p>**Kompaktowe** (`-compact-*`): zaprojektowane do czytelności od 150px → uprościć małe</p><p>odblaski/bevele. LABEL — w jedną linię, SINCE — mniejsze, ale obowiązkowe.</p><p><br /></p><p>Niebieski akcent — firmowy niebieski 123machinery (wziąć z logo, w oddaniu wskazać</p><p>dokładny HEX).</p><p><br /></p><p>## 7. Czego NIE robić</p><p><br /></p><p>- Nie wkomponowywać LABEL/SINCE w obrazek.</p><p>- Nie używać w dynamice czcionki bez pokrycia cyrylicy/łaciny/gruzińskiego.</p><p>- Nie robić tła nieprzezroczystym do krawędzi płótna.</p><p>- Nie robić rastrowych podkładów — tylko wektorowe.</p><p><br /></p><p>## 8. Oddanie (deliverables)</p><p><br /></p><p>- 4 pliki: `badge-wide-dark.svg`, `badge-wide-light.svg`, `badge-compact-dark.svg`,</p><p> `badge-compact-light.svg` — zoptymalizowane; logo/dekor w krzywych; strefy</p><p> `sb-label`/`sb-since` jako żywe `<text>` z placeholderami `{{LABEL}}`/`{{SINCE}}`.</p><p>- Plik czcionki (Noto Sans, potrzebne wagi, subset) + link do licencji.</p><p>- Źródło (Figma/AI), paleta (dokładne HEX).</p><p>- Podgląd: ciemne warianty na jasnym tle, jasne — na ciemnym, w maks. i min. rozmiarze.</p><p>- Dla każdego pliku — tabela stref (§3): box, kegiel, line-height, kolor, anchor.</p><p><br /></p><p>## 9. Odbiór</p><p><br /></p><p>Zamawiający podaje finalne linie wszystkich lokalizacji → sprawdzamy dla każdego z 4 plików i</p><p>każdego języka: LABEL/SINCE mieszczą się w centrum bez obcięcia/nachodzenia i są czytelne na</p><p>minimalnym rozmiarze; kontrast na jasnych ≥ 4.5:1.</p><p><br /></p><p>---</p><p><br /></p><p>*Integracja po stronie 123machinery jest gotowa przyjąć te assety: serwer wybiera</p><p>szablon według wariantu (temat/rozmiar) i podstawia `{{LABEL}}` (tłumaczenie według lokalizacji) i</p><p> `{{SINCE}}` (rok założenia dealera) w strefy `sb-label`/`sb-since`.*</p><p><br /></p>

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