Рисование svg html. Пример с использованием SVG. Подключение SVG-файла с помощью функции include

Базовые концепции и использование

Формат масштабируемой векторной графики (Scalable Vector Graphics, SVG) является частью семейства стандартов векторной графики. Векторная графика отличается от растровой, в которой определение цвета каждого пиксела хранится в некотором массиве данных. Наиболее распространенными растровыми форматами, используемыми в Интернете в настоящее время, являются JPEG, GIF и PNG, каждый из которых имеет свои достоинства и недостатки.

Часто используемые сокращения

• CSS: Cascading Style Sheets (Каскадные таблицы стилей)
• GIF: Graphics Interchange Format (Формат обмена графическими данными)
• GUI: Graphical User Interface (Графический пользовательский интерфейс)
• HTML: Hypertext Markup Language (Язык разметки гипертекста)
• JPEG: Joint Photographic Experts Group (Объединенная группа экспертов по машинной обработке фотографических изображений)
• PNG: Portable Network Graphics (Переносимая сетевая графика)
• SVG: Scalable Vector Graphics (Масштабируемая векторная графика)
• XML: Extensible Markup Language (Расширяемый язык разметки)

Формат SVG обладает несколькими преимуществами перед любым растровым форматом:

• Графика в формате SVG создается с использованием математических формул, которые требуют сохранения в исходном файле намного меньшего количества данных, поскольку отсутствует необходимость сохранения данных по каждому отдельному пикселу.
• Векторные изображения лучше масштабируются. Попытка увеличения масштаба опубликованных в Интернете изображений по сравнению с исходным размером может приводить к искажению (или пикселизации) изображений.

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

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

Из этой статьи вы узнаете о преимуществах форматов SVG и о том, чем они могут быть полезны в вашей работе по созданию Web-сайтов на языке HTML5.

Основы SVG

При создании графического изображения в формате SVG используется совершенно иной процесс, нежели при создании файлов в форматах JPEG, GIF или PNG. Файлы JPEG, GIF и PNG обычно создаются с помощью какой-либо программы редактирования изображений, например, Adobe Photoshop. Изображения в формате SVG, как правило, создаются с использованием какого-либо языка на базе XML. Существуют графические пользовательские интерфейсы редактирования графики в формате SVG, которые генерируют для вас код XML, лежащий в основе изображения. Тем не менее, в данной статье предполагается, что вы работаете напрямую с XML. Информацию о программах редактирования изображений в формате SVG можно найти в разделе .

В листинге 1 показан пример простого XML-файла SVG, в котором рисуется красный круг с 2-пиксельной черной границей.

Листинг 1. XML-файл SVG

Приведенный выше код дает изображение, показанное на рисунке 1.

Рисунок 1. Красный круг с 2-пиксельной черной границей

Создание базовых геометрических фигур

При работе с графикой в формате SVG для создания геометрических фигур используются теги XML; эти элементы XML показаны в таблице 1.

Таблица 1. Элементы XML для создания графики в формате SVG

Элемент line

Элемент line представляет собой простейший графический элемент. В листинге 2 показано, как создать горизонтальную линию.

Листинг 2. Создание горизонтальной линии

Код, приведенный в листинге 2, дает изображение, показанное на рисунке 2.

Рисунок 2. Простая горизонтальная линия

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

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

Определение линии можно создать путем задания начальных и конечных координат по осям X и Y относительно рабочей области. Атрибуты x1 и y1 представляют собой координаты начала, а атрибуты x2 и y2 — координаты конца линии. Чтобы изменить направление вычерчивания линии, необходимо просто изменить координаты. Например, путем изменения предыдущего примера вы можете создать диагональную линию, как показано в листинге 3.

Листинг 3. Создание диагональной линии

На рисунке 3 показан результат кода, представленного в листинге 3.

Рисунок 3. Диагональная линия

Элемент polyline

Ломаная линия представляет собой рисунок, составленный из нескольких линий. В листинге 4 приводится пример создания рисунка, который выглядит, как ступеньки лестницы.

Код, приведенный в листинге 4, дает изображение, показанное на рисунке 4.

Ломаная линия создается с помощью атрибута points и путем определения пар координат по осям X и Y, разделенных запятыми. В представленном примере первая точка определена как 0,40 , где 0 — координата по оси X, а 40 — координата по оси Y. Тем не менее одного набора точек недостаточно для вывода изображения на экран, поскольку этот набор указывает рендереру SVG лишь начальную позицию. Вам требуется по меньшей мере два набора точек: начальная точка и конечная точка (например, points="0,40 40,40").

Как и в случае с вычерчиванием простых линий, линии не обязательно должны быть строго горизонтальными или вертикальными. Если изменить значения из предыдущего примера, можно получить состоящие из линий фигуры неправильной формы, как в листинге 5.

Листинг 5. Создание неровной линии

Код, приведенный в листинге 5, дает изображение, показанное на рисунке 5.

Рисунок 5. Неровная линия

Элемент rect

Для создания прямоугольника требуется всего лишь определить его ширину и высоту, как показано в листинге 6.

Листинг 6. Создание прямоугольника

Код, приведенный в листинге 6, дает изображение, показанное на рисунке 6.

Рисунок 6. Прямоугольник

С помощью тега rect также можно создать квадрат; квадрат — это просто прямоугольник с одинаковыми высотой и шириной.

Элемент circle

Круг создается путем определения координат X и Y центра круга и радиуса, как показано в листинге 7.

Листинг 7. Создание круга

Код, приведенный в листинге 7, дает изображение, показанное на рисунке 7.

Рисунок 7. Круг

Атрибуты cx и cy определяют положение центра круга относительно полотна. Поскольку радиус составляет половину ширины круга, при его определении помните о том, что общая ширина изображения будет в два раза больше заданного значения.

Элемент ellipse

По существу, эллипс — это круг, для которого в коде заданы два радиуса, как показано в листинге 8.

Листинг 8. Создание эллипса

Код, приведенный в листинге 8, дает изображение, показанное на рисунке 8.

Рисунок 8. Эллипс

В этом случае атрибуты cx и cy также определяют координаты центра относительно полотна. Однако в случае с эллипсом вы определяете один радиус для оси X и второй радиус для оси Y, используя для этого атрибуты rx и ry .

Элемент polygon

Многоугольник — это геометрическая фигура, которая содержит не менее трех сторон. В листинге 9 создается простой треугольник.

Листинг 9. Создание треугольника

Код, приведенный в листинге 9, дает изображение, показанное на рисунке 9.

Рисунок 9. Треугольник

Подобно работе с элементом polyline , многоугольники создаются путем определения пар координат по осям X и Y с использованием атрибута points .

Добавляя пары координат по осям X и Y, можно создавать многоугольники с любым количеством сторон. Например, путем изменения кода предыдущего примера вы можете создать четырехсторонний многоугольник, как показано в листинге 10.

Листинг 10. Создание четырехстороннего многоугольника

Код, приведенный в листинге 10, дает изображение, показанное на рисунке 10.

Рисунок 10. Четырехсторонний многоугольник

С помощью тега polygon можно также создавать геометрические фигуры сложной формы. В листинге 11 создается рисунок звезды.

Листинг 11. Создание звезды

Код, приведенный в листинге 11, дает изображение, показанное на рисунке 11.

Рисунок 11. Звездчатый многоугольник

Элемент path

Элемент path самый сложный из всех элементов рисования, позволяет создавать произвольные рисунки с использованием набора специальных команд. Элемент path поддерживает команды, указанные в Таблице 2.

Таблица 2. Команды, поддерживаемые элементом path

Эти команды можно использовать как в верхнем, так и в нижнем регистре. Если команда задана в верхнем регистре, применяется абсолютное позиционирование. Если же используется команда в нижнем регистре, применяется относительное позиционирование. Приведение примеров использования всех команд выходит за рамки этой статьи. Тем не менее ниже представлено несколько примеров, демонстрирующих основы использования указанных команд.

С помощью элемента path можно создавать любые простые геометрические фигуры из предыдущих примеров данной статьи. В листинге 12 с помощью элемента path создается обычный треугольник.

Листинг 12. Создание треугольника с помощью элемента path

Код, приведенный в листинге 12, дает изображение, показанное на рисунке 12.

Рисунок 12. Треугольник, созданный с помощью элемента path

Список команд определяется с помощью атрибута d . В данном примере вычерчивание начинается в точке с координатами X 150 и Y 0, определенными командой перемещения в точку(M150 0). Затем с помощью команды вычерчивания линии до точки (L75 200). проводится линия до точки с координатами X = 75 и Y = 200. После этого проводится еще одна линия с помощью еще одной команды вычерчивания линии до точки(L225 200). Наконец, рисунок замыкается с помощью команды замыкания (Z). Никакие координаты команду Z не сопровождают, поскольку для замыкания траектории вы по определению проводите линию из текущего положения обратно в исходную точку рисунка (в данном случае точку с координатами X = 150, Y = 0).

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

Истинная «мощь» элемента path заключается в его способности создавать фигуры нестандартной формы, как показано в листинге 13. Этот пример взят из документа Консорциума World Wide Web (W3C) Scalable Vector Graphics (SVG) 1.1 («Масштабируемая векторная графика (SVG) 1.1») (второе издание) (см. раздел ).

Листинг 13. Создание нестандартной фигуры с помощью элемента path

Код, приведенный в листинге 13, дает изображение, показанное на рисунке 13.

Рисунок 13. Нестандартная фигура, созданная с помощью элемента path

С помощью элемента path можно создавать сложные рисунки, например диаграммы и волнистые линии. Обратите внимание на то, что в представленном примере используются несколько элементов path . При создании рисунков вы не ограничены каким-либо одним элементом рисования в корневом теге SVG..

Фильтры и градиенты

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

Фильтры

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

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

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

Листинг 14. Создание эффекта отбрасываемой тени для прямоугольника

Код, приведенный в листинге 14, дает изображение, показанное на рисунке 14.

Рисунок 14. Эффект отбрасываемой тени для прямоугольника

Фильтры определяются внутри элемента def (сокращение от английского «definition», т. е. «определение»). Фильтру в данном примере присваивается идентификатор (id) "f1". Сам тег filter имеет атрибуты для определения координат по осям X и Y, а также ширины и высоты фильтра. Внутри тега filter вы используете требуемые элементы фильтра и устанавливаете нужные значения для их свойств.

После определения фильтра вы связываете его с конкретным рисунком путем использования атрибута filter , как показано в . В качестве значения url установите присвоенное фильтру значение атрибута id .

Градиенты

Градиент представляет собой постепенный переход от одного цвета к другому. Существуют два основных вида градиентов: линейный и радиальный. Применяемый тип градиента определяется используемым вами элементом. В нижеследующих примерах показано применение линейного и радиального градиентов к эллипсу.

В листинге 15 создается эллипс с линейным градиентом.

Листинг 15. Создание эллипса с линейным градиентом

Код, приведенный в листинге 15, дает изображение, показанное на рисунке 15.

Рисунок 15. Эллипс с линейным градиентом

В листинге 16 создается эллипс с радиальным градиентом.

Листинг 16. Создание эллипса с радиальным градиентом

Код, приведенный в листинге 16, дает изображение, показанное на рисунке 16.

Рисунок 16. Эллипс с радиальным градиентом

Градиенты, подобно фильтрам, определяются внутри элемента def . Каждому градиенту присваивается идентификатор (id). Атрибуты градиента (например, цвета) задаются внутри тега градиента с помощью элементов stop . Чтобы применить к рисунку какой-либо градиент, установите в качестве значения url для атрибута fill идентификатор (id) требуемого градиента.

Текст и SVG

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

Листинг 17. Создание текста с использованием SVG

Код, приведенный в листинге 17, дает изображение, показанное на рисунке 17.

Рисунок 17. Текст, созданный с помощью SVG

В этом примере с помощью элемента text создается предложение I love SVG . При использовании элемента text фактически отображаемый текст находится между открывающим и закрывающим элементами text .

Вы можете выводить текст по различным осям и даже по траекториям. В листинге 18 текст отображается по дугообразной траектории.

Листинг 18. Создание текста по дугообразной траектории

Код, приведенный в листинге 18, дает изображение, показанное на рисунке 18.

Рисунок 18. Текст, размещенный по дугообразной траектории

В этом примере в корневой тег SVG добавляется дополнительное пространство имен XML xlink . Траектория, используемая для изгибания текста дугой, создается внутри элемента def , поэтому сама траектория на рисунке не визуализируется. Отображаемый текст вложен внутрь элемента textPath , который использует пространство имен xlink для обращения к id требуемой траектории.

Как и при работе с другими рисунками в формате SVG, вы также можете применять к тексту фильтры и градиенты. В листинге 19 к тексту применяются фильтр и градиент.

Листинг 19. Создание текста с фильтром и градиентом

Код, приведенный в листинге 19, дает изображение, показанное на рисунке 19.

Рисунок 19. Текст с фильтром и градиентом

Добавление XML-кода SVG на Web-страницы

После того как XML-код SVG создан, его можно включать в HTML-страницы несколькими способами. Первый метод заключается в прямой вставке XML-кода SVG в HTML-документ, как показано в листинге 20.

Листинг 20. Прямая вставка XML-кода SVG в HTML-документ

Вероятно, этот метод является самым простым, но он не способствует повторному использованию. Помните, что XML-код SVG можно сохранить в файле с расширением.svg . Когда вы сохраняете рисунок SVG в файле.svg , для его включения в Web-страницы можно использовать элементы embed, object и iframe . В листинге 21 показан код для включения XML-файла SVG с помощью элемента embed .

Листинг 21. Включение XML-файла SVG с помощью элемента embed

В листинге 22 показан код для включения XML-файла SVG с помощью элемента object .

Листинг 22. Включение XML-файла SVG с помощью элемента object

В листинге 23 показан код для включения XML-файла SVG с помощью элемента iframe .

Листинг 23. Включение XML-файла SVG с помощью элемента iframe

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

Заключение

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

D3 наиболее полезен, когда используется для создания и манипулирования визуальными образами на основе SVG. Рисование с использованием div "ов и других HTML-элементов возможно, но немного неуклюже, и обычно появляются несоответствия отображения в различных браузерах. Использование SVG более надежно, визуально последовательно и быстрее.

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

Элемент SVG

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

Перед тем как вы сможете что-нибудь рисовать, вам надо создать SVG-элемент. Думайте об SVG-элементе, как о холсте, на котором отрисовываются все ваши визуальные образы(В такой трактовке, SVG концептуально схож с элементом HTML - canvas). Как минимум, хорошо задать ширину и высоту с помощью атрибутов width и height , соответственно. Если вы их не зададите, SVG растянется на всю площадь блока.

Здесь SVG-элемент, созданный с использованием кода выше:

Не видите его? Нажмите правой кнопкой по пустому месту выше и выберите "Просмотр кода элемента". Ваш веб-инспектор должен показать что-то похожее:

Заметьте, что тут есть SVG-элемент, который занимает 500 пикселей по горизонтали и 50 пикселей по вертикали.

Также заметьте, что браузеры считают пиксели единицей измерения по умолчанию. Мы указали размеры как 500 и 50, а не 500px и 50px. Мы можем указать px явно, или любую другую единицу измерения, например: em , pt , in , cm , и mm.

Простые фигуры

Существует некоторый набор фигур, которые вы можете поместить внутрь элемента SVG. Этот набор включает: rect , circle , ellipse , line , text и path .

Если вы знакомы с программирование компьютерной графики, вы вспомните, что обычно координатная система на основе пикселей начинается с левого верхнего угла и имеет координаты точки (0,0). Увеличение х происходить слева направо, увеличение у -сверху вниз.

0,0 100,20 200,40

rect рисует квадрат. Квадрат задается четырьмя значениями: x , y - указывают точку верхнего левого угла; width , height - указывают ширину и высоту квадрата. Этот квадрат занимает все пространство нашего SVG:

circle рисует круг. Круг задается тремя величинами: cx , cy указывают точку, расположенную в центре описываемой окружности, r задает радиус круга. Этот круг расположен в центре нашего SVG, потому что атрибут cx ("center-x") равен 250. Пример:

ellipse задается схоже с circle , но предполагается, что радиус задается по двум осям: по х и по у . Вместо х используйте rx , вместо y - ry .

line рисует линию. Используйте x1 и y1 для задания координат начала линии, и x2 и y2 для задания координат конца. Атрибут stroke должен задавать цвет линии, иначе она будет невидимая.

text отрисовывает текст. Используйте x , чтобы указать левый край, и y , чтобы указать вертикальную позицию так называемой базовой линии.

Easy-peasy Easy-peasy

текст будет наследовать CSS-стили шрифта родительского элемента, если только вы не зададите свои стили для текста. Обратите внимание, как форматирование текста выше совпадает с текстом, описываемом в этом параграфе. Мы может переопределить стили форматирования так:

Easy-peasy Easy-peasy

Также заметьте, когда любой визуальный элемент упирается в границу SVG-элемента, он будет обрезан. Будьте осторожны, когда используете text , чтобы ваши загагулины у текста не были обрезаны. Вы можете увидеть, что случится с текстом, если выставить baseline (то есть у ) равным 50, такую же, как высота SVG:

Easy-peasy Easy-peasy

path рисует что-нибудь более сложное, чем фигуры, описанные выше(например, силуэт стран на геокартах), и будет описан отдельно. А теперь мы будем работать с простыми фигурами.

Стилизация SVG-элементов

По умолчанию любой элемент SVG имеет черную заливку и не имеет рамку. Если вы хотите что-то сверх этого, вам придется применить стили к вашему элементу. Общие SVG свойства перечислены ниже:

• fill - заливка. Цветовое значение. Также как и в CSS цвет может быть указан несколькими способами:
  • по имени: orange;
  • значение в шестнадцатиричной системе счисления: #3388aa , #38a ;
  • значение в формате RGB: rgb(10, 150, 20) ;
  • значение в формате RGBA: rgba(10, 150, 20, 0.5) .
• stroke - рамка. Цветовое значение.
• stroke-width - ширина рамки(обычно в пикселях).
• opacity - прозрачность. Числовое значение в промежутке от 0.0(полностью прозрачно) до 1.0(полностью видимо).

С text также можно использовать следующие свойства:

• font-family
• font-size

Существует два способа применения стилей к SVG-элементам: либо напрямую прописывать стили внутри элемента как его атрибуты, или через правила CSS.

Ниже некоторые CSS-свойства заданы непосредственно в элементе circle :

По-другому мы могли бы сделать так: не прописывать атрибуты стиля, а указать класс стилей(также как и обычному HTML элементу):

а потом добавить fill , stroke и stroke-width параметры в CSS-стили необходимого класса:

Pumpkin { fill: yellow; stroke: orange; stroke-width: 5; }

Второй подход имеет несколько очевидных преимуществ:

1. Можно описать класс один раз и применять его ко многим элементам.
2. CSS-код проще воспринимать, чем атрибуты внутри элементов.
3. По этим причинам второй подход более прост в обслуживании, а также он быстрее применим.

Использование CSS для применения стилей к SVG, однако, может кого-то привести в замешательство. fill , stroke , stroke-width все-таки не CSS-свойства(ближайшие CSS-эквиваленты это background-color и border ). Чтобы помочь вам запомнить, какие правила в таблице стилей указаны для SVG-элементов, желательно включать svg в CSS-селектор:

Svg .pumpkin { /* ... */ }

Наложение и порядок их рисования

В SVG нет как таковых слоев и никакого понятия глубины. SVG не поддерживает CSS-свойство z-index , таким образом фигуры могут быть упорядочены в рамках двухмерного пространства.

И еще, если нарисовать несколько фигур, то они перекрываются:

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

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

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

Прозрачность

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

Существует два способа применить прозрачность: использовать RGB-цвет с альфа-каналом или установить свойству opacity числовое значение.

Вы можете использовать rgba() везде, где надо указать цвет, например в атрибутах fill и stroke . rgba() ожидает, что вы передадите ему 3 значения в промежутке от 0 до 255 для красного, зеленого и синего, плюс альфа-канал(прозрачность) в диапазоне от 0.0 до 1.0.

Заметьте, что с методом rgba() , прозрачность применяется к fill и stroke атрибутам независимо. Заливка следующих кругов на 75% прозрачна, а их рамка - на 25%:

Для применения прозрачности ко всему элементу, необходимо установить атрибут opacity . Ниже полностью видимые круги:

а это те же круги с различной прозрачностью:

Вы также можете использовать атрибут opacity у элемента, цвета которого заданы в формате rgba() . Когда вы это делаете - прозрачность умножается. Ниже круги используют те же значения цвета RGBA для fill и stroke . У первого элемента не установлен атрибут opacity , а у двух других установлен:

Обратите внимание, что у третьего круга opacity равно 0.2 или 20%. Тем не менее его фиолетовая часть имеет прозрачность в 75%. Таким образом, фиолетовая часть в конечном итоге прозрачна на 0.2*0.75 = 0.15 или 15%.

Для включения изображения в определенном месте страницы существует тег . Этот тег имеет обязательный параметр: SRC="", и несколько необязательных. Параметр SRC="" указывает браузеру адрес, где искать рисунок и в качестве значения должен иметь URL-адрес ресурса, где размещен графический файл. В простейшем случае этот файл будет размещен в корневом каталоге или в папке IMG Вашего сайта. Необязательные параметры:

Параметр ALT="" в качестве значения содержит надпись, рассказывающую о содержании изображения для тех посетителей, браузеры которых не поддерживают графику или работают в режиме отключенной графики. Эта же надпись появляется при наведении указателя мышки на изображение.

Параметры WIDTH="" HEIGHT="" в качестве значений имеют размеры изображения по ширине и высоте в пикселях. Эти параметры желательно указывать в коде страницы, чтобы браузер заранее оставлял место для изображения, тогда, при загрузке, страница будет меньше "дергаться". Кроме того, эти параметры можно употреблять для регулирования размеров рисунка в окне браузера.

Параметр BORDER="" прорисовывает рамку вокруг изображения. В качестве значения указывается цифра, указывающая ширину рамки в пикселях.

Параметр ALIGN= определяет положение изображения на странице, и может принимать значения TOP - выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, TEXTTOP - выравнивает верхнюю границу изображения по самому высокому текстовому элементу текущей строки, MIDDLE - выравнивает середину изображения по базовой линии текущей строки, ABSMIDDLE - выравнивает середину изображения посередине текущей строки. BASELINE или BOTTOM - выравнивает нижнюю границу изображения по базовой линии текущей строки, ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки, HSPACE= - определяет отступ по горизонтали, VSPACE= - определяет отступ по вертикали.

Синтаксис тэга:

Бегущая строка

Бегущая строка задается тегом .

Атрибутами этого тэга являются bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию)

Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.

Синтаксис тега: текст

Современные веб-браузеры могут воспроизводить видео и звуковые файлы различных форматов. Для этого они используют встроенные проигрыватели (plug-in, элементы управления ActiveX) или внешние программы проигрыватели. Вставить звук или видео в HTML-документ можно с помощью различныз тегов:

- для вставки фонового звука;

- для вставки видео в формате AVI;

- для вставки звуковых и видеофайлов;