Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
SVG графика в HTML5
SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики, разработанный консорциумом W3C.
SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.
SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.
Базовая поддержка SVG браузерами.
Последней версией полной спецификации является SVG 1.1.
SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.
Достоинства SVG
- Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
- Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
- SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
- Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
- Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
- В SVG изображение можно добавить несколько ссылок.
- К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера <style>...</style> или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.
Вставка SVG на Web-страницу
SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу (при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить SVG-код в файле с расширением .svg.
Итак, способы вставки SVG-изображения на Web-страницу:
- прямая вставка кода в HTML-документ в контейнере <svg>...</svg>;
- использование SVG-файла в качестве фонового изображения;
- подключение SVG-файла в HTML-документ с помощью тегов img, embed, object и iframe;
- подключение SVG-файла в PHP-документ с помощью функции include.
1. Прямая вставка SVG-кода в Web-документ
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- SVG-код -->
</svg>
2. Использование SVG-файла в качестве фонового изображения
<style>
.home {
display: block;
width: 200px;
height: 300px;
background: url(example.svg) 0 0;
background-size: contain;
}
</style>
<a href="/" class="home"></a>
3. Подключение SVG-файла с помощью тега img
<img src="example.svg">
4. Подключение SVG-файла с помощью тега embed
<embed src="example.svg" type="image/svg+xml">
5. Подключение SVG-файла с помощью тега object
<object data="example.svg" type="image/svg+xml"></object>
6. Подключение SVG-файла с помощью тега iframe
<iframe src="example.svg" width="200" height="300" style="border: none"></iframe>
7. Подключение SVG-файла с помощью функции include
<?php include("example.svg"); ?>
Система координат
Размеры и координаты можно задавать в различных единицах (px, pt, pc, cm, mm, em, in). Если единицы измерения не указаны, то это пиксели.
Начало отсчета координат – это верхний левый угол экрана, т.е.
Базовые SVG-элементы
line | прямая линия |
polyline | ломанная линия |
polygon | многоугольник |
rect | прямоугольник |
circle | круг |
ellipse | эллипс |
path | сложная траектория |
Общие атрибуты тегов SVG-элементов
stroke | Цвет линии | ||||
stroke-width | Толщина линии | ||||
stroke-linecap |
Стиль концов линии. Возможные значения атрибута:
|
||||
stroke-dasharray | Чередование штрихов и пробелов в пунктирной линии Пример | ||||
stroke-dashoffset | Сдвиг пунктира Пример | ||||
fill | Цвет заливки (none – без заливки) | ||||
fill-opacity | Прозрачность заливки (от 0 до 1) | ||||
fill-rule | Правило заливки. Возможные значения атрибута:
|
||||
style | Стиль элемента | ||||
class | Класс элемента |
Прямая линия
Задается тегом <line>.
Атрибуты тега <line>
x1 | Координата начальной точки линии по оси X |
y1 | Координата начальной точки линии по оси Y |
x2 | Координата конечной точки линии по оси X |
y2 | Координата конечной точки линии по оси Y |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<line x1="5" y1="5" x2="500" y2="60" stroke="#b4241b" stroke-width="3" />
</svg>
РЕЗУЛЬТАТ:
Ломаная линия
Задается тегом <polyline>.
Атрибут тега <polyline>
points | Координаты точек ломанной линии парами x,y через пробел |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<polyline points="5,5 5,20, 150,20, 150,35, 295,35, 295,50, 440,50 440,65"
stroke="#b4241b" stroke-width="3" fill="none" />
</svg>
РЕЗУЛЬТАТ:
Многоугольник
Задается тегом <polygon>. Всегда выводит замкнутые фигуры, автоматически проводя линию из конца последнего отрезка в начало первого.
Атрибут тега <polygon>
points | Координаты точек многоугольника парами x,y через пробел |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<polygon points="88,10 56,90 136,42 40,42 120,90"
stroke="#b4241b" stroke-width="3" fill="#ffff00" fill-rule="nonzero"/>
<polygon points="188,10 156,90 236,42 140,42 220,90"
stroke="#b4241b" stroke-width="3" fill="#ffff00" fill-rule="evenodd"/>
</svg>
РЕЗУЛЬТАТ:
Прямоугольник
Задается тегом <rect>.
Атрибуты тега <rect>
x | Координата левой верхней точки прямоугольника по оси X |
y | Координата левой верхней точки прямоугольника по оси Y |
width | Ширина прямоугольника |
height | Высота прямоугольника |
rx | Радиус закругления углов прямоугольника по оси X |
ry | Радиус закругления углов прямоугольника по оси Y |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<rect x="5" y="5" width="500" height="50" rx="10" ry="20"
stroke="#b4241b" stroke-width="3" fill="#ffff00" />
</svg>
РЕЗУЛЬТАТ:
Круг
Задается тегом <circle>.
Атрибуты тега <circle>
cx | Координата центра круга по оси X |
cy | Координата центра круга по оси Y |
r | Радиус круга |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<circle cx="35" cy="35" r="30"
stroke="#b4241b" stroke-width="3" fill="#ffff00" />
</svg>
РЕЗУЛЬТАТ:
Эллипс
Задается тегом <ellipse>.
Атрибуты тега <ellipse>
cx | Координата центра эллипса по оси X |
cy | Координата центра эллипса по оси Y |
rx | Радиус эллипса по оси X |
ry | Радиус эллипса по оси Y |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<ellipse cx="80" cy="35" rx="70" ry="30"
stroke="#b4241b" stroke-width="3" fill="#ffff00" />
</svg>
РЕЗУЛЬТАТ:
Сложная траектория
Задается тегом <path>. Является самым универсальным из SVG-элементов. Позволяет создавать произвольные фигуры. Форма фигуры задается атрибутов d, значение которого – это набор специальных команд. Эти команды могут быть и в верхнем, и в нижнем регистре. Верхний регистр указывает на то, что применяется абсолютное позиционирование, а нижний – относительное.
Команды, определяющие траекторию и направление фигурной линии
M, m | Начальная точка Mx,y |
L, l | Отрезок прямой Lx,y |
H, h | Горизонтальная линия Hx,y или hx |
V, v | Вертикальная линия Vx,y или vy |
A, a | Дуга эллипса Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y rx,ry – радиусы дуги эллипса; x-axis-rotation – угол поворота дуги относительно оси X; large-arc-flag – если (=1), то строится большая части дуги, если (=0) – меньшая; sweep-flag – если (=1), то дуга строится по часовой стрелке, если (=0) – против часовой стрелке; x,y – координаты конечной точки дуги. |
C, c | Кубическая кривая Безье Cx1,y1 x2,y2 x,y x1,y1 – координаты первой контрольной точки; x2,y2 – координаты второй контрольной точки; x,y – координаты конечной точки кривой. |
S, s | Гладкая кубическая кривая Безье Sx2,y2 x,y x2,y2 – координаты второй контрольной точки; x,y – координаты конечной точки кривой. Первая контрольная точка является зеркальным отражением второй контрольной точки. |
Q, q | Квадратичная кривая Безье Qx1,y1 x,y x1,y1 – координаты контрольной точки; x,y – координаты конечной точки кривой. |
T, t | Гладкая квадратичная кривая Безье Qx1,y1 x,y x,y – координаты конечной точки кривой. Контрольная точка этой команды является зеркальным отражением контрольной точки предыдущей команды. |
Z, z | Замыкание траектории |
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="100">
<path d="M10,15 h50 v60 L110,55 A25,35 -30 0,1 150,30
M160,50 C160,110 260,110 260,50 S360,-10 360,50
M370,50 Q420,100 470,50 T570,50 z"
stroke="#b4241b" stroke-width="3" fill="none" />
</svg>
РЕЗУЛЬТАТ:
Основные преобразования SVG-элементов
Все преобразования задаются в атрибуте transform SVG-элемента. Можно указать несколько пребразований через пробел.
translate() | перемещение |
rotate() | поворот |
scale() | масштабирование |
skewX() и skewY() | искажение |
matrix() | комплексное преобразование |
Перемещение
Элемент можно переместить на x пикселей по вправо и y пикселей вниз с помощью функции translate(x,y).
В примере, приведенном ниже, прямоугольник передвигается из точки (2,2) в точку (92,17).
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<rect x="2" y="2" width="500" height="50" stroke="#ccc" stroke-width="3"
fill="#fff" />
<rect x="2" y="2" width="500" height="50" stroke="#b4241b" stroke-width="3"
fill="#ffff00" transform="translate(90,15)" />
</svg>
РЕЗУЛЬТАТ:
Поворот
Элемент можно повернуть при помощи функции rotate(x), где x – угол поворота в градусах относительно начала координат. Если x>0, то поворт по часовой стрелке, если x<0, то поворот против часовой стрелке.
В примере, приведенном ниже, квадрат поворачивается на 5° относительно точки (0,0).
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<rect x="100" y="2" width="50" height="50" stroke="#ccc" stroke-width="3"
fill="#fff" />
<rect x="100" y="2" width="50" height="50" stroke="#b4241b" stroke-width="3"
fill="#ffff00" transform="rotate(5)" />
</svg>
РЕЗУЛЬТАТ:
Масштабирование
Изменить размер элемента можно с помощью функции scale(x,y), где x – коэффициент масштабирования по оси Х, а y – по оси Y. Если коэффициенты совпадают, то указывают только один параметр.
Обратите внимание на то, что в примере, приведенном ниже, квадрат не только уменьшается в два раза, но и перемещается из точки (100,10) в точку (50,5).
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<rect x="100" y="10" width="50" height="50" stroke="#ccc" stroke-width="3"
fill="#fff" />
<rect x="100" y="10" width="50" height="50" stroke="#b4241b" stroke-width="3"
fill="#ffff00" transform="scale(0.5)" />
</svg>
РЕЗУЛЬТАТ:
Искажение
Элемент можно исказить на заданное количество градусов с помощью функций skewX(x) и/или skewY(y) по оси X и/или Y соответственно.
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<rect x="100" y="2" width="50" height="50" stroke="#ccc" stroke-width="3"
fill="#fff" />
<rect x="100" y="2" width="50" height="50" stroke="#b4241b" stroke-width="3"
fill="#ffff00" transform="skewX(45)" />
</svg>
РЕЗУЛЬТАТ:
Комплексное преобразование
Чтобы объединить несколько преобразований, можно установить результирующую матрицу с помощью
функции matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:
xnewCoordSys=axprevCoordSys+cyprevCoordSys+e
ynewCoordSys=bxprevCoordSys+dyprevCoordSys+f
Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
<rect x="2" y="2" width="10" height="10" fill="#ccc" />
<rect x="2" y="2" width="10" height="10" fill="#b4241b"
transform="matrix(3 1 -1 3 60 20)" />
</svg>
РЕЗУЛЬТАТ:
Читать дальше: SSI (Server-Side Includes) – включение кода на стороне сервера .shtml
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости