Повсеместное использование 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
, но у меня на это времени не нашлось.
Обновлено 07.01.2019 Проблема решена как в тексте статьи так и в ocmod, ссылка на который дана в конце статьи.
Решить проблему, описанную выше просто. Идем в admin/model/tool/image.php
и после:
$extension = pathinfo($filename, PATHINFO_EXTENSION);
if('svg' == $extension) { if ($this->request->server['HTTPS']) { return HTTPS_CATALOG . 'image/' . $filename; } else { return HTTP_CATALOG . 'image/' . $filename; } }
catalog/model/tool/image.php
, после:$extension = pathinfo($filename, PATHINFO_EXTENSION);
if('svg' == $extension) { if ($this->request->server['HTTPS']) { return HTTPS_SERVER . 'image/' . $filename; } else { return HTTP_SERVER . 'image/' . $filename; } }
Обновлено 07.01.2019. Проблема с путями решена.
Так вот вернемся к 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, которое делает все это само.
Класс! Спасибо большущее, очень помогли
Всегда пожалуйста
Для opencart 3.0.2.0 Работает отлично! Единственное, что в админке, там где загружаешь фото логотипа он будет отображаться криво. А на сайте четко! Спасибо!
Да, есть такое. Постараюсь исправить, когда руки дойдут.
Игорь, когда вы сделаете опции для svg-файла в opencart 3.0. Могу ли я надеяться на будущее? Заранее спасибо, Игорь
https://www.youtube.com/watch?v=MNy65TItXnU
Подскажите пожалуйста, а как быть с письмом системным, там пропал логотип
Добрый день работает, но надо поисправлять везде
‘image/svg+xml’,(запятую в конце ) в окмоде все есть а вот здесь нет в тексте, я понимаю хитрованный ход такой чтоб приложения скачивали и еще описать редакцию файла
admin/model/tool/image.php в окмоде есть на сайте нет.
Очепятка обычная, исправлю. Проблему с путями тоже решил и в статье и в ocmod.
Не правильно пути ставит , хуйня модуль
Смотря под какую версию ОС вы пытаетесь его поставить :) Мой код написан с учетом бекенда 2.3, кроме того проверьте корректность всех правок. Что-то забыли и вот уже «модуль» виноват. Кеш чистили?
Подскажите, почему в ocStore 2.3.0.2.3 в админке и каталоге не отображается лог после загрузки.
Спасибо. Все отлично работает.
Да пожалуйста :)
Зачет! Работает 2.3.0.2
Спасибо!
Большое спасибо! все работает!
В письмах (покупателю и технические) логотип не отображается. Подскажите, пожалуйста, как исправить?
Нужно поправить шаблон письма и ручками прописать картинке размеры. Например так:
img src="path/to/logo.svg" width="100" height="100" alt="Logo"
2.3.0.2 с шаблоном стоит
все сделал как описано в статье, но после этого ломается выбор картинок для замены на всем сайте. Как удалил все изменения все заработало как раньше!
В чем может быть ошибка?
Благодарю за статью!
Игорь, добрый день!
Установил ваш модуль, и в свое время он меня очень сильно спас:) Работало все исправно
Уже после этого установил множество разных модулей нужных на то время. Сейчас снова встал вопрос о загрузке SVG, но редактор у меня почему то пропал( Я так понимаю из-за конфликта с каким то из новых модулей.
Попробовал переустановить ваш модуль — не заработало. Попробовал сделал действия из статьи выше — почему то пропало диалоговое окно выбора изображений, то есть я на нажимаю на миниатюру картинки, далее на карандаш, чтобы выбрать изображение, но файловый менеджер не появляется(
Подскажите пожалуйста, в чем может быть проблема?
Из позже установленных модулей:
OCfilter
Simple
WebP Image
и разные модули по типу кнопки Уатсап и так далее