Как открыть файл SVG и сохранить его в PNG или JPG

Проще всего открыть файл SVG в браузере: перетащите его в Chrome, Edge, Firefox или Safari. В Windows нажмите на него правой кнопкой и выберите «Открыть с помощью» > «Microsoft Edge». На Mac выделите его в Finder и нажмите пробел для быстрого просмотра. Чтобы поделиться им или загрузить его, переведите его в PNG или JPG.

Что такое файл SVG?

SVG расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика). SVG это набор инструкций рисования, записанных текстом: линии, кривые, фигуры и цвета. Поэтому он остается четким при любом размере, и поэтому логотипы, значки и простые иллюстрации часто поставляются в SVG.

Это же объясняет путаницу при попытке его открыть. Просмотрщики фото ждут сетку пикселей, поэтому некоторые из них ничего не показывают или выдают ошибку. Браузеры, наоборот, рисуют SVG сами, потому что SVG это веб-стандарт. Если открыть файл в обычном текстовом редакторе, вы увидите сам код, который начинается примерно с <svg.

Многие места вообще не принимают загрузку SVG. Фото профиля в соцсетях, офисные документы, подписи в почте и большинство мессенджеров требуют PNG или JPG. Некоторые платформы блокируют SVG, потому что файл может содержать скрипты. Обычно именно поэтому людям нужна копия в PNG. Для быстрого сравнения распространенных форматов смотрите инструкцию PNG или JPG.

Как открыть файл SVG в Windows

1. Нажмите правой кнопкой на файл .svg в Проводнике.
2. Выберите «Открыть с помощью», затем «Microsoft Edge». Подойдут и Chrome или Firefox, если они установлены.
3. Чтобы сделать это по умолчанию, выберите «Выбрать другое приложение», укажите браузер и нажмите «Всегда».

Проводник может показывать SVG пустыми значками вместо миниатюр. Это исправляет бесплатное приложение Microsoft PowerToys. В его дополнениях для Проводника есть предпросмотр SVG для области просмотра и миниатюры SVG. Включите их в настройках PowerToys, затем перезапустите Проводник, если миниатюры не появились сразу.

Paint и классические просмотрщики фото ненадежны для SVG. Чтобы редактировать рисунок, используйте векторный редактор, например Inkscape, бесплатный и с открытым кодом.

Как открыть файл SVG на Mac

• Быстрый просмотр: выделите файл в Finder и нажмите пробел. Графика отрисуется в окне предпросмотра.
• Safari: перетащите файл на Safari или нажмите на него правой кнопкой и выберите «Открыть в программе» > «Safari». Любой другой браузер работает так же.
• Значки Finder и режим галереи показывают рисунок как миниатюру.

Preview не всегда открывал файлы SVG, в зависимости от версии macOS, поэтому Safari надежнее. Для редактирования Inkscape работает и на macOS.

Как открыть SVG на телефоне

Телефоны работают с SVG неодинаково, и касание файла может не показать ничего полезного. Самое быстрое решение перевести его в PNG в браузере телефона инструментом ниже. Затем смотрите PNG или делитесь им как любой другой картинкой.

Как редактировать SVG, а не только просматривать

Поскольку SVG это текст, для мелких изменений не нужна специальная программа. Откройте его в редакторе кода или текстовом редакторе, и вы сможете сменить цвет, отредактировав значение fill , например #000000 на #1a73e8. Сохраните, затем перезагрузите файл в браузере, чтобы проверить. Сначала сохраните копию оригинала, ведь один лишний символ может помешать файлу отображаться. Для чего-то большего, например перемещения фигур, правки текста или объединения логотипов, используйте Inkscape. Он открывает SVG напрямую и сохраняет обратно в SVG, так что по пути ничего не превращается в пиксели.

Как перевести SVG в PNG или JPG в браузере

Конвертер SVG в PNG/JPG отрисовывает файл в браузере и никогда его не загружает. Он работает и на телефоне, и на компьютере.

1. Откройте конвертер и добавьте файл SVG.
2. Выберите PNG или JPG, если нужен сплошной фон.
3. Задайте масштаб. Больший масштаб даёт больше пикселей и более чёткий результат на больших экранах.
4. Если у места загрузки есть лимит размера файла, задайте максимальный размер.
5. Сконвертируйте и скачайте изображение.

Браузеры очень хорошо рисуют SVG, поэтому результат обычно совпадает с тем, что вы видите, открыв SVG в Chrome, Edge, Firefox или Safari.

PNG сохраняет прозрачность, так что логотип с прозрачным фоном остается прозрачным. JPG заливает прозрачные области сплошным цветом. Поэтому для логотипов и значков обычно правильный выбор PNG, а JPG подходит, когда его требует форма.

Как перевести SVG в PNG в Inkscape

1. Откройте SVG в Inkscape.
2. Откройте окно экспорта через «Файл» > «Экспорт» или нажмите Shift+Ctrl+E.
3. Выберите, что экспортировать: всю страницу, рисунок, выделение или произвольную область.
4. Введите ширину или высоту в пикселях или задайте DPI. Остальные значения обновятся автоматически.
5. Выберите тип файла PNG, задайте имя файла и нажмите «Экспорт».

Inkscape по умолчанию экспортирует с прозрачным фоном. Для белого фона задайте цвет и непрозрачность фона в «Свойствах документа» (Shift+Ctrl+D) перед экспортом.

Какого размера должен быть PNG или JPG?

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

• Для сайта или приложения проверьте размер отображения, затем экспортируйте с вдвое большими шириной и высотой. Экраны с высокой плотностью пикселей покажут дополнительные детали.
• Для платформы со своими требованиями, например фото профиля или фавиконки, используйте точные размеры, которые она указывает.
• Для печати умножьте размер отпечатка в дюймах на DPI. При 300 DPI логотипу шириной 2 дюйма нужно 600 пикселей. Инструкция про 300 DPI объясняет расчет.

Экспортируйте несколько размеров из одного SVG, когда они понадобятся. Храните SVG как мастер-файл.

Частые проблемы при переводе SVG в PNG

Шрифты выглядят неправильно

SVG может ссылаться на шрифт по имени, не включая его. Если этот шрифт не установлен на устройстве, где идет конвертация, используется запасной шрифт. Переведите текст в кривые в графической программе перед сохранением SVG. В Inkscape выделите текст и используйте «Контур» > «Оконтурить объект».

Части изображения не хватает

Некоторые SVG ссылаются на внешние изображения или таблицы стилей вместо того, чтобы встраивать их. Конвертер, который не может до них добраться, рисует SVG без них. Экспортируйте SVG заново из исходной графической программы со встроенными изображениями.

У PNG чёрная или белая рамка

Так бывает, когда на выходе JPG или когда в самом SVG есть фоновый прямоугольник. Выберите PNG и проверьте исходник на залитую фигуру позади рисунка.

PNG выглядит размытым или файл большой

Размытый PNG был экспортирован меньше, чем размер, в котором он показывается. Экспортируйте снова с большей шириной, ведь увеличение PNG не вернет детали. Если файл тяжелый, пропустите его через инструмент сжатия PNG.

Обратное направление, из пиксельного изображения в SVG, требует трассировки и работает только для простых рисунков. Инструкция по переводу JPG и PNG в SVG объясняет, чего ожидать.

Частые вопросы