РИСОВАНИЕ
в HTML

Назначение страницы

Создал этот раздел для тестирования интересных тэгов, появившихся у HTML 5, в своём привычном HTML 4.01 Transitional.

Интересовало, можно ли(?) использовать эти новые тэги в прежней версии HTML?

Естественно, что тестировал не все, а лишь те, которые меня больше всего заинтересовали.

На этой странице проверяю тэг svg и его внутренние тэги, а ещё один, не менее интересный тэг canvas протестировал здесь:

В результате тщательного изучения и тестирования, у меня и получился этот 7-ми страничный справочник основ рисования в HTML.
Всё делал и проверял в браузере "Yandex"!

Тэг svg

Прежде всего, меня очень заинтересовал тэг svg. С его появлением, возможности по оформлению веб-страниц сайтов значительно возросли.
Появилась возможность рисовать в HTML на страницах сайта.

Причём!  Рисовать на сайте можно программно, т.е. непосредственно в коде страницы, БЕЗ использования какого-либо дополнительного программного обеспечения. Всё можно сделать в обыкновенном "блокноте", установленном в любой операционной системе.

Значение аббревиатуры SVG

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

Мало того!   Вообще ВСЁ изображение можно откорректировать, либо ЧАСТЬ его, что с обычным рисунком сделать невозможно!
Пришлось бы переделывать весь рисунок в каком-нибудь графическом редакторе.

А здесь же - открыл код, и делай с ним, что хочешь!

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

Особенности тэга svg

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

Он является "корневым" тэгом, или "тэгом-родителем", внутрь которого вставляются все другие элементы: внутренние тэги и их атрибуты, которые описывают сам рисунок.

А он, как истинный "родитель", определяет размеры (ширину и высоту) места, в котором и будет происходить рисование в HTML.
Другими словами, его можно назвать "холстом для рисования" на страницах сайта.

Не путать(!) с тэгом canvas (холст), о котором подробно написал
на его собственной странице:

Там я проверял, как можно рисовать с помощью JavaScript, а здесь показываю рисование исключительно в HTML, что, естественно, имеет принципиальные различия!   узнать о различиях сразу:

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

Здесь же - о единицах измерения, используемых для рисования в HTML.

SVG "признаёт" единицы длины: em, ex, px, pt, pc, cm, mm, in и проценты.

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

Отображение тэга svg

Для начала посмотрим, как браузер отобразит "пустой" этот тэг, т.е. ещё БЕЗ прописывания в нём каких-либо атрибутов и внутренних тэгов, то есть - "по умолчанию". Начало и конец вывода обозначил звёздочками (*).

Да!!  Единственный атрибут, который я ему всё-таки дал, это атрибут style. Задал в нём, чтобы границы тэга было видно, чёрный однопиксельный "outline".

Выглядит подобная запись кода так: <svg style="outline:1px solid black;"><⁄svg>.

А отображается браузером так.

Здесь, между звёздочками ** вставлен пустой тэг.

Видно, что "по умолчанию" его фон прозрачен,
и что это строчно-блочный элемент.
И ещё кое-что.

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

По умолчанию его ширина (width) - 300px и высота (height) - 150px.

Эти размеры можно менять как атрибутом style, так и непосредственно в соответствующих атрибутах (width и height) самого тэга svg.

Глобальный тэг <center> на него действует правильно!

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

Основная система координат SVG

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

Но прежде всего нужно до конца разобраться, как отображаются векторные изображения на svg-холсте.

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

Отсчёт ведётся с левой верхней точки холста.

На сделанном мною рисунке хорошо видно, как будет вести себя векторная фигура на холсте svg, получая те или иные значения атрибутов X и Y.

Показал основную систему координат, но есть и другие.

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

НО!

Внутренние тэги элемента svg

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

Каждому внутреннему тэгу можно прописать атрибуты, от которых фигура, рисуемая этими тэгами, будет выглядеть так, или иначе. Именно в этих атрибутах задаётся: положение по осям X и Y, фоновый цвет рисунка, его рамки и т.д., и т.п..

*Кстати!  Если указанные координаты, как в некоторых примерах, НЕ соответствуют размерам холста по умолчанию (*см. вверху ), либо заданным в тэге svg, тогда холст покажет только то, что уместилось!  Остальное он "отрежет" (скроет)!

Список внутренних тэгов

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

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

А такой элемент: - вернёт обратно к списку.

* * *

Теперь можно показать и самое интересное - рисование в HTML с помощью этих интересных, и таких разных внутренних тэгов.

Основы рисования в HTML

Начну с самого простого - с рисования элементарных фигур, или как их ещё называют - "векторных примитивов".

Внутренний тэг rect

Этим тэгом очень легко рисовать любые прямоугольные фигуры: квадраты и прямоугольники.

Сначала нарисовал прямоугольник, какой он есть (ширина - 180px, высота - 120px), т.е. ещё БЕЗ указания его координат (X и Y). Просто дал ему размеры в тэге svg.

Кстати!  Если специально не указать цвет фигуры, то по умолчанию все фигуры будут рисоваться чёрными.

* * *

Теперь он же, но уже с координатами: X=100 и Y=100.

* * *

А в этом примере, кроме общих, присвоил ему дополнительные атрибуты.

• rx - скругление по оси X


• ry - скругление по оси Y

Вот так выглядит он же, но с углами, скруглёнными на 30 градусов.

* * *

Теперь этот прямоугольник превращаем в квадрат, задав ему одинаковые ширину и высоту, и поворачиваем его на 30 градусов. И квадрат отображается как ромб.
Такое становится возможным, если использовать в тэге rect специальный атрибут трансформации: transform="rotate(-30)".

Кстати!  Было бы правильнее - прописать в тэге-родителе svg атрибут viewBox, отвечающий за позиционирование рамки, как сделал в следующем примере рисования.

* * *

Следующий пример - жёлтый прямоугольник с красной рамкой.

viewBox - атрибут позиционирования, прописанный в самом тэге svg.

А его внутреннему тэгу rect прописаны специальные атрибуты.

• fill - задаёт фоновый цвет фигуры


• stroke - указывает цвет рамки


• stroke-width - устанавливает толщину рамки

*P.S.  Вообще же, хочу сказать, что этот атрибут viewBox - самый "путаный" из всех атрибутов для рисования в HTML.
Он масштабирует рисунки, создавая свою собственную область просмотра и свою же собственную систему координат, что очень сильно сбивает с толку.

Поэтому в своих рисунках предпочитаю (по возможности) обходиться БЕЗ него!

Внутренний тэг circle

Этим внутренним тэгом рисуются круги.
Здесь нарисовал круг радиусом r=75 пикселей, имеющий координаты: cx=200 и cy=75.

* * *

Во втором примере нарисован круг радиусом r=100 пикселей, имеющий координаты: cx=200 и cy=100.

В этом примере рисования видно, что отобразился усечённый круг. Браузер показал его так из-за того, что по умолчанию высота "холста" составляет 150px, а диаметр круга (D=2r) на 50 пикселей её больше.
Желая получить целый круг, нужно: либо уменьшить его радиус, либо прописать высоту в тэге svg, увеличив её.

* * *

Ниже ещё пример - жёлтый круг с широкой красной рамкой.

Его специальные атрибуты точно такие же, как и в примере с прямоугольниками.

Внутренний тэг ellipse

Рисуем эллипс шириной 70px и высотой 40px, с координатами: cx="100" и cy="100" соответственно. Видно, что он "лежит".

* * *

А так отображается тот же самый эллипс, но с другими значениями атрибутов. Ширина 40px и высота 70px, с координатами: cx="100" и cy="70" пикселей. Здесь он "стоит".

* * *

У следующих 4-ёх примеров для наглядности прописал в тэге svg однопиксельную рамку. Ширина и высота "холста" у всех одинаковая: 500 и 250 пикселей.

Для всех внутренних тэгов ellips задавал специальный атрибут трансформации с разными значениями, типа: transform="rotate(30)".

**Prim.  У последних (№3 и №4) примеров этот атрибут особенный!   Прописал его наподобие такого: transform="translate(250 100) rotate(-30)".

Все размеры эллипсов одинаковые!

Пример №1

Красный эллипс с наклоном: rotate(-30).

* * *

Пример №2

Этот же красный эллипс, но с наклоном: rotate(30).

* * *

Пример №3

Прозрачный эллипс с синей обводкой 5px и наклоном: rotate(-30).

* * *

Пример №4

Ещё пример - 2 эллипса на одном холсте, один из которых наклонен: rotate(-30).

Здесь использовал группирующий тэг g и специальный атрибут transform, о котором подробно я ещё не говорил. Рассказываю о них дальше.

Можно смотреть сразу: внутренний тэг g:   и   трансформация svg:

*P.S.  Образцы рисования в HTML ещё нескольких эллипсов можно посмотреть дальше, в примерах с добавлением рисункам радиального градиента.   смотреть сразу:

Внутренний тэг line

Позволяет нарисовать в HTML абсолютно любую линию, указав браузеру координаты её начала: x1 и y1 и конца: x2 и y2.

Координаты задавал в пикселях!
Отсчёт ведётся с левой верхней точки холста.

Горизонтальная линия

В данном примере линия начинается в координатах: x1="100" и y1="100", а заканчивается в x2="300" и y2="100", имеет синий цвет и ширину 5px.

В HTML-коде изменились координаты только по оси "х" у одной, конечной точки.

* * *

Вертикальная линия

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

В данном примере изменилась только конечная точка по оси "y", начавшись в 150, и закончившись в 10px от верхней границы холста.

* * *

Наклонная линия

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

Начало линии: x1="10" y1="250", и координаты её конца: x2="200" y2="10".

Важно!

Прописывая в HTML-коде значения координат начальной и конечной точек наклонной линии, не забывать(!) о размерах холста по умолчанию (если не указано иное).

Почему?!

В противном случае - это собьёт с толку!!!

Браузер всё равно станет начинать либо заканчивать отображение наклонной линии, как полагается, но за пределами холста.
Поэтому, его видимая часть будет отображаться не понятно, почему так?!! Пример ниже.

"Увёл" в этом примере начальную точку по оси "y" за пределы холста.

Координаты линии: x1="10" y1="300" и x2="200" y2="10".

В приведённом примере "как не надо делать" вроде бы видно, что начальная точка линии по оси "x" (x1) уж никак не может иметь координату 10px от начала холста.

Визуально - она находится на расстоянии где-то 110 - 115px.

Но это НЕ вся линия, а лишь видимая часть её!

* * *

Окончание линий

А в этом примере показываю одно из 4-ёх возможных значений для атрибута линий stroke-linecap. Эти значения задают, какую форму(?) примут концы незамкнутого контура линии.

В данном примере прописал атрибуту конца линии значение "round" (круглые), а вообще они могут быть такими: butt, round, square и inherit.

inherit - означает команду: "наследовать у родительского тэга", а что будет с концами линий при использовании других, хорошо видно на рисунке.

Он здесь:

Внутренний тэг polyline

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

Им можно рисовать НЕзамкнутые объекты, задавая точки, по которым и будет проходить желаемая линия. Пример зелёной ломаной линии ниже.

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

Все точечные координатные пары прописываются так: x,y x,y x,y и так далее.

Нечётное число точечных пар является ошибкой!

Внутренний тэг polygon

Это аналог предыдущего тэга (polyline). Разница в том, что конечная точка автоматически соединится с первой.

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

Код пишется и читается с самой верхней левой точки "по часовой"!

Пример - многоугольник.

Для создания многоугольника использовал в тэге svg атрибут viewBox, который устанавливает (накладывает) свою собственную систему координат.

Здесь прописал так: viewBox="10 0 350 300".

Этот код читается так:

• первые два значения атрибута - позиционирование внутри просмотровой зоны


• вторые два значения атрибута - ширина и высота просмотровой зоны

На заметку!  Если нет особой необходимости, лучше устанавливать просмотровую зону c шириной и высотой равной аналогичным значениям в тэге svg.

Это поможет избежать путаницы, а возникнуть подобная необходимость может только в случае рисования сразу 2-ух (или больше) объектов в одном поле.

Кроме того, учесть!

Использование сразу 2-ух систем координат с разными значениями вызывает масштабирование!
Очень трудно уловить их нужное соотношение.

Дробные части значений прописываются через ТОЧКУ!

Пример двух многоугольников в одном просмотровом поле
с использованием 2-ух систем координат.

Ещё пример отображения тех же многоугольников в одном просмотровом поле,
но используя лишь 1 систему координат (только у атрибута viewBox).

Сравнив показанные 2 примера отображения одних и тех же многоугольников в 1-ой просмотровой зоне, хорошо видно упомянутое масштабирование.

* * *

Важно!  Здесь столкнулся с тем, что для отображения ОБОИХ рисунков, пришлось дописать тэгам polygon их закрывающего "собрата": <polygon> ... ... </polygon>.

По правилам - таким тэгам НЕ требуется закрывающий тэг, но БЕЗ прописывания у одиночных тэгов конструкции с закрывающим слэшем: <polygon ... ... ...  />, не удавалось заставить браузер показывать сразу два рисунка. Оставался только один!

А в проверяемой мною версии HTML 4.01 Transitional такие "фокусы" с закрывающими слэшами НЕ ИСПОЛЬЗУЮТСЯ! ... ... ... Хотя это работает! Проверял!

* * *

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

Она здесь:

Внутренний тэг image

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

Чтобы вставить рисунок, достаточно прописать его адрес в атрибуте xlink, который работает как фильтр.
В моём примере код такой - <image xlink:href="logos.jpg" width="200" height="150">.

Естественно, тэг image с таким атрибутом должен находиться внутри тэга svg.
Как самостоятельный элемент - почти НЕ работает!

Почему почти?!
Вот так он отображается сам по себе.

Видно еле заметную рамку, размеры которой можно менять с помощью его атрибутов ширины и высоты. Можно его "покрасить" с помощью атрибута style, и т.д..

Prim.*  Отцентрировал его рамку, как обычно, с помощью тэга "p".

Но самое главное, для чего он существует, рисунок - самостоятельно не показывает!

* * *

А так выводятся на одном векторном svg-холсте сразу 2 растровых рисунка.
Кстати! Их размеры полностью укладываются в размеры холста по умолчанию, и один из них меньше другого по высоте. Это важно!

Видно, что в приведённом примере оба рисунка отобразились, и один из них наложился на другой.
Таким образом можно создавать оригинальные комбинации из изображений, накладывая их друг на друга. Только нужно помнить об особенностях рисования в HTML.

Важно!  Сверху, т.е. ПЕРВЫМ отображается ПОСЛЕДНИЙ из указанных рисунков, так как по коду он считается ПЕРВЫМ!

И

Не забывать!  Об особенности использования одиночных тэгов в версии HTML 4.01 Transitional.  вспомнить:

Так же не следует забывать и о возможном (в некоторых случаях) масштабировании изображений. Примеры комбинированных (вектор + растр) рисунков ниже.

Примеры комбинированных рисунков в HTML из векторных фигур и растрового изображения

Пример №1 (как есть).

Результат.
Куда бы я ни вставлял в HTML-коде растровый рисунок примера, он всегда отображался как видно в верхнем образце, т.е. лево - верх.

* * *

Пример №2 (изменения в атрибутах растровых рисунков).

Нужно знать!
У обоих растровых изображений менял только значения в атрибутах width и height, что приводило к разным результатам.

Результаты.

1. Изменения в атрибуте width - сдвижение растрового рисунка по оси "X".

2. Изменения в атрибуте height - трансформация(+/-) рисунка и по оси "Y", и по оси "X" тоже!

3. Изменения в обоих атрибутах приводят к сдвижению по оси "X", как в 1-ом пункте, и трансформации, как написано во 2-ом.

4. Специально сделал, чтобы в последнем примере рисования в HTML с помощью тэга image объекты наложились друг на друга.

Из него хорошо видно, что и растровые, и векторные объекты подчиняются одним и тем же законам написания кода.  вспомнить:

Внутренний тэг defs

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

Но больше всего меня заинтересовала возможность использовать этот тэг для создания всевозможных svg-градиентов.

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

Однако, всему своё время, и сначала нужно хорошо разобраться с их "тэгом-родителем".

Закрывающий тэг для него обязателен: <defs></defs>.

Вообще - это контейнер внутри которого и создаются нужные изображения. Его самого в браузере НЕ видно, но к нему можно потом обращаться из созданных фигур ВНЕ его, но внутри тэга svg по уникальному идентификатору "id" из их атрибутов.

*Например так.
Внутри контейнера - id="examp1", а обращаемся к нему извне - fill="url(#examp1)".

А вот теперь уже можно и о создании векторных градиентов поговорить.

SVG-градиенты

Есть два типа градиентов: "линейный" и "радиальный".
Соответственно, и переход между цветами у них происходит либо вдоль прямой линии, либо в круге.

Кроме названных типов, каждый градиент может быть: "горизонтальный", "вертикальный" и "наклонный".

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

Сначала показываю примеры разных типов градиентов, а под ними даю более подробное описание их кода.
**Наиболее подробно объясняю принципы создания 1-ого примера рисунка. Далее уже по необходимости, если есть какие-то особенности.

Линейный горизонтальный прямой градиент №1

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

<linearGradient></linearGradient> - именно он говорит браузеру о типе градиента, и именно в нём задаются все его параметры.

Его атрибуты: x1="0"  y1="0" и x2="100%"  y2="0" задают начальные и конечные точки градиента.
Это процентные значения! Они размещают контуры градиента вдоль нужных осей.

* * *

В данном примере атрибуту x2 задано значение 100%, а атрибуту y2 — 0. Поэтому получился горизонтальный градиент (при x1 и y1, равных нулю).

А если задать им значения наоборот — вертикальный.

Установив оба значения в 100% (или в любое значение, отличное от 0), то получится наклонный градиент.

* * *

Внутренние тэги <stop></stop>, которых целых два одинаковых в конструкции, но с разными значениями атрибутов, говорят браузеру о насыщенности и цветах градиента.

Атрибуты его такие:

• offset - в первом тэге устанавливает, на сколько процентов длится 1-ый цвет, указанный в stop-color, а во 2-ом, соответственно, 2-ой цвет


• stop-color - устанавливает диапазон цветов

В показанном примере НЕ применял, но можно использовать и ещё один атрибут вместе с названным stop-color.

Это:

• stop-opacity - где прозрачность начинается, и где она заканчивается

**Кстати!  Эти же атрибуты (кроме offset) можно прописывать как css-стиль в атрибуте style.   проверил:

Линейный горизонтальный прямой градиент №2

Ещё один интересный пример линейного градиента других цветовых переходов, и в фигуре другого размера, с широкой синей рамкой.

В этом примере хорошо проявилась особенность отображения градиента.
Хоть фигура, к которой он применился, находится ВНЕ тэгов градиента, однако её рамка тоже попала под его влияние.
Один её край - шире, а другой - уже.

И ещё!

Лучше у тэга svg задать атрибуты ширины и высоты на 1÷5px больше, чем они же в "принимающей" градиент фигуре.

Линейный вертикальный прямой градиент

У этого примера только y2="0", а все остальные значения атрибутам установил 100%.

Линейный вертикальный обратный градиент

Здесь наоборот - y2="100%", а все остальные значения установил в "0".

Линейный наклонный градиент

У этого примера прописал x2="100%" и y2="100%", а всем остальным значениям задал "0".

Радиальный градиент

Здесь показываю второй возможный тип svg-градиентов.

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

<radialGradient></radialGradient> - он определяет тип градиента.

Имеет дополнительные атрибуты:

• fx - устанавливает (в процентах) центр начальной точки градиента по оси "x"


• fy - то же самое, но по оси "y"

В показанном выше примере радиального градиента (синего) всё сделал по-центру, т.е. всем атрибутам главного тэга прописал значения 50%.

Поставив же значение его атрибута fx="0", получится так.

* * *

А в нижнем примере я изменил цвета градиента, и ещё добавил изменения прозрачности с помощью stop-opacity, дав ей значения от "0" до "1".

Кстати!  Цвет и прозрачность прописывал в атрибутах стиля у обоих тэгов stop, как значения свойств.
Проверил!  Их действительно можно задавать и как отдельные атрибуты, и как свойства css-стиля.

**P.S.   В код этого рисунка добавил эллипсу идентификатор id="primerUse", который данному примеру вовсе НЕ НУЖЕН, но я использую его в дальнейшем.

* * *

Не случайно уделил так много внимания созданию градиентов в svg-фигурах. Это один из самых важных навыков, который нужно освоить, чтобы научиться рисовать в HTML.

Внутренний тэг text

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

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

* * *

Примеры отображения тэга text (без дополнительных элементов)

Важно!  Специально сделал этот пример, чтоб было видно, дав ему рамку svg, которая по умолчанию составляет: 300 X 150px.

А видно вот что: тексту места не хватило. Почему?!

Строке примера задал координаты: x="85" и y="100", цвет черный, стиль "жирный", шрифт "Arial", размер 36 пикселей.

Разберёмся!

Первый символ текста в тэге <text> отображается в соответствии с установленными значениями x и y.

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

Значение атрибута y устанавливает вертикальное положение базовой линии. Проще говоря - нижнего края текста.

Оба этих атрибута устанавливают координаты в абсолютных единицах.
Это нужно знать для дальнейшего освоения основ рисования в HTML.

* * *

А здесь, ниже, показал ещё один простой, но более наглядный пример использования этого тэга ещё БЕЗ каких-либо "добавок".

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

Единственное, о чём всё-таки нужно помнить!

Это о том, что и растровые, и векторные объекты подчиняются одним и тем же законам написания кода.  вспомнить:

* * *

А теперь обязательно следует сказать об атрибутах этого очень интересного тэга, позволяющих делать с текстом всё, что душе угодно!   Даже больше!

Атрибуты тэга text

У этого тэга есть много атрибутов общих для всех тэгов, но есть и свои собственные, специальные - текстовые атрибуты, которые кстати(!) очень похожи на свойства CSS.

Сначала специальные.

А это пример их использования.

Кстати!  О работе с текстом и подключении к сайту сторонних шрифтов подробно рассказал и показал здесь: "Веб-шрифты" (откроется в новом окне).

Теперь общие атрибуты.

Поворот задаётся в градусах!

Примеры их применения.

Только с атрибутом transform.

Только с атрибутом rotate.

Атрибуты transform и rotate вместе.

В последнем примере пришлось увеличить высоту просмотровой зоны (с 250 до 300px) в тэге svg, а в атрибуте transform я изменил значение, с бывшего в предыдущих примерах: transform="rotate(8)", на transform="rotate(20)" (больше наклонил).

* * *

Подробнее об атрибутах rotate и transform показанных примеров.

Важно!  Поворот можно установить как для одной определённой буквы, так и для всей строки текста в целом.

Если в атрибуте rotate установлено всего лишь только одно значение, тогда это приведёт к повороту каждого символа строки на это значение.

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

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

А теперь об атрибуте transform.

В примере текста на последнем изображении для всей графики задан свой поворот атрибутом transform, НО каждому символу тоже установлено своё значение: rotate="20,0,5,30,10,50,5,10,65,5".
Приведённый же пример написания кода, как раз и является строкой значений.

* * *

Теперь нужно сказать ещё об одном интересном и чрезвычайно важном(!) внутреннем элементе тэга text.

Внутренний тэг tspan

Хоть это и внутренний тэг НЕ глобального тэга svg, а всё того же тэга text, и сам по себе он не имеет визуального вывода, однако я решил его выделить в отдельный подраздел.

Он того стоит!

Находясь внутри <text>, он позволяет разделить строку на отдельные элементы, и присвоить каждому элементу свои собственные стили оформления.

Вот самый простой пример.

Важно!  Для просмотровой зоны в тэге svg дать высоту чуть-чуть (пикселей на 10) больше, чем размер текста.
Иначе ножки у длинных букв "отрежутся"! Ведь базовая линия проходит именно по ним.

* * *

И ещё!  Данный внутренний тэг, повторюсь, так важен(!), потому что в настоящее время SVG не поддерживает форматирующие тэги типа: <b>,  <i>,  <u>,  <br> и так далее, внутри себя, а как следствие, и внутри строк текста.

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

Я проверял, выденное в рамку утверждение, и пробовал вводить в svg-код такие тэги.

Результаты получались такие.

Если ввести сразу после открывающего тэга svg, то ВЕСЬ рисунок сразу пропадает. А если ввести после какого-либо внутреннего тэга, то все элементы ПОСЛЕ НЕГО исчезают.  В случае с текстом - он становился таким, как сейчас видно эту фразу.

* * *

К тому же!  Тэг <tspan> способен позиционировать новые элементы текста относительно предыдущего элемента, благодаря своим специальным атрибутам: dx и dy.

Если x и y устанавливают координаты, как уже писал, в абсолютных единицах, то dx и dy задают координаты относительно предыдущего элемента.

И вот наглядный пример этому.

В приведённом примере, слова ещё и пример! находятся в разных тэгах <tspan> внутри тэга <text>.

Использовав атрибут dy в каждом из этих <tspan>, спозиционировал слова по оси "y", где каждое новое слово позиционируется относительно слова перед ним.

Короче, вот по такой схеме.

Слово Интересный - "ключевое", и оно ВНЕ тэгов <tspan>, и позиционируется само по себе в тэге <text>.
Слово ещё спозиционировано в -30px (т.е. выше) от Интересный, а пример! в 55px от слова ещё.

* * *

Также можно передвигать каждый символ отдельно при помощи строки значений, как показано в следующем примере ниже.

Пример №2 (со строкой значений).

Тэгу <tspan>, выводящему слово ещё я прописал следующую строку значений для атрибута dy: dy="-30,30,30".
И в этом случае хорошо видно, что тестовое слово стало наискосок.

А ниже ещё один интересный пример использования внутреннего элемента тэга text для создания оригинального текстового рисунка.

Внутренний тэг textPath

Аналогично! Хоть и этот тэг тоже является внутренним всё того же тэга <text>, но и он достоин отдельного подраздела.

Он позволяет отобразить текст по изогнутой линии!

Правда, показывая этот пример, я немного "опередил события", т.к. здесь работают не только "герой подраздела" и ранее изученные тэги defs и text , но и пока ещё не разобранный внутренний тэг <path> (о нём в следующем подразделе).

Логическая схема создания изогнутого текста.

<svg>
<defs>   ← тэг для создания шаблонов
<path id="testPath" d="..., ..., ..., ..., ..., ..., ...">   ← создаём шаблон изогнутого контура**
</defs>   ← закрываем тэг шаблона
<text>   ← тэг текста
<textPath xlink:href="#testPath">Сюда вставляется текст</textPath>
</text>   ← закрываем тэг текста
</svg>

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

А дальше всё очень просто!

Как и полагается по правилам, SVG-текст размещён внутри своих "родных" тэгов. Только в данном случае он ещё располагаться в элементе <textPath>, который как раз и позволяет обратиться по "id" к заранее созданному контуру в элементе <path> с таким же идентификатором (подчеркнул их на схеме).

Внутренний тэг path

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

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

Комментарии ВНУТРИ тэга <path> НЕ ИСПОЛЬЗОВАТЬ!

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

Принцип использования тэга path

Нарисовал зелёный треугольник с синей рамкой шириной 5 пикселей, всего лишь прописав в значениях атрибута d строку значений, состоящую из таких буквенных команд: d="M20,20 L280,20 L150,140 Z".

В этом выражении буквы означают действие, а цифры после них - координаты по осям "x" и "y".

В коде показанного примера svg-рисунка треугольника использовал, естественно, не все имеющиеся буквенные команды. Список остальных ниже.

Список ВСЕХ буквенных команд атрибута d тэга path

* * *

* * *

Использование других буквенных команд атрибута "d" показываю дальше. И сначала проверяю их написание в разных вариантах.

Нижний код рисунка фигуры написал с одним значением команд H и V.

Строчка с этим атрибутом здесь выглядит так: d="M20,20 H250 V130 H100 Z", а как читается этот код, ясно из приведённого выше примера и списка ВСЕХ буквенных команд. вспомнить:

* * *

В этом - 2 тэга path, идущих друг за другом.

Разница в коде - лишь в координатах исходной точки команды M у второго тэга path.

* * *

Здесь - 2 исходных точки М и 2 закрывающих Z, находящихся в 1-ом тэге path.

Интересная особенность!  Фигура маленького треугольника, прописанная в коде второй (второй по счёту), перекрывает фигуру, полученную от первой части кода.

Что перекрывает, т.е. накладывается, это-то нормально, НО!