Технология SVG на месте; теперь пришло время использовать это.
В то время как большая часть разговоров о SVG и связанных стандартах HTML5 сосредоточена на «демографической ситуации в браузерах», «будут ли мобильные устройства на основе WebKit компенсировать длительный срок службы IE5-8?» Сортировать, мы прошли «критическую массу» браузеров рендеринга, я утверждаю. Теперь больше всего нужно SVG — документирование и знакомство с уже имеющимися возможностями. Последние несколько важных шагов для SVG произошли, когда важные браузеры расширили охват SVG; следующие несколько важных шагов произойдут, когда творческие люди поймут поразительные двумерные визуальные эффекты, которые позволяет SVG.
С этой целью эта короткая статья проиллюстрирует, как SVG не только возможен в абстрактном смысле, но и достаточно совместим с другими шаблонами, чтобы легко «встраиваться» в систему блогов ITworld. Это значительная квалификация: если бы я сказал вам, что вы можете создавать фантастические мультимедийные феерии, но только если вы закодировали в PL / I и отобразили их на Amiga … ну, такие вещи не поощряют усыновление. Тем не менее, SVG является относительно традиционным XML-файлом и достаточно хорошо «играет» с существующими системами, чтобы сделать приведенные ниже примеры более или менее заметными (если вы не используете Internet Explorer до версии 9) — и я вводил их без сбоев. редактор блога!
Питер Томпсон, например, написал эту
анимированную
диаграмму UML для моделирования «модели наблюдателя». Хотя он не полностью работает во всех браузерах (на данный момент Opera, вероятно, делает его лучше), и, конечно, не так привлекателен, как при отображении в
полном размере на домашнем сервере , он приятно намекает на возможности «живого» просмотра. миниатюры, которые хорошо масштабируются, но сохраняют свой динамический и даже интерактивный характер. Блоги могут быть намного больше, чем просто слова на белом фоне!
Еще проще воспроизвести «свободную» анимацию, подобную цветочным овалам Дэвида Дейли, взятую из его « Ротариума ». Да, GIF-файлы также могут быть анимированными — но знаете ли вы, как выразить и поддерживать GIF-анимацию всего в 38 строках понятного человеку источника?
Последний пример на сегодняшний день:
в прошлом году Джейк Б продемонстрировал в своем «
Ещё одном JavaScript-блоге », что в крайнем случае SVG-контент, такой как диаграмма Венна его деятельности,
можно даже «встроить» в XML-данные, чтобы максимизировать Переносимость через существующие браузеры. Хотя он называет это «злом» и «ужасным хакерством», я часто и бесстыдно использовал эту технику, часто из-за ограничений на стороне сервера. Что мы подразумеваем под этой «кодировкой URL»? В этом случае источник для этой страницы выглядит примерно так
...
<object data="data:image/svg+xml,%3C%3Fxml%20version...
[scores of lines more of pure-ASCII data]
"></object>
...
Джейк Б даже поставляет скрипт Rhino для автоматизации встраивания . Джейк Б также вдумчиво показывает примеры менее радикальных, хотя иногда и менее переносимых, способов достижения SVG в HTML с той же целью путем использования синтаксиса HTML и XHTML , соответственно, для составных документов.
Резюме
Дело сейчас не в том, что SVG может сделать , если приложить достаточно усилий, сколько бы эта история не заслуживала рассказа; более убедительным для меня, однако, является множество эффектов, которые достаточно просты, чтобы начать использовать их сегодня . Даже блоги, нацеленные на мобильную аудиторию, которая обратилась не только к тексту, но иногда к довольно сокращенным алфавитам, могут наслаждаться визуальным шипением SVG. Он готов к работе.
И вы видите, что просто за горизонтом? UML и другие диаграммы разработки программного обеспечения могут создаваться и анимироваться полностью автоматически, например, из XMI с помощью XSLT, затем редактироваться визуально и инвертироваться, опять же с помощью XSLT. Такой двусторонний инструмент может быть не только чисто клиентским, но и браузерным; Eclipse, например, легко представить, приобретя взвод быстрых инструментов визуализации кода на основе SVG.