Почти все современные сайты используют файлы с расширением .SVG. Код SVG встречается в формате шрифтов, кнопок, иконок и изображений. Использование SVG дает приемущества использования на сайте. Первое, это векторная технология - рисунок не теряет качество отображения на различных экранах. Второе, это легковесность файла - обычно не больше 10 килобайт.
Шаблон Helium от Rockettheme не исключение, и первое, где мы сталкиваемся с аббревеатурой svg - это частица Logo - здесь логотип реализуется с помощью кода svg. Используемая кодировка не понятна даже для "продвинутых" пользователей Gantry 5, каким являюсь я.
Попробуем разобраться и реализовать хотя бы простенький логотип с названием организации и телефона.
Наиболее понятно о коде svg написано здесь
Внешний вид.
Текст центруется относительно блока viewBox
Простой текст задается с помощью тега <text>
За размеры букв и расстояние между буквами отвечает font-size и letter-spacing - при этом произведение (количества букв * размеры букв) должно быть меньше viewBox. Пример, 32 (размеры шрифта) *10 (количество букв в слове "техноклимат") =320 (и это меньше величины 330 , отвечающей за длину блока viewBox) - значит при отображении кода svg на дисплее компьютера или мобильного телефона мы увидим все буквы.
Стиль букв задается font-family и font-weight
Структура кода.
Начало теста от верхнего левого угла задается с помощью параметров x и y. Особое внимание уделяем второй строке текста и параметру y - велина должна быть не меньше, чем (2*параметр font-size). Иначе часть второй строки скроется за первой или наложится на неё.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 80">
<text x="50" y="32" font-size="32" font-weight="bold" font-family="roboto, Helvetica, sans-serif" letter-spacing=" 0.10em">Техноклимат </text>
<text x="85" y="64" font-size="32" font-weight="bold" font-family="roboto, Helvetica, sans-serif" letter-spacing=" 0.10em">67 - 81 - 10</text>
</svg>
Атрибут
xmlns обязателен - данный атрибут позволяет избежать конфликта с языком разметки HTML
Так как в структуре кода не отражены цвет и бекграунд текста, то цвет определяется параметрами секции, где размещен код svg.
P.S.
Размеры блока viewBox оказывают большое влияние на отображение логотипа на дисплее. Лучше создавать большие блоки с четкой прорисовкой элементов - т.е. с большим значением font-size
Рисовать картинки в помощью векторной графики пока не умею.
Более сложный код векторной графики - иконка "предупреждение" представлен ниже. Это "традиционный" код svg - после тега
<path задается опорная точка отсчета
M и дальнейшее направление движения линии, используя математическое описание (прямая -
L,
H,V ; кривая Безье -
С, Q; дуга -
A), завершающим этапом будет возвращение к опорной точке с помощью команды
Z.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path d="M11.6,119H116c7.3,0,12-7.7,8.7-14.2L72.5,12.3c-3.6-7.2-13.9-7.2-17.5,0L2.8,104.8C-0.4,111.3,4.3,119,11.6,119z M72,97.5
c0,4.8-3.5,8.5-8.5,8.5s-8.5-3.7-8.5-8.5v-0.2c0-4.8,3.5-8.5,8.5-8.5s8.5,3.7,8.5,8.5V97.5z M58.9,35h9.8c2.7,0,4.3,2.3,4,5.2
l-4.3,37.6c-0.3,2.7-2.1,4.4-4.6,4.4s-4.3-1.7-4.6-4.4l-4.3-37.6C54.6,37.3,56.2,35,58.9,35z"/>
</svg>
Видно, что в коде три цепочки кода - начинается с M и заканчивается Z - т.е. нарисованы 3 фигуры: треугольник и трапеция с закругленными углами и круг.
Третий пример использования кода SVG - анимированные SVG (изображение крокодила с анимацией).
Здесь помимо цепочки кода svg задействованы javascript - при наведении курсора на крокодила открывается пасть.
{module 246}
Сама частица Logo универсальна и с помощью нее можно оформлять дизайн секции, заполнив соответствующие поля частицы нужным классом (его надо скопировать и подключить) - пример шаблон Aurora от Rockettheme использует этот прием
