SVG Support

Safely upload SVG files to your media library and use them like any other image. Now with optional sanitization!

But SVG Support has more features!!! Read on to learn more.

When using SVG images on your WordPress site, it can be hard to style elements within the SVG using CSS. Now you can, easily!

Scalable Vector Graphics (SVG) are becoming common place in modern web design, allowing you to embed images with small file sizes that are scalable to any visual size without loss of quality.

This plugin not only provides SVG Support like the name says, it also allows you to easily embed your full SVG file’s code using a simple IMG tag.

By adding the class "style-svg" to your IMG elements (or outer containers), this plugin dynamically replaces any IMG elements containing an SVG in the src that are found inside the target class with your complete SVG code, rendering it inline.

The main purpose of this is to allow styling and animation of your SVG elements. Usually your styling options are restricted when using embed, object or img tags alone.

Возможности

• Поддержка SVG для Вашей медиабиблиотеки
• Sanitize SVG uploads
• Minify SVG files
• Строчный вид кода SVG
• Изменяйте элементы SVG используя CSS
• Анимируй SVG элементы используя CSS и JsS
• Очень простая страница настроек с инструкциями
• Restrict SVG upload ability to Administrators only
• Set custom target class (can be used on outer elements as of 2.4)
• Extremely Simple To Use — Simplifies complex usage of SVG files

Использвание

Сперва установите и активируйте плагин Поддержка SVG (этот плагин).

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

As an administrator, you can go to the admin settings page «Settings > SVG Support» and restrict SVG file uploads to administrators only.

Если Вам нужно загружать SVG файлы и использовать их только как изображения, то Вам не нужно включать «Расширенный режим». В этом случае неиспользуемые скрипты не будут подключаться и настройки будут скрыты.

Для продвинутых: Включите «Продвинутый режим» в Настройки > Поддержка SVG.

Now you can enable santization and/or minification of your SVG uploads, define a custom CSS class to target and fiddle with some other settings.

При включенном расширенном режиме, Вы можете настроить встраивание SVG изображений также как и обычные изображения с добавлением (в текстовом виде) класса "style-svg" (или любого другого Вашего класса) в Ваши теги IMG, если вы хотите, чтобы плагин заменил ваше изображение на подходящий SVG код.

Например:

или

The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable. This allows you to target elements within your SVG using CSS and JS.

Вы можете удалить все атрибуты из тега IMG, так как они в любом случае исчезнут.

Additionally, you can now add the target class to outer elements if you’re unable to add it directly to the IMG itself. This plugin will traverse the children looking for your SVG to replace with the inline code.

There’s a setting to automatically add your class to the IMG tag for you when you’re inserting SVG’s in to a post or page, which also removes unnecessary tags.

Since 2.3.11, you can force all SVG files sitewide to be rendered inline with a single checkbox (use with caution). Additionally, you can now choose whether to use the minified or expanded version of the JS file.

Избранные изображения: Если пост/страница сохранена с Вашим избранным изображением в формате SVG, то во вкладке избранного изображения будет опция для отображения этого SVG — строчным (только если активен расширенный режим).

На заметку: если Ваше SVG изображение не видно, то возможно оно отображается с нулевой высотой и шириной. Для корректного отображения Вам нужно задать свою высоту и ширину SVG изображению с помощью CSS.

If you’re having any issues, please use the support tab and I will try my best to get back to you quickly

Spin up a test site

With a single click, you can spin up a completely free test site to test SVG Support using TasteWP! No sign up, no cards, nothing! How cool is that? Give it a go: Click Here to spin up a test site in seconds

Безопасность

As with allowing uploads of any files, there is potential risks involved. So I have added some features to help!

• Optional sanitization to help strip any malicious code form your SVG files upon upload.
• Restrict uploads to admin only.

Разрешайте пользователям загружать SVG-файлы только в том случае, если вы им доверяете. У вас есть возможность ограничить использование SVG только администраторами на странице настроек, а также включить очистку SVG, чтобы попытаться очищать все загружаемые файлы SVG.

По умолчанию любой, у кого есть доступ к медиатеке или права на загрузку, сможет загружать SVG-файлы (то есть администраторы, авторы и редакторы). Обратите внимание, что файлы SVG на самом деле являются XML, что теоретически позволяет злоумышленникам внедрять вредоносный код. Будьте осторожны с этим.

Отзывы

Я открыл для Вас отзывы и предложения — Спасибо за использование SVG Support!

Читайте @SVGSupport на Twitter Читайте @benbodhi на Twitter

Note: I hope you like this plugin! Please take a moment to rate it.

Переводы

Вы можете помочь с переводом тут. Ещё не переводили WordPress? Тогда прочитайте Translator Handbook и приступайте 🙂