Tworzenie PŁASZKI w SVG (z danymi dynamicznymi).
Pomysł jest taki:
Jest logo w SVG, trzeba zrobić z niego planszę ze znakiem zaufania. Przy tym słowa i rok będą podstawiane przez serwer, my ich nie rysujemy, tylko robimy placeholdery pod nie.
Załączyłem TZ, które pisze AI pod realizację serwerową.
Załączam również kilka plików dla zrozumienia ogólnego, jak to PRZYKŁADOWO powinno wyglądać. Akcent powinien być na frazie "sprawdzony dealer" i na roku
# ТЗ: семейство бейджей «Проверенный продавец» 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`.*
Załączniki 1
-
Dzień dobry! Zajmę się twoim zamówieniem — zadanie jest jasne: pasek zaufania z twojego SVG z żywymi strefami pod "zweryfikowany dealer" i rokiem. Jestem gotów do pracy. Proszę o informację na temat pożądanego terminu i budżetu?\nPortfolio:
Freelancehunt
Podobne wykonane zlecenie: Логотип до шаурмічної
-
489 1 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
-
1370 16 0 1 Dzień dobry! Jakościowo przeniosę plik, mam doświadczenie w podobnych projektach. Piszcie, jestem cały czas w kontakcie, nie zawyżam ceny, nie przekraczam terminów. Portfolio:
Freelancehunt
-
3729 135 4 9 Cześć!\nJestem gotów zająć się twoim projektem.\nPortfolio w profilu
Freelancehunt oraz na Behance
Behance\nPisz — będę zadowolony ze współpracy.
-
468 3 1 Cześć! Zapoznałam się z zadaniem i mam pomysły na realizację planszy.
Portfolio:Freelancehunt
-
2701 182 4 2 Jestem gotowa wykonać zadanie. Portfolio można zobaczyć w profilu.
-
843 6 0 Dzień dobry, mam duże doświadczenie w pracy z grafiką wektorową, mogę teraz stworzyć w pełni edytowalny plik SVG. Portfolio:
Google Drive
-
1481 9 0 Mamy doświadczenie w dynamicznym generowaniu grafiki SVG po stronie serwera. Realizujemy to poprzez przygotowanie szablonu z miejscami na dane, które będą poprawnie renderowane po podstawieniu danych. Struktura pliku będzie zoptymalizowana do szybkiego przetwarzania przez serwer bez utraty jakości wyświetlania. Jesteśmy gotowi przystąpić do zadania od razu po uzgodnieniu szczegółów.
-
4392 74 3 4 Dzień dobry, mogę wykonać w ciągu najbliższych 2 godzin. Wektorowy makiet figma, z dynamicznym tekstem, z możliwością edytowania i eksportu do svg.
-
тхт читається некоректно.
-
Исправлено! Спасибо