Работа с векторной графикой SVG в современных веб‑приложениях: загрузка, обработка и безопасность

Жизненный цикл временного файла SVG:

1. Upload: Клиент отправляет POST с FormData.
2. Server Receive: Веб-сервер (Nginx/Apache) + PHP-FPM пишут байты во временный файл (например, /tmp/phpA1b2C3).
3. Validation: Скрипт проверяет $_FILES['svg']['error'], MIME-тип, размер, содержимое XML.
4. Sanitization: Очистка SVG от скриптов, внешних сущностей, небезопасных тегов.
5. Move/Rename: move_uploaded_file($tmpName, $permanentPath).
6. Response: Возврат JSON с URL нового файла или ID в БД.

Клиентская часть: FormData, Fetch и jQuery

Современный стандарт — Fetch API и FormData. jQuery (ajaxForm/Form Plugin) все еще встречается в легаси, но требует отключения обработки данных.

Вариант А: Нативный Fetch (Рекомендуется в 2026 году)

async function uploadSvg(fileInput) {
 const file = fileInput.files[0];
 if (!file || file.type !== 'image/svg+xml') {
 throw new Error('Требуется файл формата SVG');
 }
 const formData = new FormData;
 formData.append('svg_file', file); // 'svg_file' — ключ для $_FILES

 try {
 const response = await fetch('/api/upload/svg', {
 method: 'POST',
 body: formData,
 // Заголовок Content-Type: multipart/form-data; boundary=... ставится браузером АВТОМАТИЧЕСКИ
 // НЕ УСТАНАВЛИВАЙТЕ ЕГО ВРУЧНУЮ!
 credentials: 'same-origin' // для CSRF-токенов в куках
 });

 const result = await response.json;
 if (!response.ok) throw new Error(result.message || 'Ошибка сервера');
 return result; // { success: true, url: '/uploads/abc123.svg' }
 } catch (err) {
 console.error('Upload failed:', err);
 throw err;
 }
}

Вариант Б: jQuery (для поддержки старых проектов)

Основная ошибка новичка, забыть processData: false и contentType: false.

$('#svg-form').on('submit', function(e) {
 e.preventDefault;
 const formData = new FormData(this); // this = form element
 $.ajax({
 url: '/api/upload/svg',
 type: 'POST',
 data: formData,
 processData: false, // Не превращать FormData в строку
 contentType: false, // Дать браузеру выставить boundary
 dataType: 'json',
 success: function(res) { console.log('Saved:', res.url); },
 error: function(xhr) { alert('Error: ' + xhr.responseJSON.message); }
 });
});

Обработка ошибок загрузки (коды $_FILES['error'])

На клиенте и сервере нужно обрабатывать стандартные коды ошибок PHP:

• 1 (UPLOAD_ERR_INI_SIZE): Превышен upload_max_filesize в php.ini.
• 2 (UPLOAD_ERR_FORM_SIZE): Превышен MAX_FILE_SIZE в форме (редко используется).
• 3 (UPLOAD_ERR_PARTIAL): Файл загружен частично (обрыв связи).
• 4 (UPLOAD_ERR_NO_FILE): Файл не выбран.
• 6 (UPLOAD_ERR_NO_TMP_DIR): Критично: Отсутствует временная директория. Проверьте upload_tmp_dir и права доступа.
• 7 (UPLOAD_ERR_CANT_WRITE): Ошибка записи на диск (нет места/прав).
• 8 (UPLOAD_ERR_EXTENSION): Остановлено расширением PHP.

Серверная часть (PHP): работа с $_FILES и временными путями

Ниже приведен надежный скелет обработчика /api/upload/svg.

<?php
// upload_svg.php
header('Content-Type: application/json');

$response = ['success' => false, 'message' => '', 'url' => ''];

try {
 // 1. Проверка метода и наличия файла
 if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
 throw new Exception('Недопустимый метод запроса');
 }
 if (empty($_FILES['svg_file']) || !is_array($_FILES['svg_file'])) {
 throw new Exception('Файл не передан');
 }

 $file = $_FILES['svg_file'];

 // 2. Проверка кодов ошибок загрузки
 if ($file['error'] !== UPLOAD_ERR_OK) {
 $errors = [
 UPLOAD_ERR_INI_SIZE => 'Превышен максимальный размер файла (php.ini)',
 UPLOAD_ERR_FORM_SIZE => 'Превышен максимальный размер файла (форма)',
 UPLOAD_ERR_PARTIAL => 'Файл загружен частично',
 UPLOAD_ERR_NO_FILE => 'Файл не выбран',
 UPLOAD_ERR_NO_TMP_DIR => 'Отсутствует временная папка (настройте upload_tmp_dir)',
 UPLOAD_ERR_CANT_WRITE => 'Ошибка записи файла на диск',
 UPLOAD_ERR_EXTENSION => 'Загрузка остановлена расширением',
 ];
 throw new Exception($errors[$file['error']] ?? 'Неизвестная ошибка загрузки');
 }

 // 3. ВАЛИДАЦИЯ ВРЕМЕННОГО ФАЙЛА (Самый важный этап для SVG)
 $tmpPath = $file['tmp_name'];
 
 // Проверка MIME типа (не доверяем $_FILES['type']!)
 $finfo = new finfo(FILEINFO_MIME_TYPE);
 $mime = $finfo->file($tmpPath);
 if ($mime !== 'image/svg+xml') {
 throw new Exception('Недопустимый тип файла: ' . $mime . '. Требуется image/svg+xml');
 }

 // Проверка размера (доп. защита)
 if ($file['size'] > 2 * 1024 * 1024) { // 2MB лимит для SVG
 throw new Exception('Файл слишком велик (макс 2MB)');
 }

 // 4. САНИТИЗАЦИЯ SVG (см. раздел 4)
 $svgContent = file_get_contents($tmpPath);
 $cleanSvg = sanitizeSvg($svgContent); // Реализация ниже
 if ($cleanSvg === false) {
 throw new Exception('SVG не прошел проверку безопасности');
 }

 // 5. ПЕРЕМЕЩЕНИЕ ВЫЗВОЛЯЕТ ИЗ ВРЕМЕННОЙ ПАПКИ
 $uploadDir = __DIR__ . '/../public/uploads/svg/';
 if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);

 // Генерируем безопасное имя
 $ext = '.svg';
 $newName = bin2hex(random_bytes(16)) . $ext;
 $destPath = $uploadDir . $newName;

 // Записываем ОЧИЩЕННЫЙ контент, а не просто move_uploaded_file
 // Это гарантирует, что на диске лежит безопасный файл
 if (file_put_contents($destPath, $cleanSvg) === false) {
 throw new Exception('Не удалось сохранить файл');
 }

 // Права на файл (опционально)
 chmod($destPath, 0644);

 // 6. УСПЕХ
 $response['success'] = true;
 $response['url'] = '/uploads/svg/' . $newName;
 $response['message'] = 'Файл успешно загружен';

} catch (Exception $e) {
 $response['message'] = $e->getMessage;
 http_response_code(400);
}

echo json_encode($response);

Критически важная безопасность: валидация и санитизация SVG

Никогда не доверяйте загруженному SVG. Поскольку SVG — это XML, он может содержать:

• XXE (XML External Entity): Чтение локальных файлов сервера (/etc/passwd).
• SSRF: Загрузка внешних ресурсов через <image xlink:href="http://internal-api/...">.

Функция sanitizeSvg (пример реализации)

function sanitizeSvg(string $svgContent): string|false {
 // 1. Отключаем загрузку внешних сущностей (XXE защита)
 libxml_disable_entity_loader(true);
 
 $dom = new DOMDocument;
 // LIBXML_NOENT ౼ подставляет сущности, но мы их отключили выше.
 // LIBXML_DTDLOAD / DTDATTR ౼ запрещаем загрузку внешних DTD.
 $flags = LIBXML_NONET | LIBXML_DTDLOAD | LIBXML_DTDATTR;
 
 // Подавляем ошибки парсинга невалидного XML, проверим вручную
 $internalErrors = libxml_use_internal_errors(true);
 $loaded = $dom->loadXML($svgContent, $flags);
 libxml_use_internal_errors($internalErrors);

 if (!$loaded) return false;

 // 2. Удаляем опасные теги и атрибуты рекурсивно
 $xpath = new DOMXPath($dom);
 
 // Список запрещенных тегов
 $forbiddenTags = ['script', 'foreignObject', 'iframe', 'video', 'audio', 'animate', 'set', 'use']; // 'use' опасен для внешних ссылок
 foreach ($forbiddenTags as $tag) {
 $nodes = $xpath->query("//[local-name='$tag']");
 foreach ($nodes as $node) { $node->parentNode->removeChild($node); }
 }

 // Удаляем опасные атрибуты (on, href, xlink:href на внешние ресурсы)
 $allElements = $xpath->query('//*');
 foreach ($allElements as $el) {
 // Удаляем event handlers
 foreach ($el->attributes as $attr) {
 $name = $attr->name;
 if (strpos($name, 'on') === 0) { // onclick, onload...
 $el->removeAttribute($name);
 }
 // Блокируем внешние ссылки в href/xlink:href
 if (in_array($name, ['href', 'xlink:href'])) {
 $val = $attr->value;
 if (strpos($val, 'http') === 0 || strpos($val, '//') === 0 || strpos($val, 'data:') === 0) {
 $el->removeAttribute($name);
 }
 }
 }
 }

 // 3. Убеждаемся, что корневой элемент ౼ svg
 if ($dom->documentElement->tagName !== 'svg') return false;
 
 // Добавляем атрибуты безопасности
 $dom->documentElement->setAttribute('xmlns', 'http://www.w3.org/2000/svg');
 
 return $dom->saveXML($dom->documentElement, LIBXML_NOEMPTYTAG);
}

Специфика SVG: спрайты, <use> и кэширование в Chrome

Согласно данным из практики разработчиков (Habr QA), часто возникает проблема: SVG, загруженный через AJAX и вставленный в DOM, не отображается в Chrome, если он использует <use xlink:href="sprite.svg#icon">.

Причина

Браузеры (особенно Chrome) блокируют доступ к внешним спрайтам (sprite.svg#id) из-за политики CORS или кэширования, если спрайт загружен динамически. Элемент <use> требует, чтобы целевой фрагмент был доступен в том же документе или по URL с корректными заголовками Access-Control-Allow-Origin.

Решения

1. Data URI / JS-спрайт: Хранить спрайт в JS-переменной (как делает evil-icons.io) и инлайнить нужные символы при рендере компонента.
2. AJAX-загрузка символа: Если спрайт большой, загружайте нужный <symbol> через fetch('/sprite.svg'), парсьте XML, находите нужный ID, инлайните в DOM.
3. Исправление заголовков для файла спрайта: Если спрайт отдельный файл, сервер должен отдавать:

   Content-Type: image/svg+xml
   Access-Control-Allow-Origin: * (или ваш домен)
   Cache-Control: public, max-age=31536000, immutable

Проблема кэширования загруженных аватаров/иконок

После успешной загрузки SVG через AJAX и вставки на страницу (например, превью аватара), Chrome может кэшировать старую версию по тому же URL.

Решение: Добавляйте уникальный query-параметр (версию или timestamp) к URL при вставке:

// Клиент после успешного ответа сервера { url: '/uploads/abc.svg' }
const imgUrl = `${res.url}?v=${Date.now}`; 
document.querySelector('#preview').src = imgUrl;


Обратная задача: генерация и скачивание SVG через AJAX

Часто нужно не загрузить, а сгенерировать SVG на сервере и отдать клиенту для сохранения (Download).

Сервер (PHP): Отдача файла на скачивание
<?php
// generate_svg.php
$svgContent = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="red"/></svg>';

header('Content-Type: image/svg+xml; charset=utf-8');
header('Content-Disposition: attachment; filename="diagram_' . date('Ymd_His') . '.svg"');
header('Content-Length: ' . strlen($svgContent));
header('Cache-Control: no-store, no-cache, must-revalidate'); // Важно для AJAX/Blob
echo $svgContent;
exit;
 
Клиент (Fetch + Blob): Современный способ скачивания
 
Старые подходы с window.location.href или скрытыми <a download> не работают с POST-запросами (когда нужно передать сложные параметры генерации).
 
async function downloadSvg(params) {
 const response = await fetch('/api/generate/svg', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(params)
 });

 if (!response.ok) throw new Error('Ошибка генерации');

 // Получаем Blob (двоичные данные)
 const blob = await response.blob; 
 
 // Создаем временную ссылку для скачивания
 const url = window.URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'diagram.svg'; // Имя файла (приоритет над заголовком сервера)
 document.body.appendChild(a);
 a.click;
 
 // Очистка
 window.URL.revokeObjectURL(url);
 a;remove;
}
 
 
Примечание по старому jQuery: В старых версиях jQuery (до 3.x) было невозможно получить blob из $.ajax без хаков (xhrFields: { responseType: 'blob' }). На 2026 год используйте Fetch API для любых операций с файлами (загрузка/скачивание).
 
 
 
Чек-лист лучших практик (Best Practices 2026)
 
 
 
 
Категория
 
Правило
 
Почему
 
 
 
 
 
Клиент
 
Использовать fetch + FormData
 
Нативная поддержка стримингов, прогресса, Blobs. Нет зависимостей.
 
 
 
Клиент
 
Валидировать MIME/расширение ПЕРЕД отправкой
 
UX: мгновенная ошибка без запроса к серверу.
 
 
 
Сервер (Вход)
 
Проверять $_FILES['error'] и finfo_file
 
Защита от подмены заголовков, ошибок диска, отсутствия tmp.
 
 
 
Сервер (Безопасность)
 
ОБЯЗАТЕЛЬНАЯ санитизация SVG (DOMDocument + XXE off)
 
Предотвращение XSS, XXE, SSRF. SVG — это код.
 
 
 
Сервер (ФС)
 
Сохранять очищенный контент (file_put_contents), а не move_uploaded_file "грязного" tmp
 
Гарантия того, что на диске лежит безопасный файл.
 
 
 
Сервер (Имена)
 
Генерировать случайные имена (random_bytes + .svg)
 
Защита от перезаписи, обхода путей, угадывания URL.
 
 
 
Сервер (Выход)
 
Отдавать SVG с Content-Type: image/svg+xml и CSP: default-src 'none'; style-src 'unsafe-inline';
 
Защита при прямом открытии файла в браузере.
 
 
 
Фронтенд (Спрайты)
 
Избегает багов Chrome с <use xlink:href> после AJAX.
 
 
 
Фронтенд (Кэш)
 
Добавлять ?v=hash к URL превью после загрузки
 
Принудительное обновление кэша браузера.
 
 
 
 
 
Создание временных файлов для SVG при AJAX-запросе, это стандартный механизм PHP ($_FILES['tmp_name']), но ответственность разработчика начинается в момент получения этого пути. Главные столпы надежной реализации:
 
 
Не доверяйте клиенту: Проверяйте MIME через finfo, размер, коды ошибок.
 
Очищайте контент: SVG — это исполняемый XML. Санитизация через DOMDocument с отключенными внешними сущностями (libxml_disable_entity_loader(true)) — обязательный стандарт.
 
Пишите безопасный результат: Используйте file_put_contents с очищенной строкой, а не слепое перемещение временного файла.
 
Учитывайте браузерные особенности: Избегайте внешних <use xlink:href> для динамически подгружаемого контента; инлайните спрайты или символы.
 
 
Следуя этим принципам, вы обеспечите безопасную, быструю и совместимую загрузку векторной графики в ваших приложениях на 2026 год и далее.