Добавление 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:” Если на вашем ПК его нет, то можно его создать самому:
Вот содержание этого файла по умолчанию:


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

Генератор keysplines


Атрибут keySplines определяет набор контрольных точек Безье, связанных со списком keyTimes, определяя кубическую функцию Безье, управляющую временным интервалом.
От формы кривой Безье зависит неравномерность движения внутри временного интервала. Один и тот же путь может быть пройден с разными скоростями в начале, середине или в конце пути.
Перетаскивайте мышкой красные контрольные точки и наблюдайте в правом окне график скорости.
Далее копируйте цифры в атрибут keySplines 0.06 0.925 0.205 0.88

В первом примере движение бордового шарика начинается очень быстро и медленно заканчивается

grafic












Во втором примере движение бордового шарика начинается очень медленно и быстро заканчивается

wisely-slow

Сравните движение бордового шарика с движением синего шарика движущегося с линейной скоростью.










⇚ Безье второго порядка

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

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

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

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

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

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

Генератор эллипсов



Для получения необходимых размеров эллипса и расположения центра эллипса, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.


Автор: Peter Collingridge

Update В формуле из генератора эллипсов необходимо заменить circle на ellipse

Примеры анимации эллипсов

Начальная фигура, которую будем анимировать


Изменение атрибута эллипсаrx

Изменение атрибута эллипсаry

Другие примеры анимации здесь

⇚ Генератор окружностей
Следующая ⇛  Кубическая кривая Безье

Генератор окружностей



Для получения нужного диаметра окружности и расположения центра окружности, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.


Автор: Peter Collingridge

Пример стилизации трех окружностей

При каждом изменении параметров копируем формулу svg окружности в отдельный файл и добавляем заполнение цветом кругов.

Более подробно о параметрах окружностей здесь.

Пример анимации кругов

Анимация последовательного перемещения кругов из левого положения вправо и обратно.
Команды перемещения первой окружности вправо и назад:

где values=”50;350″ горизонтальные координаты начального и конечного положения центра окружности.

Ниже полный код анимации перемещения окружностей

Начало анимации по клику мышки на жёлтом круге.

⇚ Генератор прямоугольников
Следующая ⇛  Генератор эллипсов