SVG логотип в OpenCart

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

Например, обычный растровый логотип размером в 250х40 пикселей, при попытке отобразиться на смартфоне с FullHD будет ну очень страшный, его размажет как яйца в завтраке Макдональдса. Кстати, вот примерно так:

А вот этот же логотип, но уже в SVG формате.

 

Что примечательно, размер этого логотипа всего 1 Кб.  и он будет прекрасно отображаться на экране любого разрешения.

SVG добивается такой четкости очень просто – рисование «изображения» происходит непосредственно в браузере устройства по кривым. А какой длинны будет кривая 10 пикселей или 110 это уже не важно.

Разрешаем SVG в OpenCart 2.х

Почему 2.х? Да мне просто лениво было писать под другие версии инструкции, если вы разработчик то и сами разберетесь по этому примеру. Единственное скажу, что пока по непонятной причине в OpenCart 3.x в атрибуте src="" тега <img> для svg отображается не адрес ресурса (типа /image/catalog/image.svg), а серверный путь (/home/var/www/hostname/image/image.svg), что не позволяет php-скриптам получить доступ к файликам. Понятное дело, что нужно ковыряться в библиотеке image, но у меня на это времени не нашлось.

Так вот вернемся к 2.х. При попытке загрузить файл с разрешением svg, вам будет сообщено, что это неверный тип файла. Чтобы это исправить, для начала разрешим загрузку svg файлов на сервер.

Для этого идем в admin/controller/common/filemanager.php

// Get files
 $files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);

сюда нужно добавить типы SVG строчными и капсом (кто не знает, image.svg и image.SVG это для линукс файловых подсистем разные файлы).

$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF,svg,SVG}', GLOB_BRACE);

Далее

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png'
 );

Заменяем на:

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png',
 'svg'
 );

И еще немного:

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif'
 );

Заменяем (добавляем):

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif',
 'image/svg+xml'
 );

Конечно же для самых ленивых (как вы пост до конца дочитали?!) ссылочка на мое ocmod дополнение на офф сайте opencart.com, которое делает все это само.

SVG enable for OpenCart 2

Игорь Чишкала

Директор по технологиям в SoftForge. Люблю ИТ, пишу технические статьи в этом блоге или для сайта фриланс-биржи Upwork. Кодю на PHP с использованием фреймворков Laravel или Symfony.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *