Я чувствую, что SVG должен стать «нашим делом» в 2016 году. С чисто технической точки зрения мы знаем, как заставить его работать в большинстве современных браузеров.
Он также смехотворно хорошо подходит для Интернета, предоставляя нам крошечный размер файла, четкие края и почти бесконечную масштабируемость. Фактически, Google индексирует SVG с 2010 года.
Основные графические приложения, такие как Illustrator, Sketch и Inkscape, неплохо справляются с выводом относительно эффективной и готовой к работе веб-графики SVG. Там много чего нравится,
Итак, почему SVG не вступает во владение?
Возможно, одним из главных ручных тормозов для многих из нас является долгое наследие пиксельной графики, которую мы тащим за собой. Десятилетия JPG, PNG и GIF от клиентов и рекламодателей. Перспектива преобразования всех этих основанных на пикселях логотипов, значков, диаграмм, графиков, диаграмм и «кто знает, что еще» в векторную форму достаточна, чтобы дать большинству из нас мигрень, верно?
Преобразование пикселей в вектор
Вектор автотрассировки — не новая концепция. Я помню, как я был очень взволнован, когда Adobe включила отдельное приложение для автоматической трассировки под названием « Streamline » в мою первую копию Illustrator. Теперь я могу создавать новые иллюстрации за считанные секунды!
Волнение прошло.
Вскоре стало ясно, что созданные в Streamline векторные файлы в лучшем случае являются отправной точкой. К тому времени, когда вы очистили, исправили, выровняли и реорганизовали их во что-то более полезное, вам пришлось задуматься, не лучше ли было начать с нуля.
В конце концов функция Autotrace была интегрирована в ядро Illustrator, но проблемы остались.
- Гладкие формы письма были неровными
- Прямые углы были согнуты, а углы на самом деле кривые
- Тысячи лишних узлов были добавлены там, где они не нужны.
Как вы можете видеть в этом примере Illustrator ‘LiveTrace’ выше, элементы почти ВСЕГДА нужно будет обрабатывать вручную.
Это становится только более важным с SVG, где становится трудно прикрепить поведение CSS или JavaScript к безумно сложным фигурам внутри SVG.
VectorMagic
Я упоминал VectorMagic в прошлом, но я обнаружил, что он все еще относительно неизвестен большинству людей.
Он существует уже несколько лет, и, по правде говоря, я бы хотел указать на альтернативу, потому что VectorMagic дорогой.
Но, с другой стороны, я думаю, что это по-прежнему удобно, король программного обеспечения для преобразования пикселов в вектор.
Есть два способа использования VectorMagic. Версия для настольных компьютеров — это полнофункциональная версия с единовременным платежом в размере 295 долларов США.
Они также предлагают браузерную онлайн-версию в качестве услуги подписки за 8 долларов в месяц, и я не думаю, что вы потеряете что-либо существенное.
Настройки по умолчанию VectorMagic очень хороши, но, как и большинство авто-трассировщиков, они также позволяют настроить уровень детализации и цветовую палитру.
Однако за умные алгоритмы вы платите. Посмотрите на фигуры, которые VectorMagic сгенерировал из того же баннера «Звездные войны» JPEG.
Векторная графика почти всегда выглядит и работает лучше всего, когда построена с наименьшим количеством возможных узловых точек.
Как вы можете видеть в приведенном выше примере, векторные фигуры, которые создает VectorMagic, являются четкими, простыми и чистыми, а элементы сочетаются друг с другом, как мозаика, вырезанная лазером. Почти нет ненужных моментов, которые живой иллюстратор-человек не добавил бы.
Правда в том, что в VectorMagic происходит какая-то серьезная математическая магия, и я не думаю, что кто-то еще знает, как сделать это так хорошо. У Adobe есть лаборатории, полные математических фанатов, работающих над технологиями изображений, но по какой-то причине они не приблизились к этому.
Я должен сказать это: это услуга, на которую стоит подписаться. Они даже предоставляют возможность загрузки SVG. Тем не менее, стоит отметить, что они разрешают 2 бесплатных конвертации при создании новой учетной записи.
Но будьте осторожны: после просмотра результатов сложно вернуться назад.
Первоначально опубликовано в бюллетене SitePoint Design .