WinNavigator

Frigate

Norton Commander

WinNC

Dos Navigator

Servant Salamander

Turbo Browser

Winamp, Skins, Plugins

Необходимые Утилиты

Текстовые редакторы

Юмор

File managers and best utilites

Введение в SVG. Svg поддержка браузерами

НОУ ИНТУИТ | Лекция | Введение в SVG

Аннотация: Поддержка SVG браузерами. Flash против SVG. Развитие векторных форматов. Просмотр SVG–графики в Adobe SVG Viewer. Панель информации в Internet Explorer 6 (Windows XP SP2). Создание SVG документов. Работа с Altova XML Spy. Вставка SVG рисунков в HTML – страницы. Обзор ресурсов, посвященных SVG–графике.

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить

здесь.

SVG (Scalable Vector Graphics, в переводе масштабируемая векторная графика) - это язык для описания двухмерной графики в формате XML. Можно сказать, что SVG – это HTML для графики. Он включает в себя несколько типов различных объектов:

векторную графику (линии, окружности, кривые)
текст (с форматированием, заданием стилей и эффектов)
растровые изображения (внедряемые в SVG–документ).

Графические возможности языка чрезвычайно велики и сравнимы с возможностями пакетов Corel Draw и Adobe Illustrator:

произвольные заливки, штриховки, градиенты, заливки заданным растром, а также произвольным фрагментом векторного изображения,
разнообразные стили линий - линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,
возможность использования кривых Безье (кубических и квадратичных),
поддержка прозрачности всего изображения или его части, с заданной степенью,
возможность применения фильтров, типичных для растровой графики – размытие, попиксельное смешивание, наложение,
поддержка Unicode – возможность отображения в одном SVG документе текстов на различных языках и различными шрифтами,

расположение текстовых строк вдоль произвольных кривых,
встроенные развитые средства анимации, позволяющие без программирования в режиме реального времени менять практически все атрибуты изображения или его фрагмента,
встроенные средства для создания интерактивности, а также поддержка JavaScript и DOM,
поддержка каскадных таблиц стилей (CSS),
поддержка антиалиасинга.

Название "масштабируемая векторная графика" отражает следующие превосходства языка:

SVG–документы могут быть отображены на самых различных устройствах – от экранов мобильных телефонов и карманных компьютеров(рис. 1.1) до мониторов PC и ноутбуков.
SVG–документы представляются в векторном формате, следовательно, их можно масштабировать без потери качества по сравнению с растровыми изображениями (рис. 1.2).

SVG–графика может быть создана "на лету" при помощи любого языка программирования (Javascript, Java или C#) и возможно управление видом этой графики в режиме работы приложения.

Рис. 1.1. Бизнес-диаграмма в формате SVG

(http://esvg.ultimodule.com/bin/esvg/templates/splash.asp?NC=2483X)

Увеличенный фрагмент растрового (А) и векторного SVG (Б) изображений. У растрового изображения заметна "зазубренная" структура

увеличить изображениеРис. 1.2. Увеличенный фрагмент растрового (А) и векторного SVG (Б) изображений. У растрового изображения заметна "зазубренная" структура

Объектная модель SVG документа основана на принятом консорциумом W3C в 2000 году стандарте DOM (Document Object Model) Level-2. Это дает возможность использования стандартных языков для начального построения и произвольного манипулирования любыми элементами изображения. Составной частью стандарта SVG является модель событий, позволяющая привязать произвольный сценарий к любому фрагменту SVG документа и достаточно легко реализовывать интерактивные графические изображения.

SVG разрабатывается консорциумом W3C при поддержке таких крупных компаний, как Microsoft, Adobe, Corel, IBM, Hewlett-Packard, Sun Microsystems, Canon, Kodak и многих других (всего более двадцати). От их совместных усилий зависят стандартизация многих деталей языка, а также скорость его создания.

Стандарт SVG 1.0 (http://www.w3.org/TR/2001/REC-SVG-20010904/) был принят в качестве спецификации консорциумом в сентябре 2001 г. Стандарт SVG 1.1 (http://www.w3.org/TR/SVG/) и его версии SVG mobile profiles (http://www.w3.org/TR/SVGMobile/) (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г. Ведутся работы по созданию стандарта SVG 1.2 (http://www.w3.org/TR/2004/WD-SVG12-20040318/), который сейчас имеет статус черновика. Эта версия языка будет содержать ряд новых свойств: встроенные атрибуты фигурного форматирования текста, поддержка аудио и видео, а также более полная поддержка DOM.

На момент написания этого курса рабочей версией является SVG 1.1. Поэтому именно его мы и будем рассматривать.

Поддержка SVG браузерами

В настоящее время SVG применяется в Интернете сравнительно мало. На сайтах, где используются SVG, оно не представляется непосредственно, а конвертируется в растровое изображение. Для этого используются различные библиотеки, например Batik (на языке Java), которые "на лету" выполняют преобразования.

Браузеры Internet Explorer 9, Opera (начиная с 8-й версии) и Mozilla способны самостоятельно, без дополнительных утилит воспроизводить формат SVG. Что касается прочих браузеров – в том числе и Internet Explorer 6 (входящего в состав Windows XP), то им для воспроизведения нужны плагины. Наиболее распространен Adobe SVG Viewer, который можно бесплатно скачать с сайта Adobe (http://www.adobe.com/svg/viewer/install/ ) (был выпущен в сентябре 2003 года и с тех пор не обновлялся)

Имеется также Corel SVG Viewer (http://www.corel.com/servlet/Satellite?pagename=CorelCom/ProcessLayout&lc=en&ppg=CorelCorp/Trials/DownloadContainer). Далее в книге будет использоваться описание Adobe SVG Viewer.

SVG также может быть встроен в PDF документ. Adobe Acrobat Reader поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF существует утилита для Adobe Acrobat Pro.

Для мобильных устройств, телефонов и PDA, также существует поддержка SVG. Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). Имеется также конкурент SVG - Macromedia Flash Lite, который частично поддерживает SVG Tiny начиная с версии 1.1.

На сайте W3C размещен официальный список программного обеспечения для SVG:

http://www.svgi.org/

www.intuit.ru

НОУ ИНТУИТ | Лекция | Введение в SVG

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить

здесь.

векторную графику (линии, окружности, кривые)
текст (с форматированием, заданием стилей и эффектов)
растровые изображения (внедряемые в SVG–документ).

Графические возможности языка чрезвычайно велики и сравнимы с возможностями пакетов Corel Draw и Adobe Illustrator:

произвольные заливки, штриховки, градиенты, заливки заданным растром, а также произвольным фрагментом векторного изображения,
разнообразные стили линий - линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,
возможность использования кривых Безье (кубических и квадратичных),
поддержка прозрачности всего изображения или его части, с заданной степенью,
возможность применения фильтров, типичных для растровой графики – размытие, попиксельное смешивание, наложение,
поддержка Unicode – возможность отображения в одном SVG документе текстов на различных языках и различными шрифтами,
расположение текстовых строк вдоль произвольных кривых,
встроенные развитые средства анимации, позволяющие без программирования в режиме реального времени менять практически все атрибуты изображения или его фрагмента,

встроенные средства для создания интерактивности, а также поддержка JavaScript и DOM,
поддержка каскадных таблиц стилей (CSS),
поддержка антиалиасинга.

Название "масштабируемая векторная графика" отражает следующие превосходства языка:

SVG–документы могут быть отображены на самых различных устройствах – от экранов мобильных телефонов и карманных компьютеров(рис. 1.1) до мониторов PC и ноутбуков.
SVG–документы представляются в векторном формате, следовательно, их можно масштабировать без потери качества по сравнению с растровыми изображениями (рис. 1.2).
SVG–графика может быть создана "на лету" при помощи любого языка программирования (Javascript, Java или C#) и возможно управление видом этой графики в режиме работы приложения.

Рис. 1.1. Бизнес-диаграмма в формате SVG

(http://esvg.ultimodule.com/bin/esvg/templates/splash.asp?NC=2483X)

На момент написания этого курса рабочей версией является SVG 1.1. Поэтому именно его мы и будем рассматривать.

Поддержка SVG браузерами

На сайте W3C размещен официальный список программного обеспечения для SVG:

http://www.svgi.org/

www.intuit.ru

Использование SVG для гибких, расширяемых и занятных фонов. Часть первая

Решил сделать вольно-раздолбайский перевод статьи о SVG с ALA. Это перевод первой части, в ближайшее время постараюсь перевести вторую.

Масштабируемая векторная графика (SVG) состоит из кругов, прямоугольников и путей, представленных в XML и объединенных в изображения на веб-страницах. Вы можете применять сплошную заливку, градиенты и некоторые фильтры SVG — не все браузеры поддерживают все типы фильтров. Вы можете включать текст, изображения и можете копировать ваши SVG столько, сколько хотите. Чаще всего SVG используется в графических программах, для создания диаграмм, иллюстраций, анимаций. Однако, ничто не мешает нам использовать SVG для дизайна сайтов —это дает нам удивительно универсальные возможности в веб-дизайне, занятные в использовании. В этой вводной статье я рассмотрю некоторые важные моменты в работе с SVG, включая поддержку в браузерах. Во второй части мы рассмотрим, как найти и адаптировать SVG, которые вы можете найти в Сети, или как создать SVG-изображения самостоятельно и добавить их на вашу страницу.

Дикий SVG

Некоторые люди используют SVG для дизайна сайтов, обычно для значков топиков. Например, Sam Ruby, сопредседатель рабочей группы HTML5, использует SVG в постах своего блога. Erik Dahlstrom из команды Opera делает то же самое, что и Jeff Schiller на Codedread.

Джефф использует SVG не только для иконок, но и встраивает в меню и весь его сайт использует векторную графику. На сайте Emacs для Mac OS X в основном используется SVG, чтобы увидеть масштабирование SVG в действии, изменить размер страницы.

Я (т.е. автор статьи — прим. пер.) использовал SVG для получения цветов градиента из фото, отображаемого в данный момент (перезагрузите пару раз страницу, чтобы увидеть эффект), как причудливый элемент фона и для общей темы моих сайтов.

Когда можно и когда нельзя использовать SVG

Вы можете использовать SVG везде, где вы используете GIF, JPEG или PNG. Используя SVG, вы предоставляете инструкции по отрисовке, а не растр.

Будучи векторным графикой, SVG может масштабироваться, чтобы вписаться в размер страницы, тогда как JPEG или GIF этого не могут совсем или, как минимум, не могут сделать это чисто. Эта масштабируемость может быть особенно полезна, когда пользователь просматривает страницу и на таком маленьком устройстве, как iPhone, и на большом 32-дюймовом мониторе. На скриншотах ниже показан сайт EMACS для OS X открытый браузере на весь экран и ужатом по вертикали. Обратите внимание, что изображение уменьшается так, чтобы вписаться в окно браузера, не нарушая при этом пропорций. Независимо от того, насколько велика страница, изображение масштабируется корректно.

Скриншот сайта EMACS для Mac OS X

Тот же сайт, но в уменьшенном окне браузера

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

Каким бы хорошим SVG не был, существуют случая, когда вам не следует его использовать. Например, вы можете преобразовать фото в SVG, но преобразование не будет точным. К тому же ресурсов клиента может не хватить для отрисовки такого изображения. Я сконвертировал довольной сложный JPEG в SVG для тестирования. В результате повисла не только первая бета Хрома, но и компьютер, во время обработки SVG.

Итак, SVG не может заменить фото или сложные изображения, но для всего остального вполне подойдет. До того, как мы измажем руки во второй части этой статьи, нам важно узнать о поддержке SVG в браузерах.

Поддержка браузерами

Основные браузеры — Firefox, Chrome, Safari и Opera поддерживаю т SVG либо в виде файла, загружаемого в объект, либо встраиваемого непосредственно в XHTML кода. Джефф Шиллер, упомянутый ранее, поддерживает график, показывающий поддержку SVG в различных браузерах.

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

Однако, нехватка более продвинутых функций не должна влиять на использование SCV в дизайне сайта, так как я не рекомендую использовать сложные SVG-изображения для фона страницы, потому что браузер потратит много времени на их отрисовку.

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

Как упоминалось ранее, большинство основных браузеров поддерживает основные возможности SVG. Как всегда, существенным исключением является Internet Explorer.

Internet Explorer и SVG

Я одобряю использование SVG, но как было сказано, один из основных браузеров не поддерживает SVG, и этот браузер — Internet Explorer. К счастью для нас, отсутствие поддержки SVG в IE больше не является для нас преградой.

Такие библиотески, как VGWeb, Ample SDK, и Raphael реализуют поддержку SVG в текущей и пршлых версиях IE. Вдобавок, спецификация HTML5 задействует встраивание SVG в HTML, тогда как до этого он поддерживался только в XHTML. Это расширило поддержку доктайпов, а недавние новости о присоединении Microsoft к рабочей группе W3C SVG дает надежду, что IE все-таки начнет поддерживать SVG в девятой версии.

Тем временем, число мобильных устройств в вебе увеличивается, и ни одно из популярных устройст не зависит от IE. Вдобавок, растущая поплярность минималистичного дизайна может быть использована для эффективного введения SVG на ваши сайты. Если сайт имеет привлекательный, но минималистичный дизайн, SVG может быть добавлен, как занятная инновация, и не важно, отобразится он или нет. Упомянутые ранее сайты, использующие SVG, в случае отсутствия поддержки со стороны браузера либо предоставляют альтернативную графику, либо предлагают читателю использовать браузер, поддерживающий SVG. (И не надо бить авторов за последний вариант — такой подход уже больше 10 лет работает для IE в браузерных войнах).

Что насчет доступности?

SVG предоставляет возможность использовать короткие и длинные текстовые альтернативы изображениям. Т.к. он основан на языке разметки, вы можете легко добавить название и описание при помощи элементов title и desc, как показано ниже.

К несчастью, поддержка этих элементов для чтения с экрана недостаточно, что создает проблему для сайтов, где доступность является обязательной.

* This source code was highlighted with Source Code Highlighter.

Title обычно используется в качестве заголовка документа в standalone SVG. И title, и desc также могут использоваться в более сложной разметке в других пространствах имен. Вдобавок, для более сложных метаданных существует элемент metadata, который может содержать RDF/XML для таких вещей, как информация об авторских правах и авторе.

Поскольку поддержка SVG для чтения с экрана скудна, можно использовать обработку на стороне сервера или XSLT для доступа к информации во встроенном в страницу SVG и генерировать HTML из элементов title, desc, и metadata. Для фона и изображений, используемых в качестве элементов дизайна, можно убрать элементы title и desc за ненадобностью.

Больше прочитать о доступности и SVG можно по следующим ссылкам:

habrahabr.ru

SVG и CSS - Веб-технологии для разработчиков

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG.

Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.

Это вторая секция Части II Руководство по CSS.Предыдущая секция: JavaScriptСледующая секция: Данные XML

Общая информация: SVG

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.

Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

Немного подробностей

На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference, для информации о поддержке отдельных элементов.

В остальные версии можно добавть поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.

Более подробная информация о SVG в Mozilla, представлена на станице SVG в этой wiki.

За дело: Демонстрация SVG

Создайте новый документ SVG, как обычный текстовый файл, doc8.svg. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style8.css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>SVG demonstration</title> <desc>Mozilla CSS Getting Started - SVG demonstration</desc> <defs> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path d="M0,-200 a40,40 0 0,0 -62,10"/> </g> <g> <use xlink:href="#segment"/> <use xlink:href="#segment" transform="rotate(18)"/> <use xlink:href="#segment" transform="rotate(36)"/> <use xlink:href="#segment" transform="rotate(54)"/> <use xlink:href="#segment" transform="rotate(72)"/> </g> <g> <use xlink:href="#quadrant"/> <use xlink:href="#quadrant" transform="rotate(90)"/> <use xlink:href="#quadrant" transform="rotate(180)"/> <use xlink:href="#quadrant" transform="rotate(270)"/> </g> <radialGradient cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop offset="33%"/> <stop offset="95%"/> </radialGradient> </defs> <text x="-280" y="-270"> SVG demonstration</text> <text x="-280" y="-250"> Move your mouse pointer over the flower.</text> <g> <circle cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <use xlink:href="#petals"/> <use xlink:href="#petals" transform="rotate(9) scale(0.33)"/> </g> </svg>

Создайте новый файл CSS, style8.css. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

/*** SVG demonstration ***/ /* page */ svg { background-color: beige; } #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* outer petals */ #outer-petals { opacity: .75; } #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; } /* inner petals */ #inner-petals .segment-fill { fill: yellow; stroke: yellowgreen; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; }

Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.

Эта wiki не поддерживает вставку SVG в страницы, мы не имеем возможности поэтому продемонстрировать это здесь. Изображение будет выглядить так:

Примечания к демонстрации:

Документ SVG привязывается к таблице стилей общепринятым способом.
SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.

Задание

Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.

Посмотреть решение к этому заданию.

Что дальше?

В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с докумнетами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML

developer.mozilla.org

Смотрите также

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..