Диагностика и отладка приложений SVG

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

Анимация семейства улиток

Анимация семейства улиток

Для создания анимации необходимо нарисовать или найти подходящий файл SVG с главным персонажем анимации – улиткой.
Будет по возможности сделана комплексная анимация: тела улитки, анимация усиков, глаз и рта улитки. Улиток будет несколько: мама улитка и детеныши. Всё семейство будет двигаться по листику травы слева направо.

Продолжить чтение

Анимация маршрутов самолётов на растровой карте

Маршруты полётов

Карты всего мира, карты отдельной страны, в растровом формате довольно легко найти, чего не скажешь об аналогичных картах в формате SVG.
Поэтому, в этой статье я попытаюсь совместить SVG анимацию маршрутов полета самолетов на растровой карте. Ключевая особенность этой статьи,- применение Unicode самолёта в качестве объектов анимации.
Продолжить чтение

Анимация рисования линии

icon Lion-break

В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.
Продолжить чтение

Определение центра вращения фигур

  1. Вычисление длины одной из сторон правильного многоугольника
  2. Вычисление центра вращения шестиугольника
  3. Вычисление центра вращения пятиугольника
  4. Определение радиусов вписанной и описанной окружностей
  5. Определение координат центра вращения пятиугольника
  6. Примеры анимации правильных многоугольников
  7. Таблица для вычисления параметров правильных многоугольнико

Для осуществления анимационных эффектов, связанных с вращением, увеличением фигур из центра, необходимо точно знать координаты центра вращения, а так же, в некоторых случаях, и длину периметра фигур. Рассмотрим правильные многоугольники: пятиугольник, шестиугольник, восьмиугольник и т.д. Ниже приведен пример шестиугольника, но все параметры, расчетные формулы одинаковы для любого правильного многоугольника, меняется только “n”
Вычисление центра вращения
С – длина стороны многоугольника
n – число сторон
R – радиус описанной окружности
r – радиус вписанной окружности
Формулы расчета:
C = 2*R*sin(180°/n) = 2*r*tg(180°/n)
R = (c/2)/sin(180°/n) = r/cos(180°/n)
r = (c/2)*ctg(180°/n) = R*cos(180°/n)

Для вычисления центра вращения нужно, как-то определить заранее, хоть один параметр, например – длину стороны многоугольника – “C”.
Это можно сделать несколькими способами:

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

Для этого используем содержимое команды – path

Вычисление центра вращенияПервая группа цифр после команды M (moveto) – M48.9 60.9 определяет координаты начальной (зеленой) точки стороны многоугольника. Вторая группа цифр – координаты конечной (синей) точки – 16.9 60.9 Вычисляем длину горизонтальной стороны многоугольника –
C = 48.9 – 16.9 = 32px
Вычисляем радиус описанной окружности шестиугольника:
R = (c/2)/sin(180°/n), где n=6
R = 16/sin(30°) = 32px
для шестиугольника – R = C

Вычисление центра вращения шестиугольника
Радиус вписанной окружности: r = R*cos(180°/n) = 32*cos(30°) = 27.71px

Для определения центра вращения шестиугольника необходимо расчитать параметры Cx, Cy.
Cx = 16.9 + С/2 = 32.9;
Cy = 60.9 – r = 60.9 – 27.71 = 33.19px;

Проверяем:

Вычисление центра вращения пятиугольника

Открываем файл *.svg, созданный в векторном редакторе и находим строку кода, рисующую пятиугольник.

Начальная точка (зелёная) отрисовки пятиугольника имеет координаты – M38.8 31.3, далее по часовой стрелке, следующая вершина пятиугольника – 69.4 53.6

Вычисление центра пятиугольника Как и в примере с шестиугольником, легче всего вычислить длину горизонтальной стороны многоугольника (зелёная и жёлтая точки) – С = 57,6 – 19,7 = 37,9
Но это частный случай, когда сторона многоугольника паралелльна одной из осей ординат. В большинстве случаев сторона многоугольника идет под углом к осям ординат. Вычислим длину наклонной стороны, используя теорему Пифагора – с2 = a2 + b2 На рисунке это треугольник с жёлтыми точками на вершинах. Так как начало координат (0,0) полотна SVG находится в левом верхнем углу, поэтому

a = 89.5 – 53.6 = 35.9 – из нижней точки вычитаются координаты “y” верхней точки

b = 69.4 – 57.6 = 11.8 – вычитаются координаты “x” двух вершин треугольника
c = √ 35.92 + 11.82   = 37.78

Определение радиусов вписанной и описанной окружностей по формулам из таблицы ниже

R = 0,851*C = 32.16px – радиус описанной вокруг пятиугольника окружности
r = 0688*C =26.0px – радиус вписанной в пятиугольник окружности

Определение координат центра вращения пятиугольника

Cx = 19.7 + C/2 = 19.7 +18.9 = 38.6px
Cy = 31.3 + R = 31.3 + 32.16 = 63.46px
Проверяем вычисленные центры вращения для пятиугольника и шестиугольника. Анимация начинается при наведении курсора мышки.
Первая и вторая картинка вращаются пока наведен курсор мышки. Третья картинка – увеличение. Четвертая – вращение и одновременное увеличение размеров изображения.

pentagon rotate
hexagon rotate
pentagon rotate
hexagon rotate
Таблица для вычисления параметров правильных многоугольников

n (число сторон)
c (сторона многоугольника)
R (радиус описанной окружности)
r (радиус вписанной окружности)
S (площадь многоугольника)
3
1,772*R 3,464*r 0,577*c 2,000*r 0,289*c 0,500*R 0,433*c2 1,299*R2 5,196*r2
4
1,414*R 2,000*r 0,707*c 1,414*r 0,500*c 0,707*R 1,000*c2 2,000*R2 4,000*r2
5
1,176*R 1,453*r 0,851*c 1,236*r 0,688*c 0,809*R 1,721*c2 2,378*R2 3,633*r2
6
1,000*R 1,155*r 1,000*c 1,155*r 0,866*c 0,866*R 2,598*c2 2,598*R2 3,464*r2
7
0,868*R 0,963*r 1,152*c 1,110*r 1,038*c 0,901*R 3,635*c2 2,736*R2 3,371*r2
8
0,765*R 0,828*r 1,307*c 1,082*r 1,207*c 0,924*R 4,828*c2 2,828*R2 3,314*r2
9
0,684*R 0,728*r 1,452*c 1,064*r 1,374*c 0,940*R 6,182*c2 2,893*R2 3,276*r2
10
0,618*R 0,650*r 1,618*c 1,052*r 1,539*c 0,951*R 7,694*c2 2,939*R2 3,249*r2
11
0,564*R 0,587*r 1,775*c 1,042*r 1,703*c 0,960*R 9,364*c2 2,974*R2 3,230*r2
12
0,518*R 0,536*r 1,932*c 1,035*r 1,866*c 0,966*R 11,196*c2 3,000*R2 3,215*r2
16
0,390*R 0,398*r 2,563*c 1,020*r 2,514*c 0,981*R 20,109*c2 3,062*R2 3,183*r2
20
0,313*R 0,317*r 3,196*c 1,013*r 3,157*c 0,988*R 31,569*c2 3,090*R2 3,168*r2
24
0,261*R 0,263*r 3,831*c 1,009*r 3,798*c 0,991*R 45,575*c2 3,106*R2 3,160*r2
32
0,196*R 0,197*r 5,101*c 1,005*r 5,077*c 0,995*R 81,225*c2 3,121*R2 3,152*r2
48
0,131*R 0,131*r 7,645*c 1,002*r 7,629*c 0,998*R 183,08*c2 3,133*R2 3,146*r2
64
0,098*R 0,098*r 10,190*c 1,001*r 10,178*c 0,999*R 325,69*c2 3,137*R2 3,144*r2


Расчетные данные взяты – здесь
⇚ Масштабирование векторных изображений
Позиционирование иконок SVG ⇛
Примеры анимация многоугольников ⇛

Позиционирование иконок SVG

  1. Позиционирование иконок в одиночном файле SVG
  2. Позиционирование иконок с помощью ‘viewBox’
  3. Позиционирование нескольких иконок с помощью ‘preserveAspectRatio’
  4. Позиционирование иконок с помощью min-x, min-y ‘viewBox’
  5. Позиционирование изменением параметров команды ‘use’

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

Позиционирование иконок в одиночном файле SVG

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

image description

Возьмем иконку с размерами 48x48px, и добавим её внутрь Html страницы, таким образом, чтобы текст обтекал её слева. Ниже код иконки.

Пример размещения иконки внутри Html.

combo_chartx2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere non enim vitae tincidunt. Quisque eleifend, lectus a rhoncus cursus, libero risus condimentum ipsum, vitae finibus dolor metus eget turpis. Mauris vitae elementum sem. Aliquam urna ligula, pretium eu lorem non, dapibus dignissim lorem. Integer tempor tempus ex, a egestas lectus condimentum sed. Suspendisse tellus sem, placerat ac malesuada sed, tincidunt.
———————————————————————————————————————-
Результат не радует – получились огромные отступы текста справа и снизу. Чтобы понять причину этого, добавим красную рамку, которая показывает истинный размер ‘viewport’ – области просмотра SVG файла.

Сразу стало видно, что ‘viewport’ занимает в два раза больше места, чем иконка, именно из-за этого образуются большие отступы текста от иконки.
Для уменьшения отступов, нужно уменьшить размеры ‘viewport’.
У нас был масштаб – viewport / viewBox = 96/96 – M1:1.
Чтобы избежать искажения графики оставляем масштаб 1:1, но при этом уменьшаем размеры ‘вьюпорта’ и ‘вьюбокса’ – viewport / viewBox = 48/48 – M1:1.

image description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere non enim vitae tincidunt. Quisque eleifend, lectus a rhoncus cursus, libero risus condimentum ipsum, vitae finibus dolor metus eget turpis. Mauris vitae elementum sem. Aliquam urna ligula, pretium eu lorem non, dapibus dignissim lorem. Integer tempor tempus ex, a egestas lectus condimentum sed. Suspendisse tellus sem, placerat ac malesuada sed, tincidunt.
———————————————————————————————————————–
Размер иконки остался тот же, отступы текста сократились вдвое.

Позиционирование иконок с помощью ‘viewBox’

Этот способ позиционирования является наиболее простым и понятным. Он может быть использован на практике, если отступы от векторного объекта до краев области просмотра не критичны для вёрстки страницы.

letter-ed

Центрирование по горизонтали.
Возьмем иконку с геометрическими размерами 100×100 px и поместим её в прямоугольную область просмотра ‘viewport’ с шириной width =”200″ и высотой height=”100″ пикселей.

Здесь красная рамка показывает границы ‘viewport’ – области просмотра.
Так как ширина ‘viewport’ – больше в два раза ширины ‘viewBox’ мы ожидаем, что иконка должна растянуться по оси х-ов в два раза.

preserve-none

Но, на самом деле, растягивание изображения до границ ‘viewport’ не происходит, так как не указан атрибут – preserveAspectRatio отвечающий за пропорциональность трансформации. В этом случае его значение по умолчанию равно – preserveAspectRatio=”xMidYMid meet”, что соответствует центрированию изображения по осям “X” и “Y”
Чтобы получить растягивание изображения, как на картинке выше, значение этого параметра должно быть – preserveAspectRatio=”none”.
Далее примеры использования ‘preserveAspectRatio’ для различного позиционирования SVG иконки.

preserve-none

preserve-none

preserve-none

Центрирование по вертикали.

Для этого назначим ‘viewport’ высотой 200px и шириной 100px
и атрибут – preserveAspectRatio=”xMidYMid meet”

preserve-none

Позиционирование с помощью ‘preserveAspectRatio’ возможно лишь в случае присутствия ‘viewBox’. В противном случае ‘preserveAspectRatio’ – игнорируется.

Позиционирование нескольких иконок с помощью ‘preserveAspectRatio’

На ум сразу приходит решение этой задачи – использовать ‘preserveAspectRatio’. Одну иконку направить влево – ‘xMinYMin’, вторую разместить по центру – ‘xMidYMid’, третью вправо – ‘xMaxYMax’. Каждую иконку обернуть в свой ‘symbol’, так как у него есть свой ‘viewBox’ и ‘preserveAspectRatio’. Структура в примере ниже:

Не сработало.
Все три иконки собираются одна под другой в центре ‘viewport’. Это результат доминирующего действия ‘preserveAspectRatio’ в шапке файла SVG. И всё, что указано ниже в ‘symbol’ – игнорируется.
Как нейтрализовать действие ‘preserveAspectRatio’ в шапке файла и дать возможность этой же команде внутри ‘symbol’ позиционировать самостоятельно?
Попробовать убрать его в шапке файла, но по умолчанию будет всё равно центрирование – preserveAspectRatio=”xMidYmid meet”.
Присвоить ему значение – preserveAspectRatio=”none”? – Тогда верхняя иконка растянется на всю ширину ‘viewport’a.

Решение есть – убрать ‘viewBox’ из шапки файла и тогда ‘preserveAspectRatio’ в шапке будет проигнорировано и сработают команды в ‘symbol’
preserve-none

Недостаток этого метода в малом количестве иконок, которые можно позиционировать – от одной до трёх.


preserve-none

Достоинство метода – блок иконок добавляется в Html, как один объект и то, что находится внутри его не влияет на разметку страницы.
Блок иконок легко может быть преобразован из горизонтального в вертикальный путем изменения ширины и высоты ‘viewport’ в шапке файла – width=”100″ height=”310″

Позиционирование иконок с помощью min-x, min-y ‘viewBox’

У ‘viewBox’ всё наоборот – уменьшение сторон ведет к увеличению масштаба изображения. Перемещение центра координат вправо, смещает изображение влево. Подробнее здесь.
Давайте используем это свойство смещения векторных изображений, путём изменения начала координат ‘viewBox’а, для еще одного способа позиционирования иконок.
Допустим нам надо в одном файле svg разместить по горизонтали 5 иконок. Размер каждой иконки – 126х126 px.
Расширяем ‘viewport’ по горизонтали до width=”630″, высоту оставляем прежней – height=”126″. Собираем в одном файле все иконки и оборачиваем код каждой в свой ‘symbol’ с уникальным ‘id’ . Изменением параметра ‘min-x’ (первая цифра ‘viewBox’) позиционируем каждую иконку.

Положительное значение ‘min-x’ сдвигает иконку влево. Отрицательное значение – вправо.

Ниже структура файла SVG с пятью иконками. Обратите внимание, что у ‘viewBox’ов внутри ‘symbol’ изменяется только первая цифра, отвечающая за положение начала координат по оси абцисс.

viewBox-icons

Данный метод позволяет поместить в один файл сколько угодно векторных изображений, но более удобно позиционировать нечётное количество векторных объектов, так как средняя иконка позиционируется автоматически. Файл SVG можно встроить в Html несколькими способами. В данной статье svg добавляется, как изображение <img> с фолбэк’ом от David Bushell для браузеров не поддерживающих SVG

Обратите внимание, что при выводе изображения SVG заданы его размеры. Очень удобно, можно одновременно изменять масштаб всех иконок в блоке.
Необходимо только следить за пропорциями: было – width=”600″ height=”126″
стало – width=”300″ height=”63″ и третий вариант width=”150″ height=”31″

preserve-none
preserve-none

Позиционирование изменением параметров команды ‘use’

Команда ‘use’ создает прямоугольную область с началом координат – x=”0″ y=”0″ и служит для вывода изображений. Ширина и высота этой области, если не указаны другие значения, равны ширине и высоте ‘viewport’.

В отличии от ‘viewBox’ сдвиг вправо начала координат ‘use’ сдвигает векторное изображенгие вправо.

Последовательность позиционирования иконок по горизонтали следующая:
Расширяем ‘viewport’ в шапке файла, чтобы хватило места для всех иконок. Высоту ‘viewport’ – назначаем равной высоте иконок.
‘viewBox’, если он есть в шапке файла удаляем. Это для того, чтобы исключить воздействие – ‘preserveAspectRatio’
Код каждой иконки оборачиваем в’symbol’, присваиваем ему ‘id’

Далее позиционируем иконки по горизонтали, изменяя значения – x=”…”. Обратите внимание, что можно менять иконки местами внутри блока SVG.

viewBox-icons-use
Можно менять и сами иконки и их стилевое оформление, но это тема отдельной статьи.
viewBox-icons-use

⇚ Масштабирование векторных изображений