Scratch Convert to Vector: почему остаются пиксели
Кнопка Convert to Vector Scratch меняет режим без трассировки растра. Проверьте точки костюма, выберите исправление и осмотрите импортированный SVG перед использованием.
На этой странице
- Что меняет кнопка
- Проверьте костюм тремя способами
- Выберите исправление под графику
- Сохраните растр, если пиксели входят в дизайн
- Перерисуйте простой костюм векторными средствами Scratch
- Трассируйте подходящий клипарт, если есть только растр
- Импортируйте SVG и проверьте центр костюма
- Частые вопросы
- Источники
Кнопка Convert to Vector Scratch не трассирует границы растрового костюма. Она переносит растр в векторный режим редактирования, где он может остаться одним объектом изображения. Поэтому костюм PNG может все еще выглядеть пикселизированным после нажатия. Текущий исходник редактора Scratch сохраняет растровый объект при операции, а не восстанавливает цветовые области контурами.
Для костюма, части которого нужно изменять или перекрашивать, нужны новые нарисованные или трассированные векторные фигуры. Для намеренной пиксельной графики сохранение растра может быть правильным. Сначала проверьте выбранный костюм, затем выберите нужный проекту объем восстановления.
Что меняет кнопка
Откройте вкладку Costumes спрайта и выберите проверяемый костюм. Кнопка называет режим, в который можно перейти: Convert to Vector появляется в растровом режиме, Convert to Bitmap — в векторном.
Смена режима дает другой набор инструментов редактирования. Она не означает, что теперь у каждого объекта есть редактируемая граница. Векторный костюм может содержать растр вместе с самостоятельно нарисованными фигурами. Это то же базовое различие, что в руководстве по SVG с растровыми изображениями.
Сохраните копию костюма перед экспериментом. В частности, перевод нарисованной векторной графики в растр сводит геометрию в пиксели. Обратное переключение не восстанавливает старые точки. Используйте Undo или сохраненный оригинал для их возвращения.
Проверьте костюм тремя способами
Одна рамка выделения мало что доказывает: она может быть и у картинки, и у группы векторных фигур. Проверьте именно ту часть, которую хотите редактировать. Диагностика ниже использует ракету, но животное, значок или школьная иконка подходят так же.
- Проверьте контур. В копии костюма выберите Reshape и нажмите край стабилизатора ракеты. Ищите точки вдоль края вместо маркеров вокруг прямоугольника. Если графика сгруппирована, выделите и используйте Ungroup при доступности перед проверкой части. Если не уверены в использовании Reshape, нарисуйте временный круг рядом и сравните его выделение.
- Проверьте один цвет. Выделите нос ракеты и попробуйте сменить Fill. Можно ли перекрасить область без изменения корпуса и других частей? Отмените пробную правку. Выделение всего изображения не дает независимо редактируемого носа, даже если картинка многоцветная.
- Проверьте в месте появления. Сравните костюм в редакторе с видом на Stage в размере проекта. Редактируемость контура и экранная четкость — отдельные проверки. Одного грубого предпросмотра Stage мало для трассировки уже пригодных контуров.

| Что найдено | Что проверить дальше | Полезный следующий шаг |
|---|---|---|
| Костюм из PNG, на цветных краях нет точек | Вы проверяете изображение, а не новую фигуру поверх него | Сохраните растр, перерисуйте или трассируйте исходник |
| Графика выделяется группой | Разгруппируйте при доступности и проверьте компонент | Редактируйте существующие фигуры до новой конвертации |
| У одних частей есть точки, другие остались картинками | Найдите конкретную область для редактирования | Восстановите только растровую область, если остальное работает |
| У фигуры есть точки, грубость только на Stage | Проверьте размер отображения и сравните с исходным SVG | Исследуйте отображение до замены графики |
Для последнего случая более широкая диагностика пикселизации SVG помогает отделить содержимое файла от отображения приложением.
Выберите исправление под графику
Сохраните растр, если пиксели входят в дизайн
Маленький пиксельный персонаж не становится лучшим костюмом лишь из-за векторного файла. Если ступенчатые края, маленькие глаза и ограниченная палитра намеренные, оценивайте в нужном размере. Храните оригинал и избегайте многократного изменения размера в эксперименте.
То же касается фото или нарисованного фона, где текстура важнее отдельных границ. Трассировка деталей в фигуры меняет графику. Сохранение квадратных пикселей в SVG отличается от сглаживания силуэта; наше руководство конвертации пиксельной графики объясняет выбор.
Перерисуйте простой костюм векторными средствами Scratch
Для ракеты из корпуса, носа, окна и стабилизаторов отдельное рисование частей дает прямой контроль структуры. Создайте новый нарисованный костюм в векторном режиме. Постройте основные части инструментами круга, прямоугольника, линии и кисти, затем настройте контуры через Reshape.
Двигайтесь от самого большого силуэта внутрь. Добавьте маленькое окно после четкой читаемости корпуса в нужном размере. Сохраните стабилизатор отдельным объектом, если будете перемещать его независимо. Это решение дизайна: автоматическая трассировка не выбирает части для будущих правок.
Можно строить фигуры и во внешнем векторном редакторе. Оригинальный урок векторной графики Scratch Pinnguaq показывает импорт SVG, выделение компонентов, изменение заливок и размещение элементов. Стремитесь к такой редактируемой структуре.
Трассируйте подходящий клипарт, если есть только растр
Трассировка полезна для сохранения плоской иллюстрации, когда повторное рисование каждого контура лишнее. Используйте самый четкий исходный PNG или JPG. Для этого PerfectVector может восстановить подходящий клипарт в виде контуров SVG, которые можно проверить до импорта в Scratch. Цель — получить редактируемые фигуры из исходной картинки; после импорта костюм все еще нужно проверить на редактируемость.
Трассировка следует видимым областям. Она может разделить стабилизатор на несколько частей или объединить соприкасающиеся области, которые нужны отдельно. Маленькие глаза, узкие зазоры и надписи требуют внимания. Для понимания восстановления начните с объяснения векторизации изображений.
Импортируйте SVG и проверьте центр костюма
Загрузчик костюмов Scratch принимает SVG как векторную графику. Импортируйте сам скачанный SVG, а не снимок или предпросмотр PNG.
- Выберите существующий спрайт и откройте Costumes. Через Upload Costume в выборе костюма добавьте SVG рядом с оригиналом. Используйте Upload Sprite, если нужен отдельный спрайт.
- Сравните импортированную графику с исходником. Проверьте границу, зазоры частей, глаза и фон. Если исходник уже имел векторные фигуры, исправьте или переэкспортируйте SVG вместо трассировки растрового предпросмотра.
- Повторите проверки контура и одного цвета. Подтвердите редактируемость нужных частей и отмените пробные правки. Удалите временные сравнительные фигуры из рабочей копии.
- Проверьте положение относительно центрального перекрестия редактора. Сохраняйте одну визуальную опорную точку связанных костюмов: для ракеты это может быть середина корпуса. При необходимости измените графику и сравните с оригинальным костюмом на Stage.
- Переключайтесь между оригиналом и заменой без перемещения спрайта. Ищите нежелательный скачок, изменение видимого размера или прямоугольник фона. Сохраните оригинал до удовлетворения заменой.
Scratch хранит центр поворота каждого костюма; код загрузки костюма получает его от рендерера, если он не задан. Поэтому совпадение видимого рисунка — лишь часть проверки импорта. Положение относительно центра тоже должно подходить проекту.
Частые вопросы
Делает ли Convert to Vector костюм Scratch менее пикселизированным? Он не трассирует и не сглаживает границы растра. Костюм меняет режим редактирования, а растровая графика может остаться объектом изображения. Для редактируемых границ перерисуйте графику или импортируйте SVG с трассированными контурами.
Почему можно двигать костюм, но нельзя менять форму краев? Перемещение объекта изображения не требует точек на видимой границе. Проверьте выделение группы, затем исследуйте компонент через Reshape. Сохраненный в векторном режиме растр не получает точки контура от переключения режима.
Создаст ли трассировка спрайта отдельные руки, ноги и другие подвижные части? Не предполагайте этого. Трассировка восстанавливает видимые области, которые могут отличаться от нужных подвижных частей. Проверьте импортированные фигуры и разделите или перерисуйте компоненты по необходимости.
Источники
- Scratch Foundation: bitmap conversion implementation — Показывает переход в векторный режим с сохранением растра.
- Scratch Foundation: costume file uploader — Подтверждает векторный формат ресурса при загрузке SVG-костюмов.
- Scratch Foundation: vector costume loading — Показывает получение центра поворота импортированным костюмом.
- Pinnguaq: Working With Vector Graphics Art in Scratch — Демонстрирует импорт SVG и редактирование отдельных фигур, заливок и размещения.
Если костюм начинался плоским растровым клипартом и нужны редактируемые границы, конвертируйте исходник в SVG с PerfectVector. Импортируйте новым костюмом, затем проверьте одну границу, один цвет и центр до замены оригинала.
Ещё из блога

SVG-изображения Graphviz: переносимая графика узлов
Добавьте SVG-графику в узел Graphviz, проверьте ссылку на изображение и сравните полный комплект ресурсов, перенесенную диаграмму и автономную копию для передачи.

SVG в Matplotlib: график и логотип в виде контуров
Экспортируйте график Matplotlib в SVG, добавьте отдельные контуры логотипа через svgutils и проверьте итоговый файл на встроенные пиксели, размещение и изменения шрифтов.