(Источник: «Компьютерные вести» №11, 25 марта 2010 года)
SVG - векторный Веб
На прошлой неделе компания "Майкрософт" с помпой представила свой новый браузер IE 9, в котором была заявлена поддержка графического формата SVG. Таким образом, после многих лет ожидания векторный формат SVG получил полное признание практически всех разработчиков браузеров. Его давно в той или иной мере поддерживают остальные браузеры - Opera, Firefox, Chrome. Поэтому давайте в сей исторический момент познакомимся с этим форматом поближе.
Возвращение в Веб
Формат векторных изображений SVG был разработан Консорциумом W3С более десяти лет назад - в 1999 году. Консорциум W3C - это некоммерческая организация, занимающаяся разработкой открытых стандартов, например, HTML и XML.
Несмотря на то, что векторные изображения давно представляют интерес для веб-дизайнеров, этот формат никак не мог завоевать массовое признание. С одной стороны, с 1996 года уже приобрела популярность коммерческая технология векторной анимации Flash. С другой стороны, "Майкрософт", контролировавшая на тот момент практически весь рынок браузеров, не обращала никакого внимания на этот свободный векторный формат.
Но не получая признания в Веб, SVG нашёл пристанище у полиграфистов и стал одним из основных форматов в таких графических пакетах, как Adobe Illustrator и CorelDRAW. Также SVG полюбился различным свободным проектам, в частности, OpenDesktop, под чьим крылом находятся проекты Gnome и KDE. И линуксоиды теперь на своих рабочих столах могут созерцать векторные иконки именно в этом формате.
Время шло, альтернативные браузеры потихоньку отвоёвывали у Internet Explorer место под солнцем, и все они в той или иной мере поддерживали SVG. Наиболее полной поддержкой этого формата сейчас может похвастать норвежский браузер Opera 10.50. И вот, наконец, сдались и в Редмонде, объявив полную поддержку SVG в грядущем IE9.
Трудно говорить о реальной мотивации "Майкрософт" в отношении SVG. Возможно, софтверный гигант вспомнил, что SVG - это XML-формат, а "Майкрософт" ведь любит XML. Но, что бы там ни было, SVG возвращается туда, где его настоящее место, - и это Всемирная Паутина.
Картинка - это текст
SVG (Scalable Vector Graphics) - это масштабируемая векторная графика, основанная на текстовой разметке XML. Другими словами, если растровая графика форматов JPEG, GIF, PNG - это матрицы пикселов, то содержание векторного SVG описывается простым текстом. И, соответственно, такую картинку можно открыть для редактирования в любом простом текстовом редакторе, например, Notepad.
Изображение в векторных форматах формируют не пикселы, а геометрические примитивы - линии, круги, треугольники, а также текст. По сути, векторный рисунок - это текстовой список всех геометрических фигур, а также их атрибутов, что в совокупности составляют векторное изображение. Вот так, для примера, может выглядеть код картинки чёрного квадрата Малевича.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
width="640" height="480">
<rect fill="#000000" id="svg_2" height="200"
width="200" y="100" x="209"/>
</svg>Как видите, формат очень похож на HTML. Для просмотра можно сохранить этот текстовой файл с расширением svg и открыть его в любом современном браузере. Непосредственно в содержание веб-страницы изображения SVG внедряются при помощи тега <object>.
К возможностям SVG относится и анимация. В данном формате анимация может осуществляться с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Но также возможна анимация и посредством скриптовых языков на основе спецификации ECMAScript. То есть геометрическими примитивами можно управлять с помощью JavaScript.
В SVG документ можно вставлять и другие элементы. Например, можно вставить PNG, GIF или JPG-картинку.
Возможности и недостатки
Какие же основные преимущества и недостатки этого формата, по сравнению с растровыми-пиксельными?
Главная фишка векторных форматов - это абсолютная масштабируемость. То есть векторное изображение можно уменьшать или увеличивать сколько угодно, и искажений изображения не будет. Причём при масштабировании не будет изменяться и размер файла векторного изображения. А вот масштабирование растрового изображения на 200-300% и более приводит к появлению заметных искажений и артефактов, а также значительному изменению размеров конечного файла.
Так как SVG текстовой формат, такие картинки легко индексируются поисковыми системами.
Элементы SVG интегрируются непосредственно в объектную модель веб-страницы DOM. А это даёт широкие возможности по динамическому изменению элементов картинки и их атрибутов через JavaScript.
Но следует учитывать, что SVG-изображения - это рисунки и только рисунки. А вот конвертировать фотографии в векторный формат теоретически можно, но на практике лучше этого не делать, если не стоят какие-то специфические эстетические задачи. Векторные форматы совершенно не подходят для фотографий.
К тому же "тяжёлые" SVG-картинки с большим количеством элементов могут потребовать значительных вычислительных ресурсов. Ведь такой уж принципиальной разницы между рендерингом 2D и 3D нет.
Кого "убьет" SVG?
Естественно, бурно обсуждается вопрос, какие технологии или форматы могут быть вытеснены из веб-разработок с приходом SVG. Почему-то считается, что SVG - это "убивец" Flash, что не совсем верно.
Векторные форматы как нельзя лучше подходят для декоративных графических элементов на веб-страницах - это иконки, стрелочки, логотипы и прочая графическая ерунда, которая служит для украшательства веб-сайта. В декоративной графике используются форматы GIF и PNG. И вот их то SVG очень даже потеснит. Масштабируемость и интегрированность в веб-страницу делает SVG самым предпочтительным вариантом для декоративной графики.
Формат SVG, конечно же, значительно лучше подходит для задач анимации, чем GIF-анимация.
Что касается иллюстративной, содержательной графики, то формат SVG отлично справится с графиками, диаграммами, чертежами, схемами, географическими картами, просто рисунками. И в области иллюстраций, скорее всего, придётся потесниться формату PNG.
А вот фотографические изображения, как мы уже говорили выше, это то, для чего SVG совершенно не предназначен, поэтому формату JPG ничего не грозит.
Говоря же о Flash, следует учитывать, что эта технология давно перешагнула рамки векторного формата и представляет собой настоящую мультимедийную платформу. Поэтому, возможно, SVG и заменит простую Flash-анимацию, но что-то более навороченное, что-то на уровне мультиков "Масяня", на SVG в ближайшее время вряд ли появится. Так что разговоры о скоропостижной смерти Flash мне кажутся немного преждевременными.
Кстати, следует помнить и о технологии Canvas из будущего стандарта HTML 5, который тоже предназначен для формирования изображений при помощи функций JavaScript и который может использоваться для тех же целей, что и SVG, и Flash, и даже Silverlight. Неудивительно, что о его поддержке "Майкрософт" молчит.
Программы для работы
Так как SVG является текстовым форматом, то редактировать векторные картинки можно даже в "Блокноте". Но можно - не значит нужно. Есть более удобные программы.
Во-первых, это коммерческие тяжеловесы Adobe Illustrator и CorelDRAW. Существуют и свободные векторные графические редакторы sK1, Ikscape. Для офисных нужд подойдёт OpenOffice Draw.
Для несложных векторных картинок или для простого знакомства с форматом SVG я бы предложил посмотреть в сторону веб-приложения SVG-Edit (code.google.com/p/svg-edit), которое распространяется в виде расширения для Firefox или виджета Opera и использует только JS, HTML, CSS и SVG. Работает это веб-приложение в офлайновом режиме и не требует подключения к Интернету.
Несмотря на простоту, в SVG-Edit реализована поддержка растровых изображений, группировка элементов, масштабирование, слои, кривые, смена фона и многое другое. Так что для начала SVG-Edit - самое то.
Стандарты
И в заключение несколько слов о текущем состоянии этого стандарта. Разработка спецификации SVG по-прежнему продолжается. В настоящее время рабочим вариантом считается версия 1.1. Также для мобильных устройств предусмотрены спецификации SVG Tiny и SVG Basic.
Что же касается уровня поддержки в браузерах, то наиболее близко соответствует стандартам норвежский браузер Opera последней версии 10.50. Но полной поддержки стандарта нет пока ни у кого. Поэтому веб-дизайнерам, собравшимся использовать преимущества SVG, конечно же, предстоит много счастливых минут по тестированию своего векторного контента во всех существующих браузерах.
Михаил АСТАПЧИК
Гипертекстовый векторный фидо... ВЭБ?!!
ЭТО БЫЛ ХИТРЫЙ ПЛАН МИЦГОЛА! OH SHI~
Одумайтесь пока не поздно! Остановите SVG!
Подумайте что нас ждёт если даже Микрософт подчинился ему!
тоже "почему-то" уже при виде заголовка вспомнился Мицгол 
Мне давно мечтается о «векторных скриншотах» веб- и оконных интерфейсов. С нетерпением жду появления инструментов по перегонке в SVG произвольных оконных диалогов .
luitzen
Вообще-то инструментарий и так давно уже есть в том-же Corel'овском пакете, но вот только зачем?
Одна маленькая иконка полностью упарывает идею такой оптимизации и её всё равно придётся оставить растровой, а иначе под неё сгенерируется больше кода чем она в растре весит или она превратится в пятно. А таких иконок на экране постоянно тонны. А текст? Он тоже отвратительно поддаётся векторизации с картинки, особенно если скрин сделан на системе без хиттинга шрифтов. А если это окно не во весь экран и видна картинка с рабочего стола? Тут уже совсем хана.
Для скриншотов интерфейса идеально подходит формат PNG. Он очень эффективно сжимает пустые однотонные области и хорошо сжимает всё остальное не калеча это остальное.
Рекомендую ознакомиться с утилитой optipng. Она умеет автоматически подбирать стратегии оптимизации фрагментов изображения.
Lain_13, спасибо. Я с Corel’олвским пакетом не очень знаком, не могли бы вы рассказать поподробнее, привести пример какой-то?
На всякий случай: я говорю не о векторизации растра, а о сохранении изначальной векторности. То есть речь не о «конвертации» bmp2svg, а о «конвертации» xul2svg, например.
В случае с текстом, векторизованным с картинки, действительно был бы ахтунг. Но я предполагаю, что в SVG есть возможность не хранить отдельно положение каждой буквы, а хранить положение надписи, а уж что внутри в неё — обсчитывается с учётом кернинговых пар и прочего.
В принципе, мне даже не нужна автоматическая замена пятипунктового Arial на десятипунктовый при двукратном увеличении картинки. Достаточно просто двукратно увеличенного пятипунктового. Хотя замены десятипунктового пятипунктовым при двукратном уменьшении хотелось бы.
С иконками да, проблема. Но незамысловатые иконки можно иметь изначально векторными векторными, неплохо масштабируемыми до самых маленьких размеров. А по большому счёту, лишь бы цветовая гамма сохранялась. Если читатель захочет разглядеть иконку в натуральную величину, пускай увеличит масштаб.
А куски рабочего стола зацеплять не комильфо .
luitzen
Видимо ты недопонял, ок.
1. В пакете корела есть тулза для векторизации растра и это полный ахтунг.
2. Текст с растра векторизируется только как картинка, а то нужно задействовать распознавалку текста, а это эже куда серьёзнее. А там ведь ещё нужно как-то шрифт определить и стиль. Если получать текст от приложения со всеми данными о нём, то "скриншот" будет разным на разных компах из-за отличий в отрисовки одного и того же шрифта разными способами (а одно только с хиттингом / без хиттинга даёт кардинально разные результаты, разный размер шрифта и длинну строки).
3. Делать скриншоты в SVG изначально просто невозможно, так как для этого понадобиться вводить соответствующее API в сами приложения для получения всех видимы элементов окон в том виде, в котором они есть, а не как на экран попали. Поддержка должна быть аж до базовых GUI-либ во всех языках программирования или нужно разрабатывать сотни методов разбора и получения данных об окнах программ и всё равно это будет разбиваться в дребезги о самописные компоненты. Ты представляешь себе такое? Я - нет. А с играми в оконном режиме как? Они ж картинку через OpenGL рисуют и там векторной графикой точно не пахнет (не делать же дополнительный рендер в векторное представление ради того, что б кто-то раз в году нажал принтскрин в одной игре). А скрин с окном рабочего стола виртуальной машинки? Это тоже тупо картинка и без вариантов. Это просто невозможно. Sad but true.
4. Даже если делать скриншоты только с фокса, то именно его нужно научить выгонять всё своё содержимое в виде SVG-картинки, а это дурка ещё та и если у тебя в кадре флэшка или ещё что, то картинки от неё не останется, а будет чёрное пятно.
В общем, реально только векторизировать растр, но это полный ахтунг, а потому используй PNG и не заморачивайся.
Вообще для создания векторных прототипов окон существуют специальные средства, но я ими не пользуюсь и не знаю даже как называются. Там из готовых фрагментов можно быстро набросать то, как должно выглядеть то или иное окно создаваемой программы, но это только для создания набросков.
Lain_13, я ни в коем случае не спорю, что векторизация растра и распознавание — это ахтунг, и что PNG — стандарт. Однако:
Делать скриншоты в SVG изначально просто невозможно, так как для этого понадобиться вводить соответствующее API в сами приложения для получения всех видимых элементов окон в том виде, в котором они есть, а не как на экран попали.
Не уверен, что у приложения надо спрашивать разрешения. Видел какую-то скриншотоснималку, позволяющую копировать в буфер обмена названия кнопочек. Но можно и нагрузить приложение чем-то типа API. То же Cairo способно давать постскриптовую выдачу.
В конце концов, ведь не нужно делать столь прекрасные «векторные скриншоты» со всего подряд. Так, с клепаемых на этаже приложений. Добавить геморроя разработчикам которых вполне можно.
.К сожалению, на сегодня действительно не существует способов получения качественных векторных изображений из растровых автоматическим путём. Над этой задачей давно работают, но пока успехи не так чтобы очень велики. Отчасти, кстати, это объясняет, почему ещё не создан нормальный, пригодный к повседневной эксплуатации электронный водитель.
Lain_13
Делать скриншоты в SVG изначально просто невозможно
...Именно потому, что на конечное устройство информация выводится в виде набора пикселей. Если бы она изначально выводилась в векторном формате, то проблемы бы не было.
А с играми в оконном режиме как?
Однако не стоит забывать, что кроме трёхмерных игр на OpenGL (хотя скорее уж DirectX, если на то пошло), есть ещё игры на Flash, которые сейчас довольно популярны, а уж их-то векторизовать не требуется. Другое дело, что поскольку Flash — формат закрытый, сделать такую функцию может только компания Adobe, а оно ей в принципе пока ни к чему. Но если понадобится — сделают, будьте уверены.
Даже если делать скриншоты только с фокса, то именно его нужно научить выгонять всё своё содержимое в виде SVG-картинки, а это дурка ещё та...
В общем, реально только векторизировать растр
Почему? Сейчас как раз наблюдается тенденция семантизации всего, что только возможно, в первую очередь, таких вещей как информация в web-среде. Я полагаю, вы не станете спорить, что перевести, например, web-документ, свёрстанный исключительно средствами HTML + тщательно описывающей каждую мелочь таблицы CSS в формат SVG автоматическим путём существенно проще, чем перебирать бессмысленный с точки зрения машины набор пикселей?
luitzen
Lain_13
MySh
вы это там поаккуратней рассуждайте а то так и до гипертекстового векторного интернета договоритесь!с такой же векторной гипертекстовой ОС!
а там глядишь и до векторных домов и еды дойдёт!
okkamas_knife
Интернет и так уже гипертекстовый с самого начала. Векторным его уже и без нас делают.
А вот в GNU\Linux векторности тоже в достатке. Иконки и почти все элементы морды в векторе делаются, например. Не знаю куда прикручена гипертекстовость, но наверняка куда-то уже прикручена.
Ну пора уже векторизировать мир, пожалуй. Хотя стоп! Физики уже давно это сделали за нас. ж| У них же все силы и направления в векторах. Ужас-ужас.
MySh
> Однако не стоит забывать, что кроме трёхмерных игр на OpenGL (хотя скорее уж DirectX, если на то пошло)
Которые таки OpenGL, не передёргивай. Под линукс полно нативных игр, а не только виндовые через вино запускать.
> сделать такую функцию может только компания Adobe
И они не сделают её никогда. Они вообще всё, что не относится к Windows x86 поддерживают через одно место, даже Windows x86_64 не очень жалуют! Экспорт флэша в SVG они делать не будут хотя бы потому, что этим ускорят смерть флэша. Они же не хотят прострелить себе коленку? Даже не думай. А ведь ещё есть Java-апплеты и прочие радости. С них-то как скриншот в векторе просить? А никак.
> Я полагаю, вы не станете спорить, что перевести, например, web-документ, свёрстанный исключительно средствами HTML + тщательно описывающей каждую мелочь таблицы CSS в формат SVG автоматическим путём существенно проще, чем перебирать бессмысленный с точки зрения машины набор пикселей?
Э... Ты о чём сейчас? Веб-документ в картинку перевести можно уже сейчас... Это делают все браузеры каждый раз, когда ты веб-документ смотришь. В Фоксе эта картинка доступна как свойство canvas у таба (причём там вся страница, а не только видимая область). В любой момент можно снять её оттуда и сохранить как тебе угодно или отобразить где-нибудь. Так, например, делаются превьюшки страниц в расширениях, которые показывают картинки страниц вместо табов в боковой панельке. Т.е. у нас уже есть готовый код заточенный под генерацию растровой картинки из той информации, что приходит к нам из веба.
Код для генерации вектора из такой картинки придётся ещё написать, да к тому же он будет ни чуть не проще кода для генерации растра! А практическая польза от него будет... в создании векторных скриншотов. -_- Ну вот кому это надо? PDF собрать из веб-страницы и сейчас у всех спокойно получается, и без экспорта в SVG в промежутке.
Lain_13
Под линукс полно нативных игр, а не только виндовые через вино запускать.
Но игр для Windows PC + Xbox всё равно больше. 
Они же не хотят прострелить себе коленку? Даже не думай.
А кто их спросит, хотят они или не хотят? Я подозреваю, что у компании Microsoft большого энтузиазма идея предлагать пользователям при первом выходе в интернет выбрать себе броузер не вызвала. Но они это сделали. Потому что, говоря условно, «партия приказала».
А ведь ещё есть Java-апплеты и прочие радости. С них-то как скриншот в векторе просить?
Так же.
Э... Ты о чём сейчас?
О сферическом HTML-and-CSS-to-SVG-преобразователе в вакууме, разумеется.
Ну вот кому это надо?
Сегодня — почти никому. А кто сказал, что так будет всегда?
MySh
> Но игр для Windows PC + Xbox всё равно больше.
Windows? Xbox? Лолштоэто?
> А кто их спросит, хотят они или не хотят?
Слушай, а ты прав, надо натравить на них европейские суды. Пусть заставят этого естественного монополиста сделать конвертер flash→svg+js или допилить линукс-версию до той же скорости, на которой виндовая бегает.
> Так же.
Каждого разработчика персонально просить будешь? Даже те, что уже умерли? Тут от самой джавы ни чего не зависит и от неё ни чего не допросишься. 
> Сегодня — почти никому. А кто сказал, что так будет всегда?
Я гарантирую это. 
Lain_13
Windows? Xbox? Лолштоэто?
Здрасьте, приехали... Windows — это операционная система, которая занимает около 90 % рынка пользовательских персональных компьютеров, не в последнюю очередь благодаря играм, которые сегодня делаются именно именно под эту систему (всё прочее — по остаточному принципу). ЧиXBox — это приставка производства этой же компании, работающая на той же системе (по крайней мере, от той же компании), не занимающая пока 90 % рынка приставочных игр, но компания, наверное, очень бы этого хотела, и двигаться в этом направлении ей вполне пока вроде удаётся. Так-то.
Я гарантирую это.
«Поживём — увидим».
MySh
> Windows — это...
Ты говорил сейчас с сонибоем и линупсофагом в одном лице. Вот так то.
Кстати, уже всего 90%? Хе-хе! 
Lain_13
Кстати, уже всего 90%?
Это взято с потолка по самым минимальным оценкам, также не забываем про Mac OS.
MySh
> Это взято с потолка по самым минимальным оценкам, также не забываем про Mac OS.
Мне по-нраву твой потолок, хоть там и нашлось место какой-то Мак ОС, но окно в 9/10 потолка это реально круто. Завидую — у меня вот сверху какие-то люди живут. ж(
Lain_13
Это не окно, а пятно. Правда, не знаю, векторное оно или растровое...
Ты говорил сейчас с сонибоем и линупсофагом в одном лице
А вот интересно, как сонибой и линупсофаг мог бы прокомментировать эту новость?
MySh
Она изначально была урезана для линукса по самое не балуйся, а слимку сделали вообще без поддержки дуал-бута. Недавно геохот сломал их гипервизор при помощи линукса и такой-то матери, вот и шевелятся. Кстати, они ещё довольно честно поступили. Когда в хоробке360 кто-то обнаружил дырку в прошивке для запуска я уж не помню чего, так «одна компания» выпустила обновление на прошивку, которое ставилось без спросу у пользователя. Угу, они такой фокус не только со своей осью провернули, а ещё и с приставкой.
А вот так: игровая приставка — для игр. Не хватало мне ещё на приставке с линуксом ковыряться.
Ну это тебе.
krigstask
Надо быть редким олухом, что б покупать продукцию Sony и при это ожидать от неё отсутствия ограничений. Это же толстейшие проприетарщики и DRM-щики. Либо знаешь что берёшь и чего ждать, либо не нужно это покупать. Я не верил в долгую жизнь линукса на пс3 ещё когда они это анонсировали. Первым же подтверждением оказалась недоступность большей части ядер процессора из линукса и отсутствие видео-драйверов (и практически полное отсутствие возможности их создать). Выход слимки без линукса и грядущая первоапрельская шутка это лишь завершают. Кто-то ожидал чего-то иного от _полностью закрытой системы_? А мозги где в это время были? Сони не выгодно продавать плойку3 как дешёвую числодробилку и они её так продавали исключительно в рекламных целях. Мол Cell вот только вышел, а линукс на нём уже крутится. Круто, да? Закажите у бимеров мейнфреймы на целлах, да. Им выгодно игры под неё продавать, вот они и закрывают лавочку. Я ещё раз спрашиваю, кто-то ожидал иного? А чем думал при этом?
Раз уж заговорили о недокомпьютерах, замечу, что в электронной документации к ним часто встречаются векторные изображения интерфейсов. Не уверен, что это просто хорошие перерисовки с использованием векторных элементов, присутствовавших в постановках на интерфейсы.
luitzen
У того же плейстейшена 3 скины морды на флэше сделаны (оп-ля, кто б знал). Если у тебя есть сырцы такого скина, то надёргать из них векторных картинок методом копипасты большого труда не представляет.