Як вставити svg зображення в joomla 6?

Вставлення SVG у Joomla має свої нюанси, оскільки з міркувань безпеки система за замовчуванням може блокувати завантаження SVG-файлів (через можливість вбудовування шкідливого JS-коду всередину XML).

Ось 3 основні способи, як це зробити, від найпростішого до професійного:

Спосіб 1: Через Медіа-менеджер (Налаштування)

Перш ніж завантажити .svg як звичайну картинку, потрібно дозволити цей формат у налаштуваннях Joomla.

  1. Перейдіть у Вміст (Content) -> Медіа (Media).
  2. Натисніть кнопку Налаштування (Options) у верхньому правому куті.
  3. У полі Дозволені розширення додайте svg (через кому).
  4. У полі Дозволені MIME-типи додайте image/svg+xml.
  5. Встановіть Перевірка MIME-типів у значення "Ні" (якщо виникають помилки при завантаженні).

Тепер ви можете завантажувати SVG через стандартну кнопку "Зображення" в редакторі.

Спосіб 2: Пряме вбудовування коду (Inline SVG)

Це найкращий спосіб для іконок (телефон, евакуатор, 24/7) у шаблоні, оскільки він дозволяє змінювати колір іконки через CSS.

Відкрийте свій SVG-файл у блокноті, скопіюйте код (тег <svg>...</svg>) і вставте його прямо в PHP-файл, наприклад, у файл вашого шаблону (index.php):

<div class="icon-wrapper">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 12h3v8h14v-8h3L12 2z" fill="currentColor"/> </svg>
</div>

Перевага: Ви можете написати в CSS: .icon-wrapper svg { fill: #ff0000; }, і іконка стане червоною.

Спосіб 3: Через PHP у шаблоні (API Joomla)

Оскільки ти вже працюєш з PHP у Joomla 6, можна використовувати HTMLHelper, щоб вивести SVG як файл.

<?php
use Joomla\CMS\HTML\HTMLHelper;
// Виведе тег <img src="/media/templates/site/your_tpl/images/logo-icon.svg" ...>
echo HTMLHelper::_('image', 'logo-icon.svg', 'My alt', ['class' => 'my-logo'], true);
?>

Важливі поради для сайту:

  • Очищення (Sanitization): Перед завантаженням SVG на сайт обов'язково пропустіть його через сервіс SVGOMG. Це видалить зайве сміття з коду та зменшить вагу файлу (важливо для мобільного інтернету на трасі).
  • Розміри: Завжди вказуйте атрибути width та height або налаштовуйте їх через CSS. Якщо цього не зробити, SVG може "розтягнутися" на весь екран під час завантаження сторінки або не відображатись бо розмір зображення 0px*0px.