Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

Русский язык для плагина N3T Cookie consent

Вставка VK VIDEO v.1.2.4 - плагин для Joomla

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 13 Ответов
  • 6177 Просмотров
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Поясните как подключать svg?
« : 26.12.2014, 00:29:00 »
Я немного не понял как подключать картинки svg.
Нужно ли писать всю эту конструкцию, или можно обойтись короче?
Код
@font-face {
	font-family: 'IcoMoon';
	src: url('../../../media/jui/fonts/IcoMoon.eot');
	src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
	font-weight: normal;
	font-style: normal;
}


Вот пример еще создал тут:
http://jsfiddle.net/od49bked/

Можно ли подключить по другому? что был какой то файл был, и из него вся эта конструкция вытаскивалась, а не прямо в index.php стояла.
Можно ли сократить код?
И будет ли это работать в разных браузерах?
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #1 : 26.12.2014, 00:36:40 »
Если речь идет о шрифте, то в CSS шаблона в самом начале прописываете всю эту конструкцию.
Указанный вами пример демонстрирует подключение отдельной картинки в svg. По сути, svg - это картинки, представленные в виде XML.
Можно туже отдельную картинку (и это более рекомендованный способ) представить в пожатом виде:
url("data:image/svg+xml;base64,тут код в base64") - в этом случае отдельных файлов не будет, все будет в CSS шаблона
« Последнее редактирование: 26.12.2014, 00:48:17 от AlekVolsk »
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #2 : 26.12.2014, 00:39:19 »
Цитата: AlekVolsk от 26.12.2014, 00:36:40
Если речь идет о шрифте, то в CSS шаблона в самом начале прописываете всю эту конструкцию.
Речь о иконках svg.
А можно без дополнительных файлов обойтись?
Все в один залить это все и пусть себе там лежит? Или так не стоит делать?
Как в примере я показал.
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #3 : 26.12.2014, 00:46:43 »
Цитата: AlekVolsk от 26.12.2014, 00:36:40
Можно туже отдельную картинку (и это более рекомендованный способ) представить в пожатом виде:
url("data:image/svg+xml;base64,тут код в base64") - в этом случае отдельных файлов не будет, все будет в CSS шаблона
А если мне много картинок нужно сделать? ну скажем штук 10. То нужно писать к каждой картинке такое:
url("data:image/svg+xml;base64,тут код в base64")
Или можно все картинки в одно запихать?
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #4 : 26.12.2014, 00:48:05 »
Каждую отдельно так писать, как правило она указывается в backgroung.
Это все равно будет работать быстрее подключенного шрифта или кучи картинок в файлах.
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #5 : 26.12.2014, 00:52:58 »
Цитата: AlekVolsk от 26.12.2014, 00:48:05
Каждую отдельно так писать, как правило она указывается в backgroung.
Это все равно будет работать быстрее подключенного шрифта или кучи картинок в файлах.
А что именно шифровать в base64?
Все это:
Код
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cart" viewBox="0 0 1024 1024">
	<title>cart</title>
	<path class="path1" d="M384 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"></path>
	<path class="path2" d="M1024 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"></path>
	<path class="path3" d="M1024 512v-384h-768c0-35.346-28.654-64-64-64h-192v64h128l48.074 412.054c-29.294 23.458-48.074 59.5-48.074 99.946 0 70.696 57.308 128 128 128h768v-64h-768c-35.346 0-64-28.654-64-64 0-0.218 0.014-0.436 0.016-0.656l831.984-127.344z"></path>
</symbol></defs>
</svg>
Можно по подробнее?
Как нужно это все писать?
или ссылку на какой нить материал где это описывается.
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #6 : 26.12.2014, 00:56:56 »
У вас есть отдельный готовый svg-файл? открываете его в Notepad++, выделяете весь текст (Ctrl+A), далее выполняете команду меню: Плагины - MIME Tools - Base64 Encode. Получившийся код копируете в CSS, в нужное место. Файл svg закрываете без сохранения. Все.
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #7 : 26.12.2014, 00:58:08 »
В частности, из вашего вышеприведенного svg должно получится следующее:
Код
PHN2ZyBkaXNwbGF5PSJub25lIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8c3ltYm9sIGlkPSJpY29uLWNhcnQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPg0KCTx0aXRsZT5jYXJ0PC90aXRsZT4NCgk8cGF0aCBjbGFzcz0icGF0aDEiIGQ9Ik0zODQgOTI4YzAgNTMuMDE5LTQyLjk4MSA5Ni05NiA5NnMtOTYtNDIuOTgxLTk2LTk2YzAtNTMuMDE5IDQyLjk4MS05NiA5Ni05NnM5NiA0Mi45ODEgOTYgOTZ6Ij48L3BhdGg+DQoJPHBhdGggY2xhc3M9InBhdGgyIiBkPSJNMTAyNCA5MjhjMCA1My4wMTktNDIuOTgxIDk2LTk2IDk2cy05Ni00Mi45ODEtOTYtOTZjMC01My4wMTkgNDIuOTgxLTk2IDk2LTk2czk2IDQyLjk4MSA5NiA5NnoiPjwvcGF0aD4NCgk8cGF0aCBjbGFzcz0icGF0aDMiIGQ9Ik0xMDI0IDUxMnYtMzg0aC03NjhjMC0zNS4zNDYtMjguNjU0LTY0LTY0LTY0aC0xOTJ2NjRoMTI4bDQ4LjA3NCA0MTIuMDU0Yy0yOS4yOTQgMjMuNDU4LTQ4LjA3NCA1OS41LTQ4LjA3NCA5OS45NDYgMCA3MC42OTYgNTcuMzA4IDEyOCAxMjggMTI4aDc2OHYtNjRoLTc2OGMtMzUuMzQ2IDAtNjQtMjguNjU0LTY0LTY0IDAtMC4yMTggMC4wMTQtMC40MzYgMC4wMTYtMC42NTZsODMxLjk4NC0xMjcuMzQ0eiI+PC9wYXRoPg0KPC9zeW1ib2w+PC9kZWZzPg0KPC9zdmc+
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #8 : 26.12.2014, 01:09:45 »
Что то у меня не получается сделать(
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #9 : 26.12.2014, 01:11:01 »
Пишу вот так:
Код
background: url(data:image/svg+xml;base64,PHN2ZyBkaXNwbGF5PSJub25lIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8c3ltYm9sIGlkPSJpY29uLWNhcnQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPg0KCTx0aXRsZT5jYXJ0PC90aXRsZT4NCgk8cGF0aCBjbGFzcz0icGF0aDEiIGQ9Ik0zODQgOTI4YzAgNTMuMDE5LTQyLjk4MSA5Ni05NiA5NnMtOTYtNDIuOTgxLTk2LTk2YzAtNTMuMDE5IDQyLjk4MS05NiA5Ni05NnM5NiA0Mi45ODEgOTYgOTZ6Ij48L3BhdGg+DQoJPHBhdGggY2xhc3M9InBhdGgyIiBkPSJNMTAyNCA5MjhjMCA1My4wMTktNDIuOTgxIDk2LTk2IDk2cy05Ni00Mi45ODEtOTYtOTZjMC01My4wMTkgNDIuOTgxLTk2IDk2LTk2czk2IDQyLjk4MSA5NiA5NnoiPjwvcGF0aD4NCgk8cGF0aCBjbGFzcz0icGF0aDMiIGQ9Ik0xMDI0IDUxMnYtMzg0aC03NjhjMC0zNS4zNDYtMjguNjU0LTY0LTY0LTY0aC0xOTJ2NjRoMTI4bDQ4LjA3NCA0MTIuMDU0Yy0yOS4yOTQgMjMuNDU4LTQ4LjA3NCA1OS41LTQ4LjA3NCA5OS45NDYgMCA3MC42OTYgNTcuMzA4IDEyOCAxMjggMTI4aDc2OHYtNjRoLTc2OGMtMzUuMzQ2IDAtNjQtMjguNjU0LTY0LTY0IDAtMC4yMTggMC4wMTQtMC40MzYgMC4wMTYtMC42NTZsODMxLjk4NC0xMjcuMzQ0eiI+PC9wYXRoPg0KPC9zeW1ib2w+PC9kZWZzPg0KPC9zdmc+);
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #10 : 26.12.2014, 01:15:01 »
Получилось)))
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #11 : 26.12.2014, 01:21:46 »
все правильно )) я бы добавил в конце после скобки: no-repeat 0 0 transparent;
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #12 : 26.12.2014, 01:25:17 »
Что то ща дальше делаю, а потом вспомнил, а как цвет то менять?
раньше я указывал color, а ща не работает что то он.
Где указывать?
Записан
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #13 : 26.12.2014, 01:27:57 »
А все кажись понял, что то туплю под вечер/ночь)
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не подключать стили и скрипты если они уже подключены

Автор suvorov

 Ответов: 1
Просмотров: 691 		Последний ответ 22.04.2020, 23:31:04
от sivers
Как подключать скрипты Joomla 3.2 отдельным файлом?

Автор Vas80

 Ответов: 12
Просмотров: 4029 		Последний ответ 13.06.2015, 14:33:22
от GTitan