[Поддержка] SVG в Менеджере изображений

[optimlab]

Скачать / Купить дополнение

SVG в Менеджере изображений

---

Данный модификатор позволит вам загружать изображения векторной графики в формате SVG через Менеджер изображений сайта. Это позволит вам отображать одинаково свои логотипы, иконки и прочие элементы дизайна одинаковыми на всех экранах, с разной плотностью пикселей на дюйм.
Favicon в виде SVG!

 

Долой кубические артефакты растровых изображений! Делайте интернет-магазин в ногу со временем!

 

Всё больше и больше дисплеев выходят с большим числом пикселей на дюйм (плотность) и большими размерами по ширине. FullHD плавно перетекает в 4К и 5К.
Будьте в тренде! Оставьте растровые изображения в прошлом, и начните делать новое на основе векторной графики. Приведете элементы вашего дизайна в вектор, загружайте ваши логотипы в векторе, иконки и элементы дизайна тоже переведите в вектор. Перестаньте "удивлять" посетителя (при увеличении страницы) "квадратиками" и артефактами растровых изображений. Оставьте растр для фотографий товаров.

 

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

• Пример крутящегося логотипа
• Информация о формате SVG
• Информация о языке разметки SMIL
• Анимация SVG

 

Полезный Совет:

При сохранении вектора в SVG делайте его в целых пикселях, а не в дробных. Т.е. ширина монтажной монтажной области должна быть в целых числах.

 

Установка:

1. Панель администратора -> Модули -> Установка расширений -> Загрузить файл архива.
2. Панель администратора -> Модули -> Модификаторы -> нажимаем Обновить для обновления кеша модификаторов.

 

Лицензия:

• Модификатор на один магазин.
• Следующий магазин оплачивается отдельно.

Версия с техподдержкой:
svg-3.0.ocmod.zip - для Opencart 2.3.x - 3.x

 

Архивные версии:
svg-1.0.ocmod.zip - для Opencart 2.0.x
svg-2.1.ocmod.zip - для Opencart 2.1.x - 2.2

 

---

• Добавил
  optimlab
• Добавлено
  31.07.2017
• Категория
  Инструменты, утилиты
• Системные требования
• Метод активации
  Без активации
• Ioncube Loader
  Нет
• ocStore
  3.0
  2.3.0.2.4
  2.3
  2.2
  2.1
• OpenCart.Pro, ocShop
  Не проверялось
• Обращение к серверу разработчика
  Нет

 

[pimur]

Отмечусь, дабы не потерять.

[zlatoff]

Подпишусь так как занимаюсь анимацией svg и тема интересна. 

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

[optimlab]

Это в основном для:

• лого магазина,
• лого производителей,
• изображения категорий (ака иконки пунктов навигации),
• слайдеров,
• банеров,
• каруселей,
• модулей произвольных блоков на странице где нужно вставить изображение,
• иконки лого опреаторов связи (вы же часто можете наблюдать какие кривые и безобразные их вставляют владельцы магазинов).

На самом деле кому надо и кто разбирается, тот и покупает этот модификатор.

 

[OldAine]

Есть один недостаток, данный способ вставки изображения (прямой путь к svg, а не через content: " ";) не позволяет играть с цветом svg файла. Он вставляется, как картинка в теге img и на него нельзя повесить свойство, например такое :hover (color: #f00;) А это иногда бывает нужно, чтобы сделать красивый дизайн. Скажем в меню или в каталоге иконки должны менять цвет вместе с текстом.

[zlatoff]

3 часа назад, OldAine сказал:

Есть один недостаток, данный способ вставки изображения (прямой путь к svg, а не через content: " ";) не позволяет играть с цветом svg файла. Он вставляется, как картинка в теге img и на него нельзя повесить свойство, например такое :hover (color: #f00;) А это иногда бывает нужно, чтобы сделать красивый дизайн. Скажем в меню или в каталоге иконки должны менять цвет вместе с текстом.

Ховер можно обыграть в самом svg - спецификация svg в 2 раза больше спецификации html. Там есть все.

А так вы правы - что бы от svg получить больше, управлять им с помощью css/js посредством dom нужно имплантировать его с помощью embed или object (на худой конец iframe или инлайном), но не img.

[optimlab]

В 28.05.2018 в 12:11, OldAine сказал:

нельзя повесить свойство, например такое :hover (color: #f00;)

 

21 час назад, zlatoff сказал:

Ховер можно обыграть в самом svg

 

CSS вы можете вставлять в тело SVG.

[StanislavG]

Подскажите пожалуйста, я хочу скачать логотип из Adobe Stock и загрузить на свой сайт. Логотип скачивается в формате Ai. Ваш модуль позволяет это сделать?

[zlatoff]

 

9 часов назад, StanislavG сказал:

Подскажите пожалуйста, я хочу скачать логотип из Adobe Stock и загрузить на свой сайт. Логотип скачивается в формате Ai. Ваш модуль позволяет это сделать?

 

Сконвертируйте из ai в svg и вставляйте. Делов то на несколько секунд.

[krolix]

Здравствуйте. Я вот сделал анимированные иконки с помощью одной статьи в интернете которые требуют подключения скриптов и стилей к сайту. Ваш плагин сможет мне в этом помочь?

[optimlab]

@krolix , я не смогу ответить на вопрос, так как не знаю что за скрипты и что за иконки..

[krolix]

В 08.10.2018 в 07:07, optimlab сказал:

@krolix , я не смогу ответить на вопрос, так как не знаю что за скрипты и что за иконки..

 

Ссылка

[optimlab]

@krolix , ваш метод не подойдёт. Это вообще не SVG, это скрипт генерирует SVG в теле страницы. Вам необходимо изучить другие примеры и методы использования стилей и SMIL в теле SVG файла.

[krolix]

20 часов назад, optimlab сказал:

@krolix , ваш метод не подойдёт. Это вообще не SVG, это скрипт генерирует SVG в теле страницы. Вам необходимо изучить другие примеры и методы использования стилей и SMIL в теле SVG файла.

Спасибо за совет

[zlatoff]

12 часов назад, krolix сказал:

Спасибо за совет

 

Только ручками, прямотоком в шаблон.

[santehtop]

Подскажите, если в теле письма которое приходит на почту покупателю логотип будет отображаться если он на сайте в формате svg ? 

[optimlab]

@santehtop  SVG не поддерживается во многих почтовых клиентах.

Подробнее: https://css-tricks.com/a-guide-on-svg-support-in-email/

Но вы протестируйте. Возможно уже картина в 2019 году изменилась.

 

Можно конечно обойти эти недостатки конвертацией SVG в PNG через ImageMagick или Inkscape (это оказалось лучшим решением как по лаконичности, так и по цветовой гамме и альфа-каналам), как для почты так и для ogg:image, но они стоят не на всех хостингах, обычные пользователи взорвут мне мозг, как пользоваться и устанавливать, а опытным разрабам это и не надо, они и без меня смогут.

Поэтому эту тему я отправил в долгий ящик...

[kimk]

файл загружается но не отображается в менеджере изображений

[optimlab]

@kimk , покажите файл. Думаю дело именно в нём.

[optimlab]

@kimk ,файл который вы мне дали в личке (не надо писать в личку!), загрузился и нормально отображается в менеджере изображений и не только, можете сами убедиться на демо: http://demo.optimcart.com/admin/index.php?route=catalog/category/edit&category_id=62

Значит причина вашей беды в другом.

 

[kimk]

29 минут назад, optimlab сказал:

@kimk ,файл который вы мне дали в личке (не надо писать в личку!), загрузился и нормально отображается в менеджере изображений и не только, можете сами убедиться на демо: http://demo.optimcart.com/admin/index.php?route=catalog/category/edit&category_id=62

Значит причина вашей беды в другом.

 

может я не хочу палить свой логотип всем подряд, потому и написал в личку. у меня система 2.3, а у вас 3.

 

Змінено 19 липня 2019 користувачем kimk

[optimlab]

21 минуту назад, kimk сказал:

у меня система 2.3

Проверил и на 2.3, тоже самое.

У вас менеджер изображений родной вообще? А то у меня был случай, когда всё перепробовали, и когда я уже зашел в админку, а там стоит другой загрузчик изображений!

Попробуйте по очереди отключать и включать установленные модификаторы и искать с каким конфликтует. Возможно какой-то модификатор вносит свои изменения в файлы движка несовместимые с жизнью.

[ogomor]

Интересует совместим ли с OpenCart.Pro 2.3

[optimlab]

@ogomor , не проверял. Но на 99,9% уверен что совместим.

[morfius12]

Здравствуйте возник вопрос как изменить размер логотипа SVG на сайте?