club762.ruЕсли вы попробуете закачать SVG в WordPress, вы обнаружите, что родной поддержки по добавлению их в медиа-библиотеку WordPress нет. Однако можно легко добавить их к разрешенным mime-типам в WordPress с помощью плагина, чтобы обойти это ограничение.
Многие пользователи желают использовать SVG, к примеру, для логотипов, поскольку они имеют многочисленные преимущества перед традиционной графикой. SVG-файлы могут масштабироваться в любой размер без потери качества, т.е. они будут прекрасно выглядеть на Retina-дисплеях. К ним можно применять разные CSS-стили для добавления многочисленных цветов, градиентов, фильтров и т.д.
SVG Spritemap – относительно новый плагин, который позволяет загружать SVG в медиа-библиотеку. Также плагин добавляет возможность создания и управления SVG спрайтами, которые позволяют вам выводить и настраивать изображения поодиночке, в то время как они будут преобразованы в один большой файл для снижения количества HTTP-запросов.
После того как вы установите плагин, вы найдете меню SVG Spritemap в меню Media. Вы не сможете создать спрайт, пока вы не загрузите несколько SVG.
Используйте следующие инструкции для создания спрайтов:
- Установите и активируйте плагин.
- Добавьте SVG изображения в медиа-загрузчик.
- Выберите SVG для спрайтов в разделе Параметры — Медиа — SVG Spritemap.
Вы можете добавлять SVG в медиа-библиотеку точно так же, как и любые другие файлы, и они будут выводиться аналогично остальным изображениям. Я добавил несколько файлов с Flaticon.com в качестве примера:
Перейдите обратно к SVG Spritemap, и вы увидите все ваши доступные SVG-изображения. Щелкните по изображениям, которые вы хотите добавить в новый спрайт.
Щелкните по Update SVG Spritemap для добавления выбранных вами изображений. Эти файлы теперь будут показаны как «In Use». Спрайт defs.svg автоматически будет сгенерирован плагином.
Ниже вы увидите URL, выведенный для SVG-спрайта, наряду с примерным размером файла, который представляет собой суммарный размер всех SVG-изображений. Здесь не учитывается gzip-сжатие, поэтому реальный размер файла будет гораздо меньше, чем предполагаемый.
Вы можете обращаться к отдельным спрайтам путем добавления «#:», а также названия спрайта к следующему URL:
<svg><use xlink:href="http://www.test.dev/wp-content/plugins/svg-spritemap/defs.svg#:bunny"></svg>
Теперь вы можете вывести ваши SVG во фронтэнде и настроить их с помощью CSS:
Поддержка SVG браузерами
Перед использованием SVG Spritemap вы должны знать, что IE8 не поддерживает вывод внешних SVG, однако все другие крупные браузеры поддерживают SVG. Возможно, что это вам и не важно. Джонатан Нил, автор плагина, нашел способ обойти это ограничение, создав проект SVG for Everybody, который добавляет к браузерам специальную поддержку вывода внешних SVG спрайтов.
Если вам требуется найти простой способ добавления SVG в WordPress и создания своих SVG спрайтов, этот плагин предложит вам прекрасный интерфейс для автоматической их генерации. После тестирования я могу сказать, что он работает так, как и задумано. Скачать плагин SVG Spritemap бесплатно вы можете с сайта WordPress.org.
Дмитрий, привет! Спасибо за статью! Не силён в этой области. Я пытаюсь подцепить svg через css стороннего ресурса. И вроде всё получается: иконка отображается. Но, у меня не получается ёё закрасить в нужный цвет, точнее в IE она закрашивается, а вот в FF и GH — нет. Я куда только не пихал стиль — не получается. Может есть решение, где копать?
У SVG свои собственные стилевые правила. Вместо background-color используется fill. Чтобы поменять цвет CSS, можно, к примеру, задать стили:
.kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }Взял пример отсюда: http://css-tricks.com/using-svg/
Дмитрий, спасибо! Не сработало, у IE тоже. Что я делаю:
1. в шапку вставляю ссылку:
2. в футере вставляю:
3. в style.css темы прописываю:
.heart {
color: #FF3B30;
}
4. Проверяю: картинка отображается во всех браузерах, в IE подкрашивается, в FF и GH — нет. Сменил «color:» на «fill:» — не помогло.
А если прямо у элемента попробовать задать инлайн-стили? Прямо у элемента прописать style=»fill:» или color, сработает?
Дмитрий, спасибо! Сработало(!):
, в «fill:» не сработал.
Вообщем, проблема оказалось в том, что: в какое место кода в файле style.css впихнуть стиль… я так и не понял… придётся задать явно.
Лучше всего в самый низ CSS вставлять. А то там могут переопределяться стили.
не пользовался раньше SVG-спрайтами, надо попробовать, правда где лучше применить не знаю