Все записи автора Андрей Семенов

Почему SVG теги опубликованы на сайте теги HTML

SVG теги

Файлы SVG формата могут самостоятельно располагаться на сайтах в сети Интернет. Их подключают к страницам используя тег img или через css свойство  background-image блочных тегов.

Но, с появлением HTML5 графику формата SVG можно интегрировать непосредственно в тело страницы. Об этом говорится во введении от w3c.

А вот и маленький пример от консорциума:

<!doctype html> 
<title>SVG in text/html</title> 
   <p> A green circle: 
     <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>  
   </p>

SVG. Масштабируемая векторная графика. Часть 4

SVG теги
Градиенты и текстуры.
А как же градиенты, спросите вы, но я отвечу — это тоже просто. В спецификации определено два типа градиента: линейный и радиальный.
Градиенты положено помещать внутрь тэга контейнера <defs> (от англ. definitions — определения), это говорит о том, что содержимое предназначено для многократного применения. Линейный градиент определен парным тэгом <linearGradient>, (а что же должно быть внутри?) который включает в себя тэги <stop />. В спецификации об этом сказано: «Буйство красок, чтобы использовать в градиенте определено элементами ‘stop’, которые являются дочерними элементами ‘linearGradient’ элемента или ‘radialGradient’ элемента.» Разберем вышесказаное на примере градиента для нашего первого элемента (прямоугольника с фоном):
<defs>
        <linearGradient id="sky_n_water">
                <stop offset="0%" stop-color="#09f" />
                <stop offset="35%" stop-color="#9ff" />
                <stop offset="36%" stop-color="#fff" />
                <stop offset="100%" stop-color="#09f" />
        </linearGradient>
</defs>
Вот они наши запланированые переходы в верхней части от темно-синего к светло-синему, а ниже от белого к темно-синему изображающие небо и воду.
Рекомендую, для проектирования градиентов использовать Фотошоп и для этого несколько причин. Во-первых в «Редакторе градиентов» мы видим удобную шкалу на которой размещаем наши контрольные точки (тэги <stop />) и offset атрибут мы видим в поле «Позиция», что можно считать вторым плюсом, а в третьих на «Палитре цветов» поставив галочку в «Только Web-цвета» мы в поле «#» видим код RGB 0099ff, который можно смело сокращать до трех цифр 09f и писать их в stop-color атрибут.

Вот так легко и просто, но на практике мы получим прямоугольник с градиентом идущим слева-направо, вместо желанного сверху-вниз. Градиент надо повернуть и нам поможет атрибут gradientTransform = «rotate(90)», который необходимо указать в тэге <linearGradient>.
Применим теперь наш первый градиент на практике:
<defs>
        <linearGradient id="sky_n_water"  gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#09f" />
          <stop offset="35%" stop-color="#9ff" />
          <stop offset="36%" stop-color="#fff" />
          <stop offset="100%" stop-color="#09f" />  
        </linearGradient>
        </defs>
        <style type="text/css"><![CDATA[
          #bg {fill:url(#sky_n_water) #09f; stroke="none"}
        ]]></style>
<rect id="bg" width="100%" height="100%"/>

А вот и новые свойства для нашей «кочки»:

<linearGradient id="grass">
    <stop offset="0" stop-color="#6c0" />
    <stop offset="1" stop-color="#9f3" />
</linearGradient>

.grass {fill:url(#grass) #6c0; stroke:#090; stroke-width:1}
Обратите внимание, на этот раз для параметра offset я использовал не проценты (0 и 1 соответствуют 0% и 100%, а если бы нам понадобилась середина мы написали бы 0.5 вместо 50%).
Радиальный градиент для цветка сделать тоже не сложно. Отличается только тэг обрамляющий наши точки остановки цвета, вместо linearGradient используется radialGradient
<radialGradient id="flower">
   <stop stop-color="#f00" offset="0"/>
   <stop stop-color="#f00" offset="0.3"/>
   <stop stop-color="#fff" offset="0.3"/>
   <stop stop-color="#fff" offset="1"/>
</radialGradient>
.flower {stroke:#ccc; stroke-width:0.01; fill:url(#flower) #f00}
Текстуры в нашем проекте не используются, хотя их успешно можно было бы применить для раскрашивания наших «кочек». Дело в том, что в SVG для текстурирования используются не только растровые текстуры, но и векторные (что важнее). И наши цветочки можно было бы вынести из основного рисунка и поместить в определения <defs> заключив их в тэге <pattern>. Таким образом присвоив текстуре (паттерну) идентификатор мы сможем использовать ее для заливки. Обязательно попробуйте эту методику в ваших проектах — не пожалеете.

Трансформации

Спецификацией предусмотренно несколько видов трансформации — это перемещение (translate), масштабирование (scale), поворот (rotate), наклон по оси Х (skewX), наклон по оси Y (skewY) и matrix, которая в своих шести параметрах может включать сумму нескольких трансформаций. Но поскольку тема матричного представления двумерного пространства выходит за рамки данной статьи примем как факт, что те из вас кто изучал «Высшую математику» разберутся с матричными трансформациями сами, а те кто не изучал либо будут использовать последовательность простых трансформаций, либо найдут учебник по вышке и изучат матрицы самостоятельно. (заранее огорчу — к Морфиусу, Тринити и Нэо наши матрицы отношения не имеют, а их изучение скучнее просмотра одноименного фильма).
Вот матричные трансформации для цветков. Каждая, из них, увеличивает цветок в десять раз и переносит на новое место.
transform="matrix(10,0,0,10,45,75)"
 transform="matrix(10,0,0,10,125,60)"
 transform="matrix(10,0,0,10,160,85)"
Заменить ее обычными можно так:
transform = “scale(10) translate(45,75)”
Важно помнить, что последовательность трансформаций имеет важное значение. Поясню почему… Ось вращения для объекта всегда совпадает с 0,0 и если сначала его переместить, а затем повернуть, то результат будет сильно отличаться от того, который получиться при повороте с последующим перемещением. Тоже касается и масштабирования, так как при увеличении уже перемещенного объекта увеличится и расстояние его перемещения.

В проекте мы не применяем трансформацию «skewX» или «skewY» предназначенные для наклона объекта по горизонтали или вертикали, но они возможно вам пригодятся для проектов реализующих псевдо3D.Например, из трех прямоугольников можно создать куб, как показано на рисунке.
Для «кочек» я выбрал следующие значения [(3,0,0,3,1000,500), (4,0,0,4,480,410), (6,0,0,6,-150,260)] и получил очередной файл SVG. Да, эта картина грубовата и не сглажена фильтрами и спецэффектами Фотошоп, но я нахожу другой факт более важным — наш SVG весит 7,5 кБ, а этот JPEG с размером 400*250 и качеством 60% уже 18 кБ (а если пытаться сохранить в полном кач-ве и с полным разрешением, то вышло бы — 300 кБ). Еще один плюс — SVG сам масштабируется под разрешение экрана и размер рабочей области браузера, а под растр нам пришлось бы придумывать ухищрения.
И у нас в SVG есть простор для совершенствования, постаравшись мы можем еще уменьшить размер файла, добавив несколько атрибутов изменить стиль линий. Да и визуальные фильтры разработаны W3C, но пока, правда, реализованы не во всех браузерах. Мой любимый Google Chrome в числе передовиков и полностью поддерживает все спецификации консорциума W3C.

Визуальные фильтры.

Не углубляясь в подробности сразу показываю код визуального фильтра:
<filter id="BlurFar"><feGaussianBlur stdDeviation="1.5" /></filter>
<filter id="BlurNear"><feGaussianBlur stdDeviation="0.5" /></filter>
<filter id="BlurSmall"><feGaussianBlur stdDeviation="0.1" /></filter>

  <g transform="matrix(3,0,0,3,1000,500)" filter="url(#BlurFar)">
  <g transform="matrix(4,0,0,4,480,410)" filter="url(#BlurNear)">
   <path d="m0,100 q100,-100 200,0z" filter="url(#BlurSmall)" />
Вот такие, незначительные, изменения привносят в наш пейзаж немного реалистичности, за счет DOF (от англ. depth of field — на русский переведу, как глубина резкости). Парный тэг <filter> как и градиенты располагают внутрь контейнера <defs>, и он (в свою очередь) содержит один и более тэгов описывающих фильтры. Я применил тэг <feGaussianBlur> для размытия по Гауссу, а другие фильтры вы без труда отыщите в спецификации. Применять определенный в «defs» фильтр можно и к группам и к отдельным объектам указав им атрибут «filter».
Быстро и просто мы разобрали на практике большую часть современного SVG. Пока что за бортом остались связанные и интегрированные растры, текстовые объекты, шрифты, анимация и использование сценариев.

SVG. Масштабируемая векторная графика. Часть 3

SVG теги
Область просмотра, клиппирование.
Клиппирование — это обрезка объектов выходящих за рамки области просмотра (любой другой области). Зачем нам это нужно? Внутрь тэга <svg> я добавил атрибуты viewBox=»0 0 1440 800″ preserveAspectRatio=»xMidYMax slice». ViewBox ограничивает область просмотра и гарантирует нам, что «горизонт» окажется в одной и той же Y координате на разных браузерах. PreserveAspectRatio срежет лишнее по краям и скроет верх изображения если пропорции экрана не позволят все показать.
Таким образом, мы ограничили область просмотра нашего пейзажа окном с размерами 1440 на 800 единиц, которые будут пересчитываться в реальные пиксели уже в браузере и если пропорции его окна просмотра не будут соответствовать заявленным нами, то он возьмет нижний край пейзажа, расположит его снизу и срежет верх, либо обрежет боковые края. Обе ситуации станут понятнее если вы посмотрите на картинку.
Еще один важный момент, который должны помнить те, кто планирует писать файлы SVG своими руками (без применения графических редакторов).Начало координатной плоскости лежит в левом верхнем углу и оси направлены слева-направо и сверху-вниз.

Графические примитивы и их свойства.

Теперь давайте снова вернемся к основной цели данной статьи — написание пейзажа для интернет страницы. У нас уже есть структура документа, а точнее схема по которой мы будем добавлять графические примитивы. Мы разобрались как эти примитивы описывать в файле и нам осталось разобраться со свойствами которыми обладают наши примитивы, а также трансформацией объектов и групп размещающей их на холсте в конечном виде.
Начнем со свойств, таких как толщина линии обводки, ее цвет, а так же заливкой, и сразу приведу маленький пример:
<rect width="1198" height="398" fill="none" stroke="blue" stroke-width="1" />
Тут у нас прямоугольник без заливки, но с бордюром синего цвета в 1 единицу толщиной. Эти свойства указаны в атрибутах тэга, что не всегда удобно. И W3C находит выход — свойства можно описать в парном тэге <style> в манере CSS как это делается в HTML документах и тогда написав:
.blueBorder {fill:none; stroke:blue; stroke-width:1}
мы можем задать те же свойства не только вышеописанному прямоугольнику, но и любому другому примитиву указав атрибут для тэга примитива например:
<circle cx="600" cy="200" r="100" />
Ну что же, теперь мы во всеоружии и можем приступать к написанию нашего пейзажа… Для начала расставим «заглушки» обозначив блоки, которые будем постепенно заполнять:
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css"><![CDATA[
                /* Стили */
        ]]></style>
          <defs>
                /* Градиенты */
        </defs>
        <g>
                /* Группы и примитивы */
      </g>
 </svg>
Тут ненавязчиво появились еще тэги требующие пояснения для новичка. <!DOCTYPE — это еще один из заголовочных обязательных тэгов указывающий на тип документа с которым будет иметь дело браузер его разбирающий. «Ноги» в данном случае растут из древнего SGML, предшественника XML, в котором тип документа описывался файлом .dtd и такой файл для SVG имеется на сервере W3C, в чем мы уверены указывая его в ссылке. Еще один непонятный тэг <![CDATA[ и его пара ]]> ограничивают «неродную» для SVG таблицу стилей написаную в манере CSS, о чем сказано в атрибуте type=»text/css» тэга <style>.
Добавим наш фон (прямоугольник) и получим:
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 800" preserveAspectRatio="xMidYMax slice">
        <g>
           <rect id="bg" width="100%" height="100%" />
        </g>
 </svg>
Красным я выделил то, что добавил, и далее буду писать только те куски кода которые будут добавляться. Теперь вы можете увидеть наш первый результат. Надеюсь он вас вдохновил, а чтение не сильно утомило отбив желание изучать SVG.
Что же у нас дальше по плану? Ах да, «кочки». И мы приступаем к рисованию обещанной основы из контура состоящего из ДВУХ точек. Почему их всего две спросят некоторые из вас, а потому, что у нашей кривой Безье только начало и конец, а обратно в начало браузер пройдет кратчайшим путем (по прямой). Мы воспользуемся квадратичной кривой, хотя возможно больше подошла бы кубическая (проверим).
<path d="m0,0 q100,-100 200,0z" />
Вот, вполне приемлемая кочка. Но она пока что черная и стоит не на своем месте. Зададием ей линию обводки. Получим, к примеру:
.grass {stroke:#090; stroke-width:1; fill:#0f0;}

<path d="m0,100 q100,-100 200,0z" />
Нарисуем тропинку. Ее опишет следующий путь — «m50,0 q50,-10 70,-47 0,50 -20,47z» или «m50,0 q10, -50 70,-47 -50,0 -20,47z», обратите внимание — точки в обоих случаях одни и те же, изменяются только опорные пункты путей (нам нужны оба вида «тропинок», чтобы отличать первую и вторую «кочки»), а стиль у них будет такой «fill:#cc9; stroke:#990; stroke-width:2″ назовем его footPath.
.footPath {fill:#cc9; stroke:#990; stroke-width:2}

<path d="m50,0 q10,-50 70,-47 -50,0 -20,47z" />
Переходим к цветочкам. Точнее, нарисуем контур одного цветка, а затем создадим несколько трансформированных копий этого цветка. Путь я «выдернул» из оптимизированного SVG сгенерированного в Inkscape — «m0.54688,-0.11829 c-0.37472,-0.43643 -0.25072,1.0885, 0.04856,0.59722, 0.29928,-0.49124 -1.1127,0.09791-0.55298,0.23074, 0.55967,0.13283, -0.43695,-1.0279 -0.39033,-0.45461, 0.046622,0.57333, 0.84261,-0.73321, 0.31175,-0.51171 -0.53086,0.22151, 0.95771,0.57479, 0.583,0.13836z» для свойств используем радиальный градиент (как его сделать вы узнаете в следующей части статьи) и тонкую серую обводку. «Кочка» почти готова, но она пока еще не на своем месте, как и цветочки, которых хоть и три, но они пока что маленькие и наложены друг на друга.
.flower {stroke:#ccc; stroke-width:0.01}

<path d="m0.5468 .. 0.1383z" />
<path d="m0.5468 .. 0.1383z" />
<path d="m0.5468 .. 0.1383z" />
Объединяем элементы описывающие «Кочку» тэгом контейнером <g> в группу, дважды «копипастим» (дублируем) получая таким образом три «Кочки», как и было задуманно вначале. В первой группе оставляем только цветок в середине, а в средней удаляем первый цветок (их перекроют другие объекты, поэтому они лишние). Меняем путь в тропинке средней «Кочки», а в передней вообще его удаляем. Таким образом мы получаем три группы расположенные одна над другой и нам осталось только указать для каждого тэга <g> атрибут transform=»matrix()», дабы разместить их на холсте с нужным масштабом и в нужных координатах, но об этом речь пойдет в следующей части статьи.
«Облака и островок справа». Три контура: Белое облако с голубой обводкой, голубое облако без обводки и »пролесок» темно-зеленый без обводки объеденены в группу, котораябудет перемещена в правую часть горизонта. Здесь вы можете посмотреть на контуры. Затем была создана копия этой группы, чтобы «отразиться» в воде. Этой группе добавлен атрибут opacity (прозрачность).
<g>
 <path d="m..z" fill="#fff" stroke-width="1" stroke="#09f" />
 <path d="m..z" fill="#3cf" />
 <path d="m..z" fill="#060" />
</g>
<g opacity="0.5">
 <path d="m..z" fill="#fff" stroke-width="1" stroke="#09f" />
 <path d="m..z" fill="#3cf" />
 <path d="m..z" fill="#060" />
</g>
Код приведен не полностью. Немного поразмыслив я не стал придумывать новые контуры для облаков слева, а решил воспользоваться новыми трансформациями для той же группы, что только что была разработана. Пришлось просто убрать контур изображающий «пролесок».
Файл уже весит 7,5 кБ, но мы то помним, что Jpeg с таким разрешением и количеством оттенков весит как минимум в десять раз больше. Остались мелочи: два облачка посреди небосвода и два деревца на двух «кочках».
Сначала деревца. Здесь можно взглянуть на контуры. Крона сформирована из трех клонов одного и того же контура. Думаю вы уже достаточно попрактиковались и сразу заметили, что применением атрибута opacity для среднего контура кроны мы достигаем эффекта при котором создается впечатление, что контуров больше и используется не 3, а 5 оттенка зеленого.
Первое дерево мы вставляем в группу «левой кочки». Дерево на второй «кочке» появляется за счет матричной трансформации и на этот раз я кроме масштабирования и переноса буду использовал отражение по вертикали. Добавляем эту группу к средней «кочки» и, само собой разумеется, она получит «в наследство» размытие, которое в литературе принято называть DOF, которое будет реализовано визуальным фильтром рассматриваемым в следующей части статьи.
Облака посреди небосвода мы сделаем не два, а четыре. Одна пара будет иметь четкий хотя и тонкий контур, а вторая (находящаяся под ней) этого контура лишена, зато будет размыта фильтром. Не стану приводить отдельно контуры этих облаков, а лучше сразу покажу конечный результат к которому мы стремимся.

SVG. Масштабируемая векторная графика. Часть 2

SVG теги
Пишем файл SVG своими руками.
В прошлой части статьи мы уже выяснили, что файлы SVG текстовые, а стало быть фраза «написать пейзаж» приобрела второй, более привычный простому обывателю смысл. Итак минимальная заготовка файла SVG включает в себя следующий код:
<?xml version=»1.0″ encoding=»UTF-8″ standalone=»no»?>
<svg xmlns=»http://www.w3.org/2000/svg» version=»1.1″>
<!— Content —>
</svg>
Здесь в первой строке стандартный для всех файлов семейства XML пролог (лат.: — вступление). Ведь для вас не секрет, что файлы SVG из этого семейства. Во второй строке парный тэг <svg> ограничивающий тело документа и это для вас очевидный факт, ведь в последней строке вы видите его «хвост» — закрывающий тэг </svg>. Надеюсь, что стандартный комментарий (в третьей строке) указывающий куда мы будем писать дальше, тоже никого не напугал. Тем же, для кого все вышесказанное — «темный лес», а желание освоить материал все-таки присутствует рекомендую отыскать на просторах интернета толковый учебник по XML 1.0
С теми, кто все еще в строю, едем дальше… Разработаем схему нашего рисунка, а для начала найдем себе референсы в сети, либо нарисуем от руки, то что хотим увидеть в итоге. Я применил оба подхода и накопав кучу малоприемлемых картинок нарисовал (по аналогии с одним из понравившихся) свой:

Вот так, наскоро набросав ручкой на листке, отсканировав и разукрасив в Фотошопе я получил растровый эскиз будущего векторного рисунка.

Начнем со схемы документа и структура SVG файла «нам в помощь». Ведь то, что находится на заднем плане должно идти вначале, а то, что будет указано в файле в последнюю очередь отобразиться на рисунке в верхнем (наружном) слое, т.е. на переднем плане. И не будем забывать об оптимизации кода, о его минимализации. Итак, подложкой на нашей картине станет прямоугольник закрашенный сложным градиентом, где в верхней части мы переходим от темно-синего к светло-синему, а ниже от белого к темно-синему изображая, таким образом, небо и воду (еще не решил что это — море или озеро) эффектно выделив горизонт. Затем у нас будут идти три сгруппированных объекта, которые мы назовем «кочки» или «островки», кому как больше понравиться. Почему мы говорим о группах? Да просто, так мы нарисовав один сложный (составной) объект можем скопировав его и слегка трансформировав получить новый. Таким образом, сначала рисуется правая (на рисунке) «кочка», затем она увеличивается и переносится немного влево, затем сделаем еще одну копию и повторим увеличение и перенос.
Два деревца на двух передних «кочках» это тоже клоны для которых применена трансформация «масштаб+перенос». Облака отражающиеся в воде, это тоже пары, где клон имеет масштаб равный « 1″ по оси Y и «+1″ по оси Х, что приводит к отражению Y координат относительно оси Х (эффект «зеркала»). То же касается и пролеска, который виден вдали (может это островок, а может противоположный берег залива, решайте сами). Ну и в последнюю очередь идут облака которые мирно висят посреди нашего неба и не имеют отражений.
Теперь «копнем поглубже» и поговорим о группах — сложных объектах состоящих из нескольких контуров. На моей картинке я вижу таких несколько: это «кочки» о которых мы уже говорили, а так же отражающиеся облака и деревья. С облаками все просто, тут по два контура, где на заднем плане (напоминаю, что в файле он будет идти впереди/вначале) контур с белым фоном, ближе контур залитый голубой краской. Чуть больше работы предстоит с деревьями, ведь тут у нас крона из трех контуров с разными оттенками зеленого, но вперед мы изобразим ствол дерева в виде контура залитого коричневой краской (простите, забыл покрасить в Фотошопе) и тогда крона идущая в файле следом за ним накроет его на картине. И наконец, «высший пилотаж», наши «островки-кочки»… Здесь залитая градиентом от темно-зеленого к светлому основа представленная контуром ограниченному ДВУМЯ точками, но об этом позже. На первом и втором клоне добавлены тропинки, чтобы картинка не получилась совсем уж скучной пав жертвой моего желания оптимизировать/минимизировать. И цветочки повсюду, что может быть чудесней, один контур и градиент по схеме красный-красный-белый-белый, т.е. нам не нужно рисовать серединку и лепестки отдельно, а выделить этот факт цветом. К тому же сделав несколько вариантов градиента для цветов мы сможем сделать красивые и пестрые газончики.
Ну вот, первый этап нами уже пройден и мы можем начертить схему документа, который будем писать на SVG. Формат SVG являясь членом семейства XML наследует от него важный признак — древовидную структуру, которую мы и отображаем в нашей схеме:

Файл который мы напишем лишь слегка отличается, дополняя ее нюансами реализации.

В своем проекте мы будем использовать только два графических примитива — это прямоугольник и контур, но для «общего развития» сообщу, что в спецификации SVG описаны еще несколько, это: круг, овал, линия, полилиния и полигон (многоугольник), и еще (чуть не забыл) текст.
Начнем вникать в тонкости описания примитивов. С прямоугольником, который представлен тэгом <rect />, что вполне естественно, никаких сложностей быть не может. Тут среди прочих нам важны четыре атрибута, два на позицию (положение на холсте — Х и Y) и два на размер (ширина и высота). Гораздо сложнее примитив «контур» — тэг <path /> у которого есть атрибут под названием «d» (от англ. data — данные) — это и есть собственно путь по которому пойдет перо рисуя наш контур. Давайте подробнее разбираться, ведь в спецификации этой теме посвящена вся восьмая глава…
Итак, про атрибут «d» в спецификации сказано, что он — «определяет контур фигуры». Осталось выяснить как он это делает. Читаем спецификацию дальше и находим вот что: «атрибут ?d? содержит инструкции для перемещения, рисования линии, дуги, кривой Безье (и квадратичной и кубической), а также закрытия (замыкания).». Эти инструкции (команды) записываются латинскими буквами и ниже я привожу таблицу с их определением:
M или m (x, y)
Начинает новый подконтур в заданных (x, y) координатах. М. (прописная буква) указывает, что далее следуют абсолютные координаты; м. (строчная) указывает, что координаты относительные. Если эта команда сопровождается многократными парами координат, следующие пары это неявные команды рисования линий (L / l). Следовательно, неявные команды будут относительны, если команда перемещения пера относительна, и абсолютны, в противном случае. Если (m) появляется как первый элемент контура, то эту команду принимают как (М) с парой абсолютных координат, но в этом случае, все последующие пары координат считаются относительными несмотря на то, что начальная команда интерпретируется как перенос пера в абсолютной системе координат.
Z или z без параметров
Закрывает текущий контур, рисуя прямую линию от текущей точки до начальной точки текущего подконтура. Так как Z и z не берут никакие параметры, они имеют идентичный эффект.
L или l (x, y)
Рисует линию от текущей точки до заданной (x, y) координатами, которые становятся новой текущей точкой. L (прописная буква) указывает, что далее следуют абсолютные координаты; l (строчная) указывает, что будут следовать относительные координаты. Множество пар координат может быть определено, чтобы рисовать «ломаную» линию. В конце команды, новая текущая точка устанавливается на заключительный набор координат.
H или h (x)
Рисует горизонтальную линию от текущей точки (cpx, cpy) к (x, cpy). H (прописная буква) указывает, что будут следовать абсолютные координаты; h (строчная) указывает, что будут следовать относительные координаты. «x» можно указать многократно (хотя обычно это не имеет смысла). В конце команды, новой текущей точкой становится (x, cpy) в последнем x.
V или v (x)
Рисует вертикальную линию от текущей точки (cpx, cpy) к (срx, y). V (прописная буква) указывает, что будут следовать абсолютные координаты; v (строчная) указывает, что будут следовать относительные координаты. «x» можно указать многократно (хотя обычно это не имеет смысла). В конце команды, новой текущей точкой становится (cpx, y) в последнем y.
C или с (x1, y1, x2, y2, x, y)
Рисует кубическую кривую Безье от текущей точки до (x, y) используя (x1, y1) как контрольный пункт в начале кривой и (x2, y2) как контрольный пункт в конце кривой. C (прописная буква) указывает, что абсолютные координаты будут следовать; c (строчная) указывает, что относительные координаты будут следовать. Могут быть определены многократные наборы координат, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
S или s (x2, y2, x, y)
Рисует кубическую кривую Безье от текущей точки до (x, y). Первым контрольным пунктом (вначале кривой) считается отражение второго контрольного пункта на предыдущей команде относительно текущей точки. (Если нет никакой предыдущей команды или если предыдущая команда не была C, c, S или s, считается, что первый контрольный пункт совпадает с текущей точкой.) (x2, y2) — второй контрольный пункт (то есть, контрольный пункт в конце кривой). S (прописная буква) указывает, что абсолютные координаты будут следовать; s (строчная) указывает, что относительные координаты будут следовать. Многократные наборы координат могут быть определены, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
Q или q (x1, y1, x, y)
Рисует квадратичную кривую Безье от текущей точки до (x, y) используя (x1, y1) как контрольный пункт. Q (прописная буква) указывает, что абсолютные координаты будут следовать; q (строчная) указывает, что относительные координаты будут следовать. Многократные наборы координат могут быть определены, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
T или t (x, y)
Рисует квадратичную кривую Безье от текущей точки до (x, y). Контрольный пункт принят, чтобы быть отражением контрольного пункта на предыдущей команде относительно текущей точки. (Если нет никакой предыдущей команды или если предыдущая команда не была Q, q, T или t, предполагется, что контрольный пункт совпадает с текущей точкой.) T (прописная буква) указывает, что абсолютные координаты будут следовать; t (строчная) указывает, что относительные координаты будут следовать. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
A или а (rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)
Рисует краткую дугу от текущей точки до (x, y). Размер и ориентация эллипса определяют два радиуса (rx, ry) и угол x-axis-rotation, который указывает, как эллипс в целом вращается относительно текущей системы координаты. Центр (cx, cy) эллипса рассчитан автоматически, чтобы удовлетворить ограничениям, наложенным другими параметрами. large-arc-flag и sweep-flag вносят вклад в автоматические вычисления, и помогают определить, как дуга оттянута.
У нас готово почти все чтобы начать писать файл с нашим пейзажем, а пока «лирическое отступление»…
Перед началом самостоятельной работы с SVG я рекомендую почитать файлы сгенерированые графическими редакторами. Ничего (к сожалению) не могу сказать о Adobe Illustrator’e, потому что им я никогда не пользовался. Знаю Corel Draw экспортирует, но он является продуктом коммерческим и не каждый осилит его приобретение только для того, чтобы поэкспериментировать с экспортом в SVG. Я рекомендую скачать редактор векторной графики Inkscape с одноименного сайта http://www.inkscape.org. Этот редактор распространяется бесплатно, и что самое главное, SVG его родной формат. Сохраняйте файлы в режиме «Оптимизированный SVG» и открывайте их «Блокнотом» (любым текстовым редактором). В режиме оптимизации мы видим минимум «мусора» в коде файла и если вам лень «просчитывать» ваши рисунки можете использовать Inkscape как основной инструмент для создания SVG файлов.
В следующей части статьи мы просчитаем контуры наших объектов, научимся их трансформировать и размещать на холсте, затем приступим к заполнению нашего файла-болванки.

SVG. Масштабируемая векторная графика. Часть 1

SVG теги
CG.

 

Компьютерная графика (CG от англ. - Computer Graphics), в привычном на сегодняшний день понимании, развивается с момента появления первых графических операционных систем. И начиная с первых их реализаций она разделилась на два основных направления: графика растровая и векторная. Для этих направлений разработано и применяется великое множество форматов файлов, редакторов и просмотровщиков. Для того, чтобы понять в чем основное отличие растровой и векторной картинки давайте посмотрим на пример показанный ниже.

Здесь мы видим смайлик, который при масштабе 1х1 будет выглядеть одинаково и для растровой и для векторной графики. Различия проявляются при масштабировании. При увеличении в десять раз мы на растровой картинке, которая показана в центре видим, что точки превратились в квадратики, а на векторной картинке (справа) край области изображающей глаз смайлика остался гладким.
Так будет всегда и это справедливо для любых типов файлов. Для примера отмечу, что BMP, JPEG, PNG относятся к растровым, а EMF, AI, CDR к векторным. И если опуститься до уровня кода этих файлов, то можно говорить о том, что файлы растровой графики содержат информацию о цвете пикселей (точек) располагающихся в виде прямоугольной матрицы, а файлы графики векторной информацию об объектах картины, которыми могут быть простые фигуры, как прямоугольник, круг, овал, и т.п., а так же их свойствах (размер, положение, цвет обводки и заливки).
В данной статье речь пойдет о SVG (от англ. - Scalable Vector Graphics) масштабируемой векторной графике предназначенной для сети Интернет.

Интернет.

Возможно не всем известно, но глобальная сеть и связанные с ней технологии не живут сами по себе, а развиваются под чутким надзором организации под названием World Wide Web Consortium(сокр. W3C). Эта организация, далее консорциум, состоит из представителей крупнейших фирм имеющих отношение к компьютерной индустрии. Представители таких фирм как IBM, Canon, Adobe, Opera, Google и т.д. собираются вместе и объединяются в рабочие группы, чтобы определить каким Интернет будет завтра.
Результаты своей деятельности представители консорциума выкладывают в сети по адресу http://www.w3.org и там вы всегда можете просмотреть документы на которые обязаны опираться разработчики программного обеспечения, например, браузеров.
Одна из рабочих групп консорциума занимается разработкой спецификаций SVG. Сформировалась эта группа в теперь уже далеком 1998 году. Возглавил ее Джон Феррайола (более подробную информацию о котором можно найти на страничке http://jonferraiolo.sys-con.com), тогда представитель от Adobe, а ныне член команды IBM. 29 октября 98 года он опубликовал требования к формату SVG и рабочая группа преступила к разработкам.
В составе группы опубликовавшей 11 февраля 1999 года первый черновик спецификации были: по два представителя от Microsoft, IBM, Netscape, Adobe, Corel и по одному отAutodesc, SUN, Apple, Xerox, Visio, HP, Macromedia, Quark,CCLRC, Inso; всего 20 человек. С тех пор состав рабочей группы конечно же несколько раз менялся, но работы велись непрерывно и о своей деятельности команда регулярно отчитывалась как на сайте консорциума, так и в Твиттере под ником @svgwg.
4 сенября 2001 года была опубликована первая спецификация - SVG 1.0, что дало возможность авторам (cg–художникам) быть уверенными в том, что результат их творчества будет одинаково передаваться конечному потребителю браузерами и редакторами.
Потом публиковались различные рекомендации, были сформированы требования для передачи формата SVG мобильными устройствами, особенности применения с нестандартными кодировками и т. п.
И наконец 16 августа 2011 года вышла вторая редакция спецификации — SVG 1.1

Отличия SVG от других векторных форматов.

Забегая вперед, заглянем внутрь файла SVG. Нам сразу становится ясно, что это обычный текстовый файл и объекты описаны в нем языком, который и определен спецификацией W3C, чего нельзя сказать, к примеру, о файлах EMF.
Векторная графика SVG легко правится любым текстовым редактором и нет необходимости прибегать к помощи графического редактора. Напротив файлы других форматов для редактирования требуют применения, тех или иных программных средств, большая часть из которых являются платными.
Более того, формат SVG относится к категории открытых и это означает, что мы всегда сможем узнать о том, как он устроен, чего нельзя сказать о фирменных форматах AI (Adobe) и CDR(Corel), которые разрабатываются производителями графических редакторов. И это еще один плюс рассматриваемого формата, но есть у него и минусы, о которых мы поговорим далее…

Минусы формата SVG.

Формат SVG задумывался, кроме всего прочего, и для экономии трафика в сети Интернет. Всегда ли такая экономия имеет место? Я отвечу — Нет. Дело в том, что для изображений маленьких размеров гораздо выгоднее применять растровую графику (к примеру PNG).
Кроме того, есть у SVG и проблемы с интеграцией на web страницах. Несмотря на то, что Microsoft входит в состав рабочей группы SVG полноценная поддержка формата браузером Internet Explorer не обеспечена до сих пор, а частичная начинается только с, последней на сегодняшний день, девятой версии этого браузера. ВерсииIE ниже девятой отображали файлы SVG только с применением плагина. Это обусловлено, с моей точки зрения, извечным желанием компании Билла Гейтса «перетянуть одеяло на себя».
Браузер Mozilla и некоторые другие отображают графику из файлов SVG, но не могут использовать их в качестве фоновых в связи с тем, что размер изображения может быть опущен (не указан в файле), а вычисление реальных координат объектов вызывает трудности. И только Google Chrome с легкостью обращается с файлами SVG.
Основную конкуренцию формату сегодня составляет графика интегрированная в новый, пока еще, формат гипертекста HTML5. Теперь картинки можно описывать прямо в тексте страницы выделив этот фрагмент кода парным тэгом <CANVAS>.
Анимация и интерактивность, которые также предусмотрены в формате SVG, гораздо лучше проработаны во Flash и даже несмотря на то, что он требует установки плагина (Flash Player) на большинстве браузеров, он пользуется гораздо большей популярностью. Напомню, что формат Flash был создан и разрабатывался компанией Macromedia, а в последующем перешел к Adobe и развивается ею по сей день.
И все же, минусы рассмотренные в данном параграфе нисколько не уменьшают силу формата SVG, который стоит изучить хотя бы для того, чтобы в последующем лучше и легче разбираться в векторной графике в целом.

Содержание спецификации SVG 1.1

Давайте для ознакомления с форматом SVG рассмотрим содержание спецификации. В первых двух главах мы видим введение и концепцию языка. В третьей главе речь идет о модели представления, т.е. о том, как программы предназначенные для отображения файлов SVG должны их читать. Затем в четвертой главе рассматриваются базовые типы и интерфейсы, а следом в пятой главе рассмотрена структура файлов (документов) SVG. Глава 6 посвящена стилизации объектов рисунка. Седьмая глава рассматривает систему координат, трансформации и единицы измерения. В восьмой главе говорится о кривых, а в следующей 9 главе остальных базовых фигурах, отдельно в 10 главе рассмотрен объект «Текст». Далее в 11 главе речь идет о заливке объектов, их обводке и маркерах. Глава 12 посвящена краскам, тринадцатая глава расскажет об альтернативных способах заливки, таких как градиент и текстура. В главе 14 говориться об обрезке, маскировании и композиционировании. Пятнадцатая глава посвящена визуальным фильтрам. Главы 16,17 и 18 сообщат нам соответственно об интерактивности, связывании и использовании сценариев. Следующая 19 глава расскажет об анимации, 20-я о шрифтах, 21-я о метаданных, 22-я об обратной совместимости, 23-я о расширяемости. Затем в спецификации приведены приложения в количестве 17-ти штук, которые окончательно перекрывают все вопросы связанные с форматом SVG.
Последняя спецификация пока еще не переведена на русский язык, а стало быть для многих сложна в освоении. Цель данной статьи, в цикле из нескольких частей, донести читателю основные положения спецификации на примере написания файла SVG изображающего пейзаж.
Порядок освоения будет отличаться от предложенного содержанием спецификации, что обусловлено нарастающей сложностью рассматриваемого материала.

Тег section — раздел страницы

Новые теги HTML5

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

Примерами секций были бы главы, различные tabbed страницы в tabbed диалоговом окне или пронумерованные разделы тезиса. Домашняя страница веб-сайта могла быть расколота на секции для введения, сообщений печати и контактной информации.

Авторы поощрены использовать article элемент вместо section элемент, когда имело бы смысл объединять содержание в консорциум элемента.

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

В следующем примере мы видим статью (часть большей Веб-страницы) о яблоках, содержа две коротких секции.

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

Заметьте как использование section средства, которые может использовать автор h1 элементы повсюду, не имея необходимость волноваться о том, является ли особая секция на высшем уровне, втором уровне, третьем уровне, и так далее.

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

<!DOCTYPE Html>
<Html
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H1
       >Ceremony</H1
     ><P
       >Opening Procession</P
     ><P
       >Speech by Validactorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H1
       >Graduates</H1
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>

В этом примере книжный автор повысил некоторые секции как главы и некоторых как приложения, и использует CSS, чтобы разработать заголовки в этих двух классах секции по-другому. Целая книга обернута в article элемент как часть еще большего документа, содержащего другие книги.

<article>
 <style>
  section { border: double medium; margin: 2em; }
  section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
  section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
 </style>
 <header>
  <hgroup>
   <h1>My Book</h1>
   <h2>A sample with not much content</h2>
  </hgroup>
  <p><small>Published by Dummy Publicorp Ltd.</small></p>
 </header>
 <section>
  <h1>My First Chapter</h1>
  <p>This is the first of my chapters. It doesn't say much.</p>
  <p>But it has two paragraphs!</p>
 </section>
 <section>
  <h1>It Continutes: The Second Chapter</h1>
  <p>Bla dee bla, dee bla dee bla. Boom.</p>
 </section>
 <section>
  <h1>Chapter Three: A Further Example</h1>
  <p>It's not like a battle between brightness and earthtones would go
  unnoticed.</p>
  <p>But it might ruin my story.</p>
 </section>
 <section>
  <h1>Appendix A: Overview of Examples</h1>
  <p>These are demonstrations.</p>
 </section>
 <section>
  <h1>Appendix B: Some Closing Remarks</h1>
  <p>Hopefully this long example shows that you <em>can</em> style
  sections, so long as they are used to indicate actual sections.</p>
 </section>
</article>

Тег source — источник медиа-данных

Новые теги HTML5

source элемент позволяет авторам определять многократные ресурсы альтернативных средств массовой информации для элементов СМИ. Это ничего непредставляет самостоятельно.

src признак дает адрес ресурса СМИ. Ценность должна быть действительным непустым URL, потенциально окруженным местами. Этот признак должен присутствовать.

Динамически изменение a source элемент и его признак, когда элемент уже вставлен в a video или audio элемент не будет иметь никакого эффекта. Чтобы измениться, что играет, просто используйте src признак на элементе СМИ непосредственно, возможно используя canPlayType() метод, чтобы выбрать от среди доступных ресурсов. Вообще, управление source элементы вручную после документа были разобраны, unncessarily сложный подход.

type признак дает тип ресурса СМИ, чтобы помочь пользовательскому агенту определить, может ли это играть этот ресурс СМИ прежде, чем принести его. Если определено, его ценность должна быть действительным типом ПАНТОМИМЫ. codecs параметр, который определяют определенные типы ПАНТОМИМЫ, мог бы быть необходимым, чтобы определить точно, как ресурс закодирован. [RFC4281]

Следующий список показывает некоторые примеры того, как использовать codecs= Параметр ПАНТОМИМЫ в type признак.

H.264 Принужденное основное видео профиля (главное и расширенное совместимое видео) уровень 3 и Низкая Сложность аудио AAC в контейнере MP4
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 Расширенное видео профиля (совместимый с основанием) уровень 3 и Низкая Сложность аудио AAC в контейнере MP4
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 Главный уровень 3 видео профиля и Низкая Сложность аудио AAC в контейнере MP4
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 ‘Высоко’ представляют видео (несовместимый с главным, основанием или расширенными профилями) уровень 3 и Низкая Сложность аудио AAC в контейнере MP4
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 Визуальное Простое видео Уровня 0 Профиля и Низкая Сложность аудио AAC в контейнере MP4
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 Продвинутое Простое видео Уровня 0 Профиля и Низкая Сложность аудио AAC в контейнере MP4
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 Визуальное Простое видео Уровня 0 Профиля и аудио AMR в 3GPP контейнер
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Видео Theora и аудио Vorbis в контейнере Ogg
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Видео Theora и аудио Speex в контейнере Ogg
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
Одно только аудио Vorbis в контейнере Ogg
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Одно только аудио Speex в контейнере Ogg
<source src='audio.spx' type='audio/ogg; codecs=speex'>
Одно только аудио FLAC в контейнере Ogg
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Видео Dirac и аудио Vorbis в контейнере Ogg
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

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

Неплатеж, если media признак опущен,»all«, означая, что по умолчанию ресурс СМИ подходит для всех СМИ.

Если a source элемент вставлен как ребенок элемента СМИ, который имеет нет src признак и чей networkState имеет ценность NETWORK_EMPTY, пользовательский агент должен призвать алгоритм выбора ресурса элемента СМИ.

Признаки IDL src, type, и media должен отразить соответствующие признаки содержания того же самого имени.

Если автор не уверен, будут ли пользовательские агенты все в состоянии отдать ресурсы СМИ, если, автор может слушать error случай на последнемsource элемент и более аккуратное поведение отступления:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

Тег track — звуковая дорожка

Новые теги HTML5

track элемент позволяет авторам определить явного внешний источник треков текст для медиа-элементов . Он не представляет ничего сам по себе.

kind атрибут перечислимого типа. В следующей таблице перечислены ключевые слова, определенные для этого атрибута.

Ключевое слово Состояние Краткое описание
subtitles Подзаголовки Транскрипция или перевод диалога, подходящего для того, когда звук доступен, но не понятый (например, потому что пользователь не понимает язык звуковой дорожки ресурса СМИ). Наложенный на видео.
captions Заголовки Транскрипция или перевод диалога, звуковых эффектов, соответствующих музыкальных реплик и другой соответствующей аудио информации, подходящей для того, когда звук недоступный или не ясно слышимый (например, потому что это приглушено, утоплено окружающим шумом, или потому что пользователь глухой). Наложенный на видео; маркированный как подходящий для слабослышащего.
descriptions Описания Текстовые описания видео компонента ресурса СМИ, предназначенного для аудио синтеза, когда визуальный компонент затенен, недоступен, или не годный к употреблению (например, потому что пользователь взаимодействует с применением без экрана, ездя, или потому что пользователь слепой). Синтезируемый как аудио.
chapters Главы Названия главы, предназначенные, чтобы использоваться для того, чтобы провести ресурс СМИ. Показанный как интерактивное (потенциально вложенный) перечисляют в пользовательском интерфейсе агента.
metadata Метаданные Следы предназначены для использования из подлинника. Не показанный пользовательским агентом.

Признак может быть опущен. Недостающий неплатеж ценности - государство подзаголовков.

src признак дает адрес текстовых данных о следе. Ценность должна быть действительным непустым URL, потенциально окруженным местами. Этот признак должен присутствовать.

Если у элемента есть a src припишите, чья ценность не пустая последовательность и чья ценность, когда признак был установлен, могла быть успешнорешена относительно элемента, тогда URL следа элемента — получающийся абсолютный URL. Иначе, URL следа элемента — пустая последовательность.

Если URL следа элемента идентифицирует ресурс WebVTT, и элемент kind признак не находится в государстве метаданных, тогда файл WebVTT должен быть файлом WebVTT, используя текст реплики. [WEBVTT]

Кроме того, если URL следа элемента идентифицирует ресурс WebVTT, и элемент kind признак находится в государстве глав, тогда файл WebVTT должен быть и файлом WebVTT, используя текст названия главы и файлом WebVTT, используя только вложенные реплики. [WEBVTT]

srclang признак дает язык текстовых данных о следе. Ценность должна быть действительной BCP 47 языковых признаков. Этот признак должен присутствовать если элемент kind признак находится в государстве подзаголовков. [BCP47]

Если у элемента есть a srclang припишите, чья ценность не пустая последовательность, тогда язык следа элемента — ценность признака. Иначе, у элемента нет языка следа.

label признак дает удобочитаемое пользователем название для следа. Это название используется пользовательскими агентами, перечисляя подзаголовок,заголовок и аудио следы описания в их пользовательском интерфейсе.

Ценность label признак, если признак присутствует, не должен быть пустой последовательностью. Кроме того, не должен быть два track дети элемента того же самого элемента СМИ, чей kind признаки находятся в том же самом государстве, чей srclang признаки и пропускают или имеют ценности, которые представляют тот же самый язык, и чей label признаки снова оба отсутствуют, или у обоих есть та же самая ценность.

Если у элемента есть a label припишите, чья ценность не пустая последовательность, тогда лейбл следа элемента — ценность признака. Иначе, лейбл следаэлемента — определенная последовательность пользователя-агента (например, последовательность, «неназванная» в месте действия пользователя или ценности, автоматически произведенной от других признаков).

default признак, если определено, указывает, что след должен быть позволен, если бы предпочтение пользователя не указывает, что другой след был бы более соответствующим. Не должно быть больше чем одного track элемент с тем же самым родительским узлом с default признак определен.

в этом видео есть субтитры на нескольких языках:

<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Fran?ais">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

Тег video — воспроизведение видео и фильмов

Новые теги HTML5

video  элемент используется для воспроизведения видео и фильмов, и аудио файлов с подписями.

Содержимое может быть предоставленo посредством video элемента. Агенты пользователей не должны показывать этого контента для пользователя, он предназначен для старых веб-браузеров, не поддерживающих video, так чтобы плагины видео можно попробовать, или чтобы показать текст для пользователей из этих старых браузеров информируя их о том, как получить доступ к видео содержанию.

Note: В частности, это содержание не предназначено для решения проблемы доступности. Чтобы сделать видео доступным для слабовидящих, слепых, слабослышащих, глухих и людей с другими физическими или когнитивными расстройствами, различные функции доступны. Подписи могут быть предоставлены, либо встроенные в видео поток или как внешние файлы, используя track элемента. Вход языка треки могут быть предоставлены либо снова встраивается в поток видео или путем синхронизации нескольких video элементов, используя MediaGroup атрибут или MediaController объекта. Аудио описания могут быть предоставлены либо в виде отдельного трека, встроенные в видео потоке, или отдельный звуковой дорожки video элемент скорректированный к тому же контроллеру, как video элемент (ы), либо в текстовом виде, используя WebVTT файл ссылаться с помощью seek элемент и синтезируется в речь ПА. WebVTT также может быть использован для названий глав. Для пользователей, которые предпочитают не использовать медиа­элемента на всех, протоколы или другие текстовые альтернативы может быть предоставлена ?олько ссылки на них в прозе у video элементов. [WEBVTT]

Если указанный ресурс будет использоваться, то, когда элемент создается или когда poster атрибут установлен, изменен или удален, агент пользователя должен выполнить следующие шаги для определения элемента poster frame:

  1. Если существующий экземпляр этого алгоритма работает для этого video элемент, прервать этот экземпляр этого алгоритма без изменения плакат кадр.
  2. Если сайт  значением атрибута является пустая строка, или если атрибут отсутствует, то нет никаких плакатов кадров; прервать эти шаги.
  3. Решение сайт значение атрибута по отношению к элементу. Если это не удается, то нет никаких плакатов кадров; прервать эти шаги.
  4. Выборка полученный абсолютный URL, из элемента документа автора происхождения . Это должно задержать груз событие документа элемента.
  5. Если изображение Таким образом, получается, плакат кадра в том, что изображение. В противном случае, нет никаких плакатов кадр .

Note: Изображение дает site  атрибут сайт кадров, призван быть представителем кадр видео (как правило, одним из первых непустой кадров), что дае т пользователю представление о том, как видео.

Если видео не доступны данные (элемента ReadState  атрибут любой HAVE_NOTHING или HAVE_METADATA, но нет видео данные еще не получены вовсе, либо элемента ReadState атрибут любого последующего значения, но медиа­ресурс не имеет видео­канал), video элемент представляет сайт кадров.

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

Когда video элемент паузу в любой другой позиции, и медиа­ресурса есть видеоканал, элемент представляет кадр видео соответствующий текущей позиции воспроизведения , или, если это еще не доступна (например, потому, что видео или поиска буферизации), последний кадр видео, были оказаны.

Когда video  элемент, средства массовой информации ресурса есть видео канал потенциально могли бы играть , он представляет кадр видео на постоянно растет «текущей» позиции . При текущей позиции воспроизведения изменения, такие, что последний кадр оказана уже не кадр соответствует текущей позиции воспроизведения на видео, новая рама должна быть оказана. Точно так же любой звук связан с медиа­ресурс должен, если играл, будет играть синхронно с текущей позиции воспроизведения, в элемента эффективного объема средств массовой информации .

Когда video элемент, средства массовой информации ресурса есть видео канал ни потенциально могли бы играть ни паузы (например, при поиске или тупик), элемент представляет последний кадр видео, были оказаны.

Note: Какие кадров в видеопотоке соответствует определенной позиции воспроизведения определяется формат видео потока.

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

В дополнение к вышесказанному, агент пользователя может предоставить пользователю сообщений (таких, как «буферные», «видео не загружается», «Ошибка», или более подробной информации) путем наложения текста и иконок на видео или других областей Воспроизведение элемента области, или в другой соответствующей форме.

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

Когда video элемента медиа ресурс имеет видеоканал, элемент представляет собой краску источник, ширина которого медиа­ресурсов «с собственной ширины , высота которого составляет медиа­ресурсов «с внутренней высотой , и чье появление кадр видео соответствующий текущую позицию воспроизведения , если это доступно, иначе (например, когда видео ищет или буферизации) своего предыдущего появления, если таковые имеются, или же (например, потому, что видео все еще грузится первый кадр) черноты.

Тег wbr — мягкий перенос строки

Новые теги HTML5

wbr элемент представляет возможность разрыва строки.

В следующем примере, кто-то цитирует то, что для эффекта, записывается как одно длинное слово. Однако, чтобы гарантировать, что текст может быть заключен в читаемом образом, отдельные слова в цитате разделяются с помощью wbr элемента.

<p>So then he pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

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

<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>

Любая информация, содержащаяся внутри wbr элементы не должны рассматриваться как часть окружающего текста.