Добавление SVG MIME Types image/svg+xml

Указание MIME-типа image/svg+xml необходимо в HTML при передаче данных с помощью файлов *.svg и вставки на страницу различных объектов SVG.

  • Для WordPress можно установить плагин, который всё сделает за вас.
  • Если плагин не помог или не хочется использовать плагины, то можно добавить MIME type в ручную:
1. Добавляете в файл functions.php

Откройте ваш functions.php и добавьте следующий код:

Вы должны заменить wpcontent_ своим собственным пространством имен. Эта функция просто добавляет SVG и SVGZ (сжатый SVG) к разрешенным типам загружаемых файлов в WordPress и подключается к функции WordPress upload_mimes().

2. Добавление SVG Mime Types в .htaccess

Откройте ваш корневой файл .htaccess и добавьте следующее после строки: #End WordPress.

Сохраните файл, и все готово! Теперь вы можете сохранять SVG из Illustrator или Inkscape и использовать их на своем сайте WordPress.

Файл .htaccess обычно расположен в корне диска “C:” Если на вашем ПК его нет, то можно его создать самому:
Вот содержание этого файла по умолчанию:


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

Диагностика и отладка приложений 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 ⇛
Примеры анимация многоугольников ⇛