Jump to content

Recommended Posts

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


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


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

 

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

 

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

 

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

 

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

  1. При сохранении вектора в SVG делайте его в целых пикселях, а не в дробных. Т.е. ширина монтажной монтажной области должна быть в целых числах.
  2. Если вы создаёте svg-изображение с помощью Adobe Illustrator, то при сохранении снимите галочку "Адаптивный SVG". Тогда он будет иметь фиксированный размер как изображение. Но с помощью стилей вы ему можете придать любую ширину аналогичную <img> width=100% или width=100px или max-width=500px

 

Установка:

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

 

Лицензия:

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

Совместимость: OpenCart 2.x-3.x

 

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


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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
3 часа назад, OldAine сказал:

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

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

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

Share this post


Link to post
Share on other sites
5 часов назад, OldAine сказал:

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

 

Что мешает сделать так?
 

<div class="svg-image" data-svg-content="<?php echo $svg_image;?>"></div>

<style>
.svg-image 
  { position: relative; }
.svg-image:before 
  { content: attr(data-svg-content); position: absolute; left: 0; top: 0; width: 50px; height: 50px; }  

</style>

 

Share this post


Link to post
Share on other sites
В 28.05.2018 в 12:11, OldAine сказал:

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
В 08.10.2018 в 07:07, optimlab сказал:

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

 

Ссылка

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
20 часов назад, optimlab сказал:

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

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

Share this post


Link to post
Share on other sites
12 часов назад, krolix сказал:

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites
29 минут назад, optimlab сказал:

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

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

 

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

 

Edited by kimk

Share this post


Link to post
Share on other sites
21 минуту назад, kimk сказал:

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By optimlab
      Даный модификатор позволит вам загружать изображения векторной графики в формате SVG через Менеджер изображений сайта. Это позволит вам отображать одинаково свои логотипы, иконки и прочие элементы дизайна одинаковыми на всех экранах, с разной плотностью пикселей на дюйм.
       
      Долой кубические артефакты растровых изображений! Делайте интернет-магазин в ногу со временем!
       
      Всё больше и больше дисплеев выходят с большим числом пикселей на дюйм (плотность) и большими размерами по ширине. FullHD плавно перетекает в 4К и 5К.
      Будте в тренде! Оставьте растровые изображения в прошлом, и начните делать новое на основе векторной графики. Преведите элементы вашего дизайна в вектор, загружайте ваши логотипы в векторе, иконки и элементы дизайна тоже переведите в вектор. Перестаньте "удивлять" посетителя (при увеличении страницы) "квадратиками" и артефактами растровых изображений. Оставьте растр для фотографий товаров.
       
      Так же вы можете анимировать свои SVG-изображения блягодаря языку разметки SMIL, придавать им свои стили и прочее, прочее.., на что хватит вашей фантазии и дизайнера.
      Пример крутящегося логотипа Информация о формате SVG Информация о языке разметки SMIL Анимация SVG  
      Полезные Советы:
      При сохранении вектора в SVG делайте его в целых пикселях, а не в дробных. Т.е. ширина монтажной монтажной области должна быть в целых числах. Если вы создаёте svg-изображение с помощью Adobe Illustrator, то при сохранении снимите галочку "Адаптивный SVG". Тогда он будет иметь фиксированный размер как изображение. Но с помощью стилей вы ему можете придать любую ширину аналогичную <img> width=100% или width=100px или max-width=500px  
      Установка:
      Панель администратора -> Модули -> Установка расширений -> Загрузить файл архива. Панель администратора -> Модули -> Модификаторы -> нажимаем Обновить для обновления кеша модификаторов.  
      Лицензия:
      Модификатор на один магазин. Следующий магазин оплачивается отдельно. Совместимость: OpenCart 2.x-3.x
       
      Архивы:
      svg-1.0.ocmod.zip - для Opencart 2.0.x
      svg-2.1.ocmod.zip - для Opencart 2.1.x - 2.2
      svg-2.3.ocmod.zip - для Opencart 2.3.x - 3.x
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.