Почему стоит задуматься о векторной графике уже сейчас?
Retina-дисплеи (спасибо Apple, за удобный маркетинговый термин) уже стали частью нашей жизни. Если вы web-разработчик/дизайнер, и вы не учитываете, как ваша работа отображается на экранах с высоким разрешением, то вы серьезно выпадаете из современных трендов.
Тяжело ли сделать ваш продукт Retina-ready? Если мы говорим об интерфейсе, то ответ — “нет”, есть несколько приемов (наиболее полный их список можно узнать из книги «Retinafy» Томаса Фукса). И когда вы поймете все проблемы и ограничения текущих технологий, то станет ясно, что делать современные и «четкие» сайты достаточно просто.
Основная проблема сегодня — изображения, которые вы генерируете на вашем сервере: графики, отчеты и любые другие визуальные данные. Они красивые и четкие, но не тогда, когда вы хотите отправить их по электронной почте или отдать вашим пользователям для загрузки. Например: Google Analytics Report от Visual.ly, прекрасно смотрится в браузере и сильно «замыленным» при загрузке.
В чем заключается проблема? Почему бы просто не увеличить разрешение изображения и все будут счастливы? Возможно, на данный момент так оно и будет, но это тупик, вы не можете увеличивать разрешение до бесконечности: окончательный размер файла изображения будет расти пропорционально и вряд ли ваши клиенты будут довольны.
Так мы приходим к теме векторных изображений: они являются структурированным представлением графики, без ограничений на размер изображения: масштабируемые в зависимости от ваших требований, без ухудшения качества и увеличения размеров файла. Есть еще одна проблема: существует множество решений для создания векторных изображений, в частности SVG, в браузере (Raphaël.js, D3, Highcharts и т.д), но нет мощных решений для создания их на сервере, только несколько хаков, которые помогают использовать их на backend. Многие из них основаны на headless версиях WebKit: Highcharts и Freckle.
Наша команда потратила много времени на исследование и сравнение всех существующих подходов и пришла к своемусобственному решению этой проблемы. Спустя год настройки и оптимизации мы поняли, что можем сделать этот инструмент доступным для других разработчиков, которые сталкиваются с похожими проблемами. Так родился проект Svable.
Svable является сервисом для генерации SVG в облаке. Все, что требуется от разработчиков, — это просто отправить нам JSON-данные со списком правил и получить ваш SVG-файл/ссылку на него (или результат конвертации вашего SVG в PNG или PDF).
Но что насчет дубликации кода? Как разработчики мы ненавидим, когда новый сервис заставляет нас повторять всю логику нашего приложения, которое использует Raphaël.js, например, для создания некоторых “JSON — правил“. В таком случае проще придерживаться подхода с запуском “браузера на сервере”. Мы это понимаем, поэтому создание адаптеров для популярных решений и языков сейчас — наша основная цель, чтобы вы могли просто скопировать и вставить ключ доступа к сервису, а затем адаптер преобразовал бы код Рафаэля в JSON для Svable. Дублирование отсутствует: вы можете использовать один и тот же код на стороне клиента и/или на сервере.
Мы находимся на ранней стадии и ищем реальных пользователей для интеграции нашего решения, прежде чем открыть его для всех. Если у вас есть сложные SVG (или желание создать их, чтобы ваши retina клиенты были довольны), у вас есть хороший шанс начать создавать их быстро и просто, просто напишите нам о вашем случае.
Давайте делать красивый интернет вместе.
