CodeWatchers

Как безопасно использовать векторные изображения в WordPress

Rifat Divi Tutorials Nov 29, 2023

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

Как безопасно использовать векторные изображения в WordPress

В этом руководстве мы рассмотрим, как на самом деле реализовать SVG без ущерба для вашего веб-сайта.

Даже если у вас нет опыта проектирования, вы можете создавать профессиональные высококачественные векторные изображения, которые визуально поднимут ваш веб-сайт Divi на новый уровень.

Введение в SVG и его использование

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Вот некоторые ключевые варианты использования SVG в дизайне веб-сайтов:

  1. Адаптивная графика: изображения SVG не зависят от разрешения, что означает, что их можно масштабировать вверх или вниз без потери качества. Это делает их идеальными для адаптивного веб-дизайна, где контент подстраивается под разные размеры и разрешения экрана.
  2. Значки и логотипы. SVG обычно используется для значков, логотипов и других графических элементов на веб-сайтах. Поскольку файлы SVG имеют небольшой размер и их можно легко настроить и анимировать с помощью CSS и JavaScript, они являются популярным выбором для создания интерактивных и визуально привлекательных пользовательских интерфейсов.
  3. Дисплеи Retina и дисплеи с высоким разрешением. SVG идеально подходит для отображения четкой и четкой графики на экранах с высоким разрешением (точек на дюйм), таких как дисплеи Retina, где традиционные растровые изображения могут выглядеть пикселизированными при увеличении.
  4. Анимация: SVG позволяет создавать сложные анимации непосредственно в коде XML с помощью таких инструментов, как CSS-анимация или библиотеки JavaScript, такие как Snap.svg и GreenSock Animation Platform (GSAP). Это позволяет добавлять на веб-сайт динамические и интерактивные элементы.
  5. Доступность: изображения SVG легко доступны программам чтения с экрана и вспомогательным технологиям, поскольку базовая структура XML может быть аннотирована описательным текстом, что делает веб-сайты более инклюзивными и удобными для использования людьми с ограниченными возможностями.
  6. Преимущества SEO: поисковые системы могут анализировать и индексировать содержимое файлов SVG, что может улучшить поисковую оптимизацию (SEO), предоставляя больше контекста сканерам поисковых систем.
  7. Интерактивная визуализация данных: SVG можно использовать для создания интерактивных визуализаций данных, таких как диаграммы и графики, которые могут помочь эффективно передавать информацию на веб-сайте.

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

Способы безопасного использования векторных изображений в WordPress

В этой части мы рассмотрим два метода использования безопасного SVG в WordPress: вручную и с помощью плагинов. После этого вам будет представлен на выбор лучший вариант, отвечающий вашим потребностям. Начнем прямо сейчас!

Добавьте поддержку SVG вручную и очистите свой код

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

  1. Внесите изменения в файл function.php, чтобы включить поддержку SVG.
  2. Запретите нужным ролям пользователей загружать файлы SVG в WordPress.
  3. Прежде чем загружать какие-либо файлы SVG, очистите их все.

В целом, выполнить первый и второй шаги несложно. Первый шаг — подключиться к вашему веб-сайту с помощью протокола передачи файлов (FTP) и найти корневую папку WordPress. Найдите там свой файл function.php, откройте его и вставьте в него следующий код.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Благодаря этому вы можете загружать файлы SVG в WordPress и просматривать их в своей медиатеке, преследуя две цели. После добавления кода закройте файл function.php и сохраните изменения.

Теперь, когда нам нужно предотвратить повреждение людей, чьим загрузкам мы не доверяем, ситуация становится немного сложнее. Например, вы можете верить в то, что ваши редакторы и авторы загружают точные файлы, но не в своих участников. Здесь можно использовать два подхода:

  1. Установите уникальные роли пользователей для пользователей с ограниченным доступом или отсутствием доступа к медиатеке.
  2. Чтобы ограничить типы файлов, которые может загружать каждая роль пользователя, установите плагин, например WP Upload Restriction .

Это правда, что обе стратегии имеют недостатки, и это одна из причин, по которой ручная реализация SVG может оказаться сложной задачей. Но если вы выберете стратегию предотвращения вредоносной загрузки SVG, вам также необходимо убедиться, что вы случайно не используете ее.

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

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

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

плагин для Safe SVG. Вкратце, все трудности, о которых мы говорили ранее, решаются этим плагином, в том числе:

  1. Даем возможность загружать SVG.
  2. Проверка того, что ваши файлы SVG видны в медиатеке.
  3. Очистка исходного кода каждого загружаемого вами SVG, чтобы избежать недостатков безопасности. Этот плагин по своей сути работает по принципу «подключи и работай» и использует самый простой путь для обеспечения безопасности реализации SVG в WordPress. Мы советуем вам попробовать это, если вы полны решимости использовать SVG.

Анимация SVG с использованием CSS и плагинов

Если вы займетесь интеграцией SVG в WordPress, вы, несомненно, захотите максимизировать отдачу от инвестиций. Это означает, что при необходимости вам следует анимировать SVG-изображения с помощью CSS. Вы можете использовать два подхода, которые мы обсуждали ранее:

  • SVG можно анимировать вручную с помощью CSS, как и любой другой элемент.
  • Используйте такие программы, как SVGator, для создания и анимации SVG.

Если вы хотите попробовать что-то новое, добавление нескольких анимаций здесь и там может значительно улучшить взаимодействие с пользователем на вашем веб-сайте. Однако добавление видео или GIF-файлов для мобильных устройств было бы значительно хуже, чем использование SVG и CSS для достижения этой цели.

Заключение

Благодаря возможности создавать собственную векторную графику непосредственно в конструкторе Divi у вас есть мощный способ создавать иллюстрации и значки для вашего сайта без каких-либо навыков дизайна. Использование этой оригинальной графики может придать вашим страницам и публикациям более уникальную и персонализированную эстетику. Вы будете удивлены, насколько профессионально может выглядеть ваша векторная графика, сделанная своими руками!

Divi WordPress Theme