Графика
Canvas<canvas> элемент предоставляет API для рисования 2D-графики, с использованием JavaScript.
SVG
SVG (Scalable Vector Graphics — масштабируемая векторная графика) — позволяет вам описать изображение в виде линий, кривых и других геометрических фигур. Благодаря этому можно масштабировать рисунок без потери качества.
WebGL
WebGL — это JavaScript API, позволяющее рисовать 3D или 2D изображения используя HTML-элемент <canvas>. Эта технология позволяет использовать стандарт OpenGL ES в Web-содержимом.
Все Заголовки (список Глав)
Введение в SVG SVG в HTML SVG прямоугольник SVG круг SVG эллипс SVG прямая линия SVG многоугольник SVG ломаная линия SVG контур SVG текст SVG свойство stroke SVG фильтры SVG градиенты SVG и картинки Что делает атрибут SVG xmlns?
Введение в SVG
Введение в SVG
Что такое SVG?
- SVG расшифровывается как масштабируемая векторная графика (анг. Scalable Vector Graphics)
- SVG используется, чтобы определять векторную графику для сети
- SVG определяет графические объекты в формате XML
- SVG графика НЕ теряет в качестве при изменении размера или увеличении
- Каждый элемент и каждый атрибут в SVG файлах может быть анимирован
- SVG является рекомендацией консорциума W3C
- SVG интегрируется с другими стандартами консорциума W3C, такими как DOM и XSL
Преимущества SVG
SVG имеет следующие преимущества над другими графическими форматами (как JPEG и GIF):
- SVG изображения могут создаваться и редактироваться в любом текстовом редакторе
- SVG изображения могут индексироваться, скриптоваться и сжиматься, по ним можно осуществлять поиск
- SVG изображения легко масштабируются
- SVG изображения могут распечатываться в высоком качестве при любом разрешении
- Любую часть SVG изображения можно увеличивать без потери качества картинки
- SVG — это открытый стандарт
- SVG файлы — это чистый XML код
Главным конкурентом SVG является технология Flash. Тем не менее, самым большим преимуществом SVG над Flash является его совместимость с другими стандартами (например, XSL и DOM). Flash же основывается на проприетарной технологии и не является открытым стандартом.
Создание SVG изображений
SVG изображения можно создавать в любом текстовом редакторе, однако часто удобнее для этих целей использовать специальные программы, вроде Inkscape.
Введение в SVG
Что такое SVG?
- SVG расшифровывается как масштабируемая векторная графика (анг. Scalable Vector Graphics)
- SVG используется, чтобы определять векторную графику для сети
- SVG определяет графические объекты в формате XML
- SVG графика НЕ теряет в качестве при изменении размера или увеличении
- Каждый элемент и каждый атрибут в SVG файлах может быть анимирован
- SVG является рекомендацией консорциума W3C
- SVG интегрируется с другими стандартами консорциума W3C, такими как DOM и XSL
Преимущества SVG
SVG имеет следующие преимущества над другими графическими форматами (как JPEG и GIF):
- SVG изображения могут создаваться и редактироваться в любом текстовом редакторе
- SVG изображения могут индексироваться, скриптоваться и сжиматься, по ним можно осуществлять поиск
- SVG изображения легко масштабируются
- SVG изображения могут распечатываться в высоком качестве при любом разрешении
- Любую часть SVG изображения можно увеличивать без потери качества картинки
- SVG — это открытый стандарт
- SVG файлы — это чистый XML код
Главным конкурентом SVG является технология Flash. Тем не менее, самым большим преимуществом SVG над Flash является его совместимость с другими стандартами (например, XSL и DOM). Flash же основывается на проприетарной технологии и не является открытым стандартом.
Создание SVG изображений
SVG изображения можно создавать в любом текстовом редакторе, однако часто удобнее для этих целей использовать специальные программы, вроде Inkscape.
SVG в HTML
SVG в HTML
В HTML5 вы можете включать элемент SVG непосредственно в HTML код веб-документа.
Включайте SVG непосредственно в HTML код страницы
Ниже приводится пример простой SVG графики:
Вот HTML код, реализующий ее:
<!DOCTYPE html> <html> <body> <h1>Моя первая SVG графика</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
Объяснения SVG кода:
- SVG изображение начинается с элемента <svg>
- Атрибуты width и height элемента <svg> определяют ширину и высоту SVG изображения
- Элемент <circle> используется для рисования круга
- Атрибуты cx и cy определяют координаты X и Y центра круга. Если атрибуты cx и cy не определяются, то координаты центра круга устанавливаются в значения (0, 0)
- Атрибут r определяет радиус круга
- Атрибуты stroke и stroke-width отвечают за то, как будет выводиться фигура. В данном примере устанавливается, что круг должен отображаться линией зеленого цвета толщиной 4px
- Атрибут fill определяет цвет заливки круга. В данном примере задан желтый цвет
- Закрывающий тег </svg> завершает описание SVG изображения
Примечание: Так как SVG декларация использует формат XML, все элементы должны быть закрыты в соответствии со спецификацией XML!
SVG прямоугольник
SVG прямоугольник
В SVG есть несколько предопределенных элементов, позволяющих разработчику рисовать различные фигуры:
- Прямоугольник <rect>
- Круг <circle>
- Эллипс <ellipse>
- Прямая линия <line>
- Ломаная линия <polyline>
- Многоугольник <polygon>
- Контур <path>
В следующих главах будет рассмотрен каждый элемент, и начнем мы с прямоугольника.
SVG прямоугольник — <rect>
Пример №1
Для создания прямоугольника и различных его вариаций используется элемент <rect>:
SVG код:
<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg>
Объяснение:
- Атрибуты width и height элемента <rect> определяют ширину и высоту прямоугольника
- Атрибут style определяет CSS свойства прямоугольника
- CSS свойство fill определяет цвет заливки прямоугольника
- CSS свойство stroke-width определяет толщину рамки прямоугольника
- CSS свойство stroke определяет цвет рамки прямоугольника
Пример №2
В следующем примере используются новые атрибуты:
SVG код:
<svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> </svg>
Объяснение:
- Атрибут x определяет позицию прямоугольника слева (например, x=»50″ помещает прямоугольник в 50px от левого отступа)
- Атрибут y определяет позицию прямоугольника сверху (например, y=»20″ помещает прямоугольник в 20px от верхнего отступа)
- CSS свойство fill-opacity определяет прозрачность цвета заливки (допустимый диапазон: от 0 до 1)
- CSS свойство stroke-opacity определяет прозрачность цвета прорисовки (допустимый диапазон: от 0 до 1)
Пример №3
Определяем прозрачность всего элемента:
SVG код:
<svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg>
Объяснение:
- CSS свойство opacity определяет значение прозрачности для всего элемента (допустимый диапазон: от 0 до 1)
Пример №4
В последнем примере создадим прямоугольник с закругленными углами:
SVG код:
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
Объяснение:
- Атрибуты rx и ry закругляют углы прямоугольника
SVG круг
SVG круг
Чтобы нарисовать круг, используется элемент <circle>:
SVG код:
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
Объяснение:
- Атрибуты cx и cy определяют координаты X и Y центра круга. Если атрибуты cx и cy не определяются, то центр круга устанавливается в координаты (0,0)
- Атрибут r определяет радиус круга
SVG эллипс
SVG эллипс
Чтобы создать эллипс, используется элемент <ellipse>.
Эллипс имеет достаточно близкое отношение к кругу. Разница заключается в том, что у эллипса радиусы по горизонтальной и вертикальной оси разные, в то время как у круга они одинаковые.
Пример №1
Создадим эллипс:
SVG код:
<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg>
Объяснение:
- Атрибут cx определяет координату X центра эллипса
- Атрибут cy определяет координату Y центра эллипса
- Атрибут rx определяет горизонтальный радиус
- Атрибут ry определяет вертикальный радиус
Пример №2
Создадим три эллипса, расположенные друг над другом:
SVG код:
<svg height="150" width="500"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> </svg>
Пример №3
В следующем примере скомбинируем два эллипса (желтый и белый):
SVG код:
<svg height="100" width="500"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> </svg>
SVG прямая линия
SVG прямая линия
Чтобы создать прямую линию, используется элемент <line>:
SVG код:
<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>
Объяснение:
- Атрибут x1 определяет координату X стартовой точки линии
- Атрибут y1 определяет координату Y стартовой точки линии
- Атрибут x2 определяет координату X конечной точки линии
- Атрибут y2 определяет координату Y конечной точки линии
SVG многоугольник
SVG многоугольник
Элемент <polygon> используется для создания графической фигуры, содержащей как минимум три стороны.
Многоугольники создаются из прямых линий, при этом контур «закрывается» (все линии связаны).
Пример №1
Создаем многоугольник с тремя сторонами:
SVG код:
<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>
Объяснение:
- Атрибут points определяет координаты X и Y каждого угла многоугольника
Пример № 2
Создаем многоугольник с четырьмя сторонами:
SVG код:
<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>
Пример №3
Нарисуем звезду при помощи элемента <polygon>:
SVG код:
<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
Пример №4
Изменим свойство fill-rule на «evenodd»:
SVG код:
<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
SVG ломаная линия
SVG ломаная линия
Элемент <polyline> используется для создания, так называемой, ломаной линии.
Ломаная линия создается из прямых линий, при этом контур «не замыкается».
Пример №1
Элемент <polyline> используется, чтобы создавать любую графическую фигуру, состоящую только из прямых линий:
SVG код:
<svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>
Объяснение:
- Атрибут points определяет координаты X и Y каждого «перелома» линии
Пример №2
Другой пример фигуры, состоящей только из прямых линий:
SVG код:
<svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg>
SVG контур
SVG контур
Для создания контура используется элемент <path>.
В качестве данных контура используются следующие команды:
- M = переместить указатель
- L = нарисовать линию
- H = нарисовать горизонтальную линию
- V = нарисовать вертикальную линию
- C = нарисовать кубическую кривую Безье с двумя контрольными точками
- S = нарисовать сглаженную кубическую кривую Безье с одной контрольной точкой
- Q = нарисовать квадратичную кривую Безье с одной контрольной точкой
- T = нарисовать сглаженную квадратичную кривую Безье. Контрольной точкой будет отражение контрольной точки предыдущей команды.
- A = нарисовать эллиптическую кривую
- Z = закрыть контур
Примечание: Все вышеприведенные команды имеют вариант записи в нижнем регистре. Если команда записана большими буквами, то позиционирование будет абсолютным. Если маленькими буквами, то позиционирование будет относительным.
Пример №1
В следующем примере определяется контур, который начинается в координатах (150,0), затем проводится линия в координаты (75,200), затем проводится линия в координаты (225,200) и, наконец, контур закрывается в начальных координатах (150,0):
SVG код:
<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
Пример №2
Кривые Безье используются для моделирования плавных кривых линий, масштаб которых можно бесконечно увеличивать или уменьшать. Обычно, выбирается две конечных точных точки и одну или две контрольных. Кривую Безье с одной контрольной точкой называют квадратичной кривой Безье, а с двумя контрольными точками — кубической.
В следующем примере создается кубическая кривая Безье. Здесь A и C — соответственно начальная и конечная точки, B — контрольная точка:
SVG код:
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Пометим соответствующие точки -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Поставим метки точек -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Сложно? ДА!!!! Именно из-за сложности при рисовании контуров и рекомендуется использовать специальный SVG редактор для создания сложной графики.
<text>
https://developer.mozilla.org/ru/docs/Web/SVG/Element/text
SVG текст
SVG текст
Для вывода текста используется элемент <text>.
Пример №1
Выводим текст:
Я люблю SVG!
SVG код:
<svg height="30" width="200"> <text x="0" y="15" fill="red">Я люблю SVG!</text> </svg>
Пример №2
Повернем текст:
SVG код:
<svg height="60" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">Я люблю SVG</text> </svg>
Пример №3
Элемент <text> может содержать любое число подгрупп, состоящих из элемента <tspan>. Каждый элемент <tspan> может определять свои данные о формате и позиционировании.
Текст на нескольких строках (с элементом <tspan>):
Несколько строк:
Первая строка.
Вторая строка.
SVG код:
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Несколько строк:
<tspan x="10" y="45">Первая строка .</tspan>
<tspan x="10" y="70">Вторая строка .</tspan>
</text>
</svg>
Пример №4
Текст как ссылка (с элементом <a>):
SVG код:
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://msiter.ru/" target="_blank">
<text x="0" y="15" fill="red">Я люблю SVG!</text>
</a>
</svg>
SVG свойство stroke
SVG свойство stroke
SVG предлагает широкий диапазон свойств, отвечающих за стиль контуров графических фигур. Эти свойства имеют вид «stroke-*«. Здесь мы рассмотрим следующие свойства:
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
Все эти свойства могут использоваться со всеми видами линий, текста и контурами графических фигур, вроде круга.
SVG свойство stroke
Свойство stroke определяет цвет линии, текста или контура (обводки) элемента:
SVG код:
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
SVG свойство stroke-width
Свойство stroke-width определяет толщину линии, текста или контура (обводки) элемента:
SVG код:
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
SVG свойство stroke-linecap
Свойство stroke-linecap определяет различные типы концов открытых линий:
SVG код:
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
SVG свойство stroke-dasharray
Свойство stroke-dasharray используется для создания прерывистых линий:
SVG код:
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
SVG фильтры
SVG фильтры
SVG фильтры позволяют добавлять различные графические эффекты SVG графике.
<defs> и <filter>
Все SVG фильтры определяются внутри элемента <defs>. Элемент <defs> это сокращение от английского слова «definitions» (пер. «определения») и содержит определение специальных элементов (таких как фильтры).
Элемент <filter> предназначен для определения SVG фильтра. У элемента <filter> должен быть задан обязательный атрибут id, который идентифицирует фильтр. Графический объект затем указывает на этот фильтр.
Элементы SVG фильтров
В SVG доступны следующие элементы фильтров:
- <feBlend> — фильтр для комбинирования изображений
- <feColorMatrix> — фильтр для трансформации цветов
- <feComponentTransfer>
- <feComposite>
- <feConvolveMatrix>
- <feDiffuseLighting>
- <feDisplacementMap>
- <feFlood>
- <feGaussianBlur>
- <feImage>
- <feMerge>
- <feMorphology>
- <feOffset> — фильтр для создания теней
- <feSpecularLighting>
- <feTile>
- <feTurbulence>
- <feDistantLight> — фильтр для освещения
- <fePointLight> — фильтр для освещения
- <feSpotLight> — фильтр для освещения
С любым элементом SVG можно использовать любое количество фильтров!
В данной главе Учебника по SVG графике мы всего лишь продемонстрируем несколько примеров использования SVG фильтров, чтобы вы смогли себе представить возможности SVG графики.
Эффект размытия
Фильтр <feGaussianBlur>.
Пример
Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:
SVG код:
<svg height="110" width="110">
<defs>
<filter id="f0" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f0)" />
</svg>
Объяснение:
- Атрибут id элемента <filter> определяет уникальное имя фильтра
- Эффект размытия создается при помощи элемента <feGaussianBlur>
- Часть in=»SourceGraphic» определяет, что эффект создается для всего элемента
- Атрибут stdDeviation определяет размер размытия
- Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром «f1»
Создание тени (<feOffset>)
Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или графический элемент) и немного сдвигается в XY плоскостях.
Пример
Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое изображение (при помощи элемента <feBlend>):
SVG код:
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
Объяснение:
- Атрибут id элемента <filter> определяет уникальное имя фильтра
- Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром «f1»
Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):
SVG код:
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
Объяснение:
- Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия
Теперь делаем тень черной:
SVG код:
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
Объяснение:
- Значение атрибута in элемента <feOffset> изменено на «SourceAlpha», которое использует альфа-канал вместо всего RGBA набора пикселя для создания размытия
Теперь обработаем тень как цвет:
SVG код:
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
Объяснение:
- Фильтр <feColorMatrix> используется для трансформации цветов сдвинутого изображения в сторону черного цвета. Три значения ‘0.2’ в матрице умножаются на значения красного, зеленого и синего каналов. Уменьшение их значений сдвигает цвет в сторону черного (значение черного цвета = 0)
SVG градиенты
SVG градиенты
Градиент — это плавный переход одного цвета в другой. При этом, к одному и тому же элементу могут применяться несколько цветовых переходов.
В SVG существует два основных типа градиентов — линейный и радиальный, которые определяются при помощи специальных элементов.
SVG элементы, определяющие градиенты, должны располагаться внутри элемента <defs>. Элемент <defs> это сокращение от английского слова «definitions» (пер. «определения») и содержит определение специальных элементов (таких как градиенты).
Линейный градиент — <linearGradient>
Чтобы определить линейный градиент, в SVG используется элемент <linearGradient>.
Линейный градиент может быть горизонтальным, вертикальным или угловым:
- Горизонтальный градиент создается, когда координаты y1 и y2 одинаковые, а координаты x1 и x2 разные
- Вертикальный градиент создается, когда координаты x1 и x2 одинаковые, а координаты y1 и y2 разные
- Угловой градиент создается, когда координаты x1 и x2 и координаты y1 и y2 разные
Пример №1
Создадим эллипс с горизонтальным линейным градиентом от желтого цвета к красному:
SVG код:
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
Объяснение:
- Атрибут id элемента <linearGradient> определяет уникальное имя градиента
- Атрибуты x1, x2, y1, y2 элемента <linearGradient> определяют начальную и конечную позицию градиента
- Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>. Атрибут offset используется, чтобы определить, где цвет градиента начинается и заканчивается
- Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом
Пример №2
Создадим эллипс с вертикальным линейным градиентом от желтого цвета к красному:
SVG код:
<svg height="150" width="400">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
Пример №3
Создадим эллипс с горизонтальным линейным градиентом от желтого цвета к красному и добавим текст внутри эллипса:
SVG код:
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
Объяснение:
- Элемент <text> добавляет текст
Радиальный градиент — <radialGradient>
Чтобы определить радиальный градиент, используется элемент <radialGradient>.
Пример №1
Создадим эллипс с радиальным градиентом от белого цвета к синему:
SVG код:
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
Объяснение:
- Атрибут id элемента <radialGradient> определяет уникальное имя градиента
- Атрибуты cx, cy и r определяют внешний круг, fx и fy определяют внутренний круг
- Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>. Атрибут offset используется, чтобы определить, где цвет градиента начинается и заканчивается
- Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом
Пример №2
Создадим еще один эллипс с радиальным градиентом от белого цвета к синему:
SVG код:
<svg height="150" width="500">
<defs>
<radialGradient id="grad2" cx="30%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
<image>
Элемент <image> позволяет включить растровые изображения в SVG документ.
https://developer.mozilla.org/ru/docs/Web/SVG/Element/image
SVG и картинки
Пример:
<body> <svg class="svg_1" width="40mm" height="10mm" xmlns="http://www.w3.org/2000/svg"> <image href="images/p.cbm.ua_1123123.png" height="10mm" width="40mm"/> </svg> <svg class="svg_1" width="40mm" height="10mm" xmlns="http://www.w3.org/2000/svg"> <image href="images/p.cbm.ua_1123123.png" /> <br> </body>
Что делает атрибут SVG xmlns?
Пример:
<body>
<svg class="svg_1" width="40mm" height="10mm" xmlns="http://www.w3.org/2000/svg">
<image href="images/p.cbm.ua_1123123.png" height="10mm" width="40mm"/>
</svg>
</body>
В документах XML атрибуты и элементы принадлежат пространствам имен. Это делается для того, чтобы предотвратить столкновение элементов из разных технологий, например, элемент SVG <a> и элемент HTML <a> можно отличить, если один из них называется svg:a, а другой html:a
xmlns:xlink говорит, что элементы с префиксом xlink должны интерпретироваться с использованием спецификации xlink UAs, которые понимают эту спецификацию.
xmlns определяет пространство имен по умолчанию, поэтому для этого не требуется никаких префиксов, и вы можете просто написать <a> , а не namespace:a, и UA знает, что это элемент SVG <a> , а не элемент HTML <a> или какой-то элемент <a> , который вы сами создали для своего приложения.
<use>
Элемент <use> берёт элементы из SVG-документа и дублирует их где-то ещё.
https://developer.mozilla.org/ru/docs/Web/SVG/Element/use
transform
В атрибуте transform перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.
Справочник SVG элементов — https://developer.mozilla.org/ru/docs/Web/SVG/Element
Справочник SVG атрибутов — https://developer.mozilla.org/ru/docs/Web/SVG/Attribute
https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/transform
