В прошлый раз говорил про Code-to-Chart – когда ИИ пишет код для графика вместо того, чтобы рисовать картинку. Сегодня – соседний приём: SVG-инфографика.

Ситуация из жизни. Менеджер готовит презентацию с таймлайном проекта: 5 этапов, даты, зависимости. Просит ИИ нарисовать картинку. Получает растровое изображение 1024x1024. Текст мелкий, при увеличении мылится, редактировать нельзя. В PowerPoint выглядит как скриншот из чужой презентации.

SVG – это код, описывающий фигуры и текст координатами. Прямоугольники, стрелки, подписи – всё вычислено, ничего не «галлюцинировано». Масштабируется без потери качества. Открывается в Figma, Google Slides, PowerPoint. Любой элемент можно подвинуть или перекрасить руками.

Где это работает лучше всего: – таймлайн проекта с этапами и датами – процесс из нескольких шагов (онбординг, релизный пайплайн) – сравнительная матрица или таблица как визуал для слайда

Промпт, который можно вставить прямо сейчас:

Сгенерируй SVG-код горизонтального таймлайна проекта с 5 этапами: 1. Исследование (янв–фев) 2. Прототип (мар) 3. Разработка MVP (апр–июн) 4. Бета-тест (июл) 5. Релиз (авг)

Требования: – Горизонтальная линия с кругами-маркерами на каждом этапе – Название этапа сверху, даты снизу – Текущий этап (Разработка MVP) выделен цветом – Размер 1000x300, шрифт sans-serif – Деловой минималистичный стиль – Верни только SVG-код, без обёрток

Claude, ChatGPT и DeepSeek справляются с этим одинаково хорошо – SVG-синтаксис простой, модели его знают.

Как использовать результат: копируете SVG-код в файл timeline.svg, открываете в браузере для проверки. Дальше – импорт в Figma (Ctrl+V прямо из редактора) или вставка в Google Slides через «Вставка – Изображение».

Проверка: откройте SVG-код и убедитесь, что все 5 этапов на месте и даты совпадают с вашими. ИИ иногда пропускает последний элемент или меняет порядок дат.

Правило то же, что и с Code-to-Chart: если визуал идёт в презентацию для заказчика – генерируйте код, а не картинку. Результат редактируемый, точный и не стыдно показать.


В этом посте были ссылки, но мы их удалили по правилам Сетки

В прошлый раз говорил про Code-to-Chart – когда ИИ пишет код для графика вместо того, чтобы рисовать картинку. Сегодня – соседний приём: SVG-инфографика.
Ситуация из жизни | Сетка — социальная сеть от hh.ru В прошлый раз говорил про Code-to-Chart – когда ИИ пишет код для графика вместо того, чтобы рисовать картинку. Сегодня – соседний приём: SVG-инфографика.
Ситуация из жизни | Сетка — социальная сеть от hh.ru