Практика · Логотипы
SVG или PNG для логотипа: какой формат выбрать
SVG удобен для масштабирования векторного знака, PNG — для размещения готового изображения там, где векторный формат не принимается. Обычно полезно сохранить оба варианта.
Короткий ответ
Для геометрического логотипа на сайте обычно удобен SVG: он сохраняет четкие контуры при изменении размера. PNG нужен там, где требуется растровая картинка или SVG не принимается. Храните оба формата и редактируемый исходник.
Повторите на своем названии
Как выбрать файл для конкретного места
- 1
Узнайте требования сайта
Откройте поле загрузки логотипа и посмотрите допустимые расширения и ограничения. Если платформа принимает SVG, проверьте его на тестовой странице. Если поддерживается только PNG, подготовьте картинку под фактический размер отображения. Не меняйте расширение файла вручную: это не конвертация.
- 2
Проверьте состав SVG
SVG может содержать векторные контуры, текст или вложенное растровое изображение. Поэтому расширение само по себе не гарантирует бесконечную четкость каждого элемента. В нашем редакторе текст переводится в контуры, но загруженная фотография остается растровой. Для чистого вектора используйте знаки и текстовые слои.
- 3
Экспортируйте PNG с запасом по плотности
Если логотип показывается шириной 200 CSS-пикселей, PNG шириной 400 пикселей часто удобен для экрана с плотностью 2x. Это пример расчета, не универсальный размер. Пропорции сохраняйте; не растягивайте квадратный файл в горизонтальную рамку. Оцените вес файла после экспорта.
- 4
Сохраните исходник отдельно
PNG и SVG для сайта не заменяют проект редактора. Сохраните JSON, чтобы позже поменять название, интервалы и слои. Упакуйте файлы с ясными именами: logo-header.svg, logo-header.png и project.json. Тогда сотрудник не выберет случайно фавиконку вместо основной версии.
SVG, PNG, JPEG и JSON: разные задачи
| Формат | Когда использовать |
|---|---|
| SVG | Контурный логотип, масштабирование; проверить поддержку платформы |
| PNG | Прозрачный растровый логотип, совместимость с полями загрузки |
| JPEG | Фотографии; не подходит, когда нужен прозрачный фон |
| JSON проекта | Возврат к слоям в редакторе; не является картинкой для сайта |
Что сохраняет SVG
SVG описывает линии, формы и расположение элементов. Векторные контуры можно увеличивать без превращения краев в крупные пиксели. Но встроенная фотография остается растровой: векторный контейнер не добавляет ей деталей.
В экспорте TOBIZ Studio текст переведен в контуры. Для отображения не требуется установленный шрифт. Это удобно для передачи готовой версии, но не означает, что слово можно изменить как обычный текст.
Когда нужен PNG
PNG — сетка пикселей с возможностью прозрачного фона. Он подходит для редакторов, которые не принимают SVG. Качество зависит от исходных размеров и увеличения при размещении.
Если изображение показывается шириной около 200 пикселей, файл вдвое крупнее часто дает запас для плотных экранов. Это ориентир, а не обязательная норма: сравнивайте четкость и вес конкретного файла.
Типичные ошибки и как их исправить
PNG переименован в SVG
Файл остается растровым. Нужен настоящий экспорт или векторная отрисовка.
Для шапки выбран favicon
Маленькая иконка не содержит достаточного числа пикселей для крупного вывода. Выберите основную версию.
Исходник удален после скачивания
Письмо и готовые картинки не всегда позволяют удобно изменить композицию. Храните JSON и понятную структуру файлов.
Разбор решения
Набор для сайта
Используйте horizontal.svg для шапки с поддержкой вектора, horizontal.png как совместимый вариант, compact.png для квадратного места и project.json для правок. JSON не загружают в поле изображения.
Как понять, что результат готов
Откройте оба файла вне редактора и установите один на тестовую страницу. Сравните края и фон при обычном масштабе, затем увеличьте страницу. Для печати уточняйте требования типографии отдельно: веб-комплект не является автоматически подготовленным печатным макетом.
- SVG содержит нужные контуры.
- Разрешения PNG достаточно.
- Композиция соответствует месту.
- Проект сохранен отдельно.
Частые вопросы
Что лучше по качеству?
Для векторного знака SVG удобнее масштабировать. PNG фиксирует пиксели, а увеличение не добавляет деталей.
Можно ли менять слово в SVG?
В экспортируемом файле текст становится контурами. Для изменения надписи используйте JSON-проект.
Документация по теме
Проверьте решение на своем логотипе
Соберите вариант, сравните его с примером и проверьте на нужном носителе. Редактирование и комплект файлов бесплатны; для получения файлов нужен email. Телефон необязателен.
Открыть конструктор логотипов