Конвертер SVG в PNG

Что такое SVG и почему растеризация идёт только в одну сторону

SVG — это не картинка. Это описание картинки: список фигур, контуров, цветов и текста, каждый со своими координатами, записанный в текстовый файл, который что-то другое читает и по которому рисует. JPG или PNG — противоположность: сетка пикселей, решённая раз и навсегда в момент записи файла. Эта единственная разница стоит за всем, что есть на этой странице, включая тот единственный вопрос, который этот конвертер обязан вам задать и которого два других конвертера не задают никогда.

• Это текст, который можно прочитать. Откройте SVG в любом текстовом редакторе — и фигуры выписаны прямо перед вами; так же вы и сами можете проверить, какой размер файл о себе заявляет и на что он ссылается.
• Разрешения у него нет вовсе. Один и тот же файл — и чёткий значок размером с точку, и чёткий плакат на стене, потому что рисунок каждый раз заново вычисляет тот, кто его показывает, а не берёт откуда-то готовым.
• Хорош он для плоской графики: логотипы, значки, схемы, диаграммы, карты — всё, что нарисовано, а не снято. Безнадёжен он для фотографии, у которой нет фигур, поддающихся описанию, и на которую ушло бы по строке файла на каждый пиксель.
• Растеризация такого файла — это то, чем занимается эта страница, и причина почти всегда одна: где-то формат не принимают. Форма загрузки, старый графический редактор, шаблон документа или слайда, картинка для соцсети, письмо, служба печати.

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

Откуда взялся размер в полях

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

• Файл объявляет собственный размер, в пикселях. Это самое надёжное из трёх: тот, кто выгружал рисунок, сказал, каким по величине он должен быть, и поля просто это повторяют.
• Файл задаёт размер в физических единицах — в дюймах, сантиметрах, миллиметрах, пунктах или пиках — и размер пересчитан из расчёта девяноста шести пикселей на дюйм, что и есть дюйм в понимании веба, а вовсе не мерка вашего экрана. Рисунок, подготовленный к печати, часто приходит именно таким, и получающийся размер в пикселях — добросовестный пересчёт числа, которое никогда не было про пиксели.
• Файл не объявляет никакого пригодного размера, поэтому размер измерен по его viewBox. Вот на этот случай стоит посмотреть дважды: viewBox — это система координат, в которой нарисованы фигуры, а не размер, который кто-то выбрал, так что значок с координатами от нуля до двадцати четырёх приходит с просьбой стать картинкой размером с точку. Наборы значков к тому же часто пишут с шириной и высотой в процентах, а это размер того, чего у самого файла нет, и читается он как отсутствие размера, — такие файлы тоже оказываются здесь.

Какое бы из трёх ни ответило, число один раз округляется до целых пикселей — в тот момент, когда оно прочитано, потому что холст выделяется в целых пикселях и дробной части девать некуда. Важно это ради одного: всё дальнейшее работает от округлённого числа, которое вы видите, а не от дроби за ним, поэтому удвоенный рисунок, показанный как тридцать один пиксель в ширину, — это шестьдесят два, а не шестьдесят три, которые дало бы второе округление. Размер на экране и размер, с которым считает арифметика, — один и тот же размер, и это единственный порядок вещей, при котором поля значат ровно то, что говорят.

Как выбрать нужный размер — и рисунок, который никакого не объявляет

Размер, на который намекает файл, всегда лишь отправная точка, и он предложен именно как точка, а не навязан. Всё в этих двух полях устроено так, чтобы обычный случай не требовал раздумий, а точный оставался доступен, — и вот в этом вся разница между этой страницей и двумя её сёстрами: фотография преобразуется в том размере, который у неё уже есть, и решать тут нечего.

• Введите ширину — и подстроится высота; введите высоту — и подстроится ширина, так что рисунок сохраняет пропорции без всяких вычислений с вашей стороны. Так сделано по умолчанию, потому что нечаянно исказить логотип — та самая ошибка, которую стоит сделать невозможной.
• Снимите флажок сохранения пропорций, когда вам действительно нужен точный прямоугольник — место под баннер, аватар неизменного размера, лист значков, — и два поля станут независимыми. Рисунок тогда растянется до тех размеров, о которых вы попросили: это и есть желаемое, и это же причина, по которой такое остаётся осознанным действием, а не поведением по умолчанию.
• Ряд множителей — быстрый путь к тем размерам, которые людям и нужны, и каждый из них отсчитывается от размера, объявленного файлом, а не от того, что в полях в эту минуту. Поэтому нажатие одного и того же множителя дважды даёт один и тот же ответ дважды, а не накапливается в нечто, о чём вы не просили.
• Множитель, у которого нет ответа, показывается недоступным, а не кнопкой, которая ничего не делает. Умножение и без того огромного рисунка способно дать размер, который не выразить ни одним форматом изображений, и элемент управления, молча отказавшийся сработать, был бы хуже того, который прямо показывает, что не может.

Дальше — файл, который не объявляет ничего: ни ширины с высотой, которые этот инструмент сумел бы прочитать, ни viewBox, по которому можно было бы измерить. Такое встречается чаще, чем кажется: рисунок, выгруженный прямо из некоторых редакторов, или написанный вручную для страницы, которая собиралась задать ему размер через CSS. Размера в нём действительно нет, поэтому поля открываются пустыми, никакой фразы о том, откуда взялось число, не появляется, умножать нечего и пропорции сохранять не от чего, а строка отказывает и просит у вас ширину и высоту. Этот отказ — цель, а не сбой: браузер, которому дали такой файл, откатывается к небольшому прямоугольнику фиксированного размера, который никто не выбирал, и один вопрос лучше, чем скачанный файл и запоздалое выяснение.

Пара, которая размером не является, отклоняется собственными словами — это вторая половина той же заботы. Ноль, отрицательное число, половина пикселя или число крупнее того, что вообще выразимо в формате изображения, — всё это отклоняется, а не округляется, не подрезается и не подменяется молча собственным размером файла: преобразование в размере, о котором никто не просил, — и эта страница существует ровно затем, чтобы такого не делать. А если вы выбрали фотографию, а не рисунок, поля размера не появляются вовсе: растр преобразуется в своих собственных размерах, и элемент управления, который ничего не смог бы изменить, хуже, чем его отсутствие.

В какой формат растеризовать

Страница открывается на PNG, потому что для почти любого вектора это верный ответ, а остальные форматы — в одном щелчке, а не за другой страницей. Выбирать приходится между форматом, который хранит пиксели в точности, и двумя, которые часть их обменивают на меньший файл, и рисунок здесь — на редкость однобокое свидетельство: ровная заливка и резкие границы и есть то содержимое, с которым сжатие с потерями справляется хуже всего.

• PNG — вариант по умолчанию, и обычно на нём разговор и заканчивается. Он хранит растеризованный рисунок в точности, несёт прозрачность и отлично сжимает ровные области одного цвета, из которых логотип или значок большей частью и состоят, — поэтому файл нередко выходит меньше, чем можно было бы ждать по репутации формата.
• JPG стоит выбирать только тогда, когда на нём настаивают на другом конце. Прозрачность он не хранит вовсе, поэтому за вашим рисунком сначала приходится закрасить фон, а его сжатие оставляет серую кайму ровно вдоль тех резких границ и букв, ради которых вектор и растеризовали.
• WebP — средний ответ для веб-страницы: он несёт прозрачность и обычно меньше PNG. Здесь он с потерями при любом качестве, включая самый верх регулятора, так что это хороший выбор для картинки, которая идёт на страницу, и плохой — для эталонной копии, которую вы ещё будете править.
• Ни один из трёх не является вектором, и векторных форматов эта страница не пишет. Если вам нужен масштабируемый файл, то это тот самый SVG, который у вас уже есть, — сохраните его, а всё скачанное отсюда считайте копией, сделанной для одного места.

Регулятор качества показывается только для двух форматов, которым есть чем поступиться, — для JPG и WebP; PNG не выбрасывает ничего, поэтому регулятора нет вовсе, и это лучше, чем регулятор, стоящий без дела. Каждая строка показывает размер, с которым вышел файл, так что предмет сделки — число прямо перед вами. Движение этого регулятора там, где это возможно, заново кодирует уже нарисованную картинку, а не растеризует рисунок снова, тогда как изменение размера рисовать заново всё-таки заставляет, — и это правильный порядок, ведь именно второе действительно даёт другие пиксели.

Чего растеризация не может перенести

Всё здесь делается тем механизмом рисования, который уже встроен в ваш браузер: файл передаётся ему как картинка, рисуется один раз в выбранном вами размере и записывается обратно в запрошенном формате. Именно это позволяет инструменту работать без отправки чего-либо, без установки чего-либо и без скачивания чего бы то ни было сверх самой страницы — а для вектора это же определяет, что вообще может оказаться в результате, ведь SVG — это документ, а не блок пикселей, а документ умеет о чём-нибудь попросить.

Переданный так, как он передаётся здесь, он ничего из этого не получает. Ничто внутри файла не выполняется, и ничто за пределами файла не загружается — это сознательное свойство и по-настоящему ценное: SVG может нести скрипт и может нести ссылку на адрес, к которому обратились бы в тот самый миг, когда рисунок показали. Открытый здесь чужой рисунок не делает ни того, ни другого. Чего стоит эта безопасность, изложено ниже, и о первых двух пунктах сообщают в строке, а не оставляют вам заметить самим.

• Всё, на что файл ссылается за свои пределы, не загрузится: связанное изображение, таблица стилей, шрифт. Это верно для адреса в вебе и ровно так же верно для файла, лежащего в той же папке, — а этот случай встречается несравнимо чаще, и потому замечание говорит, что эти части не загрузятся, а не то, что они были удалёнными. Того, для чего они предназначались, в результате не будет, а поправить это можно одним способом: встроить их в рисунок и преобразовать его заново.
• Текст отрисовывается шрифтами, установленными на этой машине. Буквы в результате есть, и выглядят они у вас правильно, но тот же файл, растеризованный на другом компьютере, может взять другую гарнитуру и дать другую картинку. Если важны точные очертания, переведите текст в контуры в той программе, которая рисовала файл, — и тогда ничего нигде не подыскивается.
• Всё, что рисунок делает во времени, в результат не попадает. На выходе получается неподвижная картинка в любом из предлагаемых форматов, поэтому файл, который сам себя анимирует, отдаёт тот единственный момент, который был нарисован, и ничто интерактивное этого перехода тоже не переживает.

Два потолка на выходе стоит назвать прямо, а не оставлять на самостоятельное обнаружение. PNG пишет собственный компрессор браузера, приличный, но не дотошный, так что отдельный оптимизатор ещё смог бы срезать с файла кусок, не тронув в нём ни пикселя; а WebP получается кодированием с потерями при любой настройке, потому что попросить у браузера режим этого формата без потерь нечем. И то и другое можно было бы поднять, поставив вместе со страницей настоящий кодировщик, скомпилированный для работы прямо в ней, и этот инструмент сознательно так не делает: это несколько сотен килобайт, которые скачивал бы каждый посетитель ради того, чтобы часть из них получила чуть меньший файл, — на сайте, где любая другая страница работает в тот миг, когда отрисовалась. Именно на этой странице выигрыш был бы к тому же меньше, чем кажется: растеризация — это то, как ваш вектор нарисовал сам браузер, а способ рисования кодировщику не изменить.

О чём каждая строка говорит про ваш рисунок и когда она отказывает

Конвертер, работающий молча, — вот причина, по которой логотип оказывается на чёрном фоне, а рисунок — без той картинки, на которую он ссылался, и узнают об этом спустя дни и совсем в другом месте. Каждая строка здесь несёт короткий отчёт о том, что на самом деле сделали с этим файлом, — и не несёт ровным счётом ничего, когда ничего примечательного не произошло: как раз это и делает замечания достойными остановки. У вектора набор их иной, чем у фотографии, и три замечания инструмента к нему не могут относиться вовсе: у рисунка нет данных камеры, которые можно было бы отбросить, нет пометки о том, какой стороной он вверх, и нет кадров, которые можно было бы потерять.

• То, на что рисунок ссылается, не загрузится. Появляется для файла, ссылающегося на изображение, таблицу стилей или шрифт, которых внутри него нет, — по адресу ли, по соседнему ли пути, — и объясняет результат, вышедший без одной из частей.
• Текст отрисован шрифтами этой машины. Появляется только там, где рисунок действительно кладёт буквы на холст, так что файл с пустым текстовым элементом молчит, и рисунок вовсе без текста молчит тоже.
• Прозрачность залита сплошным цветом — и каким именно. Преобразование в JPG обязано что-то положить за рисунок, и выбор цвета фона появляется, как только он действительно нужен какому-то файлу из вашего списка. Это замечание измеряется, а не предполагается: оно ждёт, пока в отрисованном не найдётся по-настоящему просвечивающий пиксель, поэтому рисунок, чья собственная графика закрывает всю картинку, преобразуется в JPG, не сказав об этом ничего.
• Имя и содержимое расходятся. Формат решается по содержимому файла и никогда по расширению, поэтому рисунок, который кто-то сохранил с неверным окончанием, читается и преобразуется правильно — как тот SVG, каким он и является, — и вам об этом сообщают, потому что это верное утверждение о вашем файле, которого вы, скорее всего, не знали.
• WebP при этой настройке всё равно с потерями. Растеризовать рисунок, а затем попросить самый верх регулятора качества — это ощущается так, будто назад должно вернуться ровно то, что было нарисовано, а возвращается не оно; именно это убеждение замечание и поправляет, и потому оно появляется там и ни на одном положении ниже.

Там, где файл преобразовать нельзя вовсе, инструмент говорит почему, а не выдаёт вам хоть что-нибудь. Файл, не относящийся ни к одному из читаемых здесь форматов, называется и отклоняется; так же поступают с файлом поддерживаемого формата, начало которого прочитать не удалось, — а для рисунка это его открывающий тег, единственное, что есть у вектора вместо заголовка. Файл, внутри которого рисунок сидит где-то посреди веб-страницы, изображением не является и отклоняется как таковой; так же отклоняется и рисунок, который ваш браузер в итоге оказался не в силах нарисовать, каким бы исправным он ни выглядел снаружи. Ничего не угадывается, и ничто наполовину сделанное не выдаётся за готовое.

Отказ, с которым вы здесь столкнётесь вероятнее всего, — это отказ по размеру, и это факт про эту страницу, а не про ваш файл: множитель в одном щелчке, у рисунка охотно можно попросить любой размер, и в векторе нет ничего, что бы вас остановило. Останавливает браузер: картинку он держит лишь до определённой площади — на телефоне одна площадь, на настольной машине другая, а у двух браузеров на одной машине снова третья. Переход за неё не вызывает никакой ошибки, а даёт пустое изображение в несколько килобайт, которое выглядит как законченное преобразование, пока его не откроют. Поэтому инструмент записывает в картинку заданного вами размера известный пиксель и тут же читает его обратно, ещё до того как нарисована хоть одна фигура; если пиксель не вернулся, вы получаете отказ с размером внутри и никакого файла. Нигде ничто не сравнивается с постоянным числом, так что потолок, в который вы упрётесь, — потолок вашего собственного устройства, а не выбранный под кого-то другого.

Почему ваш рисунок никогда не покидает эту вкладку

Рисунок выдаёт больше, чем фотография, потому что рисунок — это текстовый файл, и его можно прочесть. Имена слоёв, имя того, кто его выгрузил, оставленный кем-то внутри комментарий, адрес каждой части, на которую он ссылался, — всё это выписано в файле, и ничто из этого никуда не уходит. Ваш SVG читает эта вкладка браузера, а растеризует процессор вашей собственной машины. На другом конце этой страницы нет сервера, который мог бы такой файл принять, так что это описание того, из чего инструмент сделан, а не обещание о том, как его содержат.

Несколько секунд в панели сети инструментов разработчика браузера закрывают вопрос, и для рисунка смотреть нужно на два обстоятельства, а не на одно. Наружу не уходит ничего, что несло бы ваш файл, и ничего не уходит и от имени файла, сколько бы адресов в нём ни было выписано. После загрузки страница — это горстка статических файлов, и никакого кода, работающего где-то ещё, нет, так что можно полностью отключиться от сети и растеризовать сколько душе угодно.

• Рисунок, который вы не отдали бы незнакомому человеку, — ещё не объявленный логотип, план помещения, схему чего-то внутреннего, — можно растеризовать здесь, и он вообще не покинет вашу машину.
• То, что выходит из растеризации, лежит в этой вкладке, пока вы его не сохраните, а закрыть вкладку — это и есть всё удаление. Ни принесённый вами рисунок, ни сделанная из него картинка не запоминаются от одного визита к другому.
• Рисунок, пришедший из источника, которому вы не вполне доверяете, здесь безопасно открывать, потому что ничто в нём не выполняется и ничто, на что он ссылается, не загружается. Растеризация к тому же его обезвреживает: вы скачиваете пиксели, а пиксели попросить ни о чём не могут.