kobezzza, из всех ты единственный сказал аргумент что распарраллеливание загрузки ускорит загрузку, я сейчас докажу что это не так))

Это доказали менеджеры загрузки лет 15 назад. Но из-за дурацкого HTTP1 это не работало.

Ты такую пену поднял из за:
1) Вставить svg в css?
2) Живое редактирование svg? Да еще так, чтоб страницу браузера не трогать?
3) Я ЭТО ПРИДУМАЛ, БОЛЬШЕ НИКТО ТАК НЕ УМЕЕТ. блаблабла.

Хм, ладно, webpack это умеет:

webpack-dev-server, file-loader

{
	test: /\.svg$/,
	loader: 'file?name=assets/images/[name].[hash].[ext]'
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/csHRWgW26TM" frameborder="0" allowfullscreen></iframe>

Насчет спрайтов, веб пак это умеет, но мне - это пока не нужно.

Я не совсем понимаю, он умеет собирать галпом проэкт проводить оптимизацию svg собирать из них спрайт а при изменении хоть одного из svg файлов релоадить его в браузере без перезагрузки?

И второй вопрос как мне быть если я для этого хочу использовать апач чтобы заголовки отдавались такие какие отдаст апач и.т.п. короче что если я хочу использовать свой сервер а не кастыль этот?

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

Я тебе докажу что СЕЙЧАС загружая много файлов страничка грузится дольше чем нежели один. Более того я ДОКАЖУ что один файл лучше гзипится чем несколько отдельнгых!

WebPack отдельный от галпа инструмент. И да, он всё умеет.

Что за чушь? Вначале погугли определение слова гений) а потом уже неси такую ахинею, ну раз тут так принято то я все сделаю за тебя: Гений это человек резко превзосшедший свое поколение. Тот, кто мчится на гребне волны прогресса толкая её, а не плетется в её хвосте.

What?

Не забудь привести пруфы, что у тебя используется HTTP2 сервер (например H2O), также приложи его конфиг и сделай запускаемый бенчмарк.

1) я пишу планиг на галп.
2) ответа так и не получил, как мне использовать свой сервер с веппаком?

ВОООТ ОНО сразу очко заиграло да)? ЗААДНЮЮ ДАЛ СРАЗУ))))) понял что твои ТЕОРИИ о великом http2 далеки от практики)))))))))) я думаю тест я могу не делать дальше??? мы оба поняли что ты не прав)????? или мне над доказывать что поменять блять целй сервер и покупать дорогой хостинг а не обычный на апаче, ЗАМЕСТО ТОГО ЧТОБЫ ОБЕДИНИТЬ ИКОКИ В СПРАЙТ это удел идиота)?

А какие браузеры поддерживают http2? Что можешь контраргументировать на счет того что все запакованное в один файл лучше сжимается чем по отдельности)?

WAT?

А не юзаю апач, а хостюсь на Амазоне, который поддерживает http2.

Все последние версии, а которые не поддерживают, поддерживают SPDY

kobezzza, мы оба поняли что ты не прав)????? или мне над доказывать что поменять блять целй сервер и покупать дорогой хостинг а не обычный на апаче, ЗАМЕСТО ТОГО ЧТОБЫ ОБЕДИНИТЬ ИКОКИ В СПРАЙТ это удел идиота)?
А какие браузеры поддерживают http2? Что можешь контраргументировать на счет того что все запакованное в один файл лучше сжимается чем по отдельности)?

Пруфы, что он дорого. Я вот юзаю и не замечал, что он дорогой.

https://github.com/http2/http2-spec/...mplementations

kobezzza, нет базара 0, app cache и http2 решают все проблемы, да только вот они еще не пригодны для использования по этому я и напсиал это расширение. мыслю уловил? а так же я использую стандартный свой сервер без всяких костылей, то есть у меня апач тупо, и лайв релоад работает на нем, а так же повторяю вопросы:

1) Что можешь контраргументировать на счет того что все запакованное в один файл лучше сжимается чем по отдельности?
2) Какие браузеры поддерживают http2?
3) Целессобразно ли менять сервер и хостинг заместо того чтобы сжать иконки в спрайт?

Если мы говорим про HTTP1, то я тоже уже отвечал. WebPack всё умеет, что ты хочешь. Он запакует SVG в PNG спрайт, он сделает хот-релоад (без перезагрузки страницы через свой dev-proxy) и он сделает ещё кучу всего, я просто посоветовал тебе не тратить время на велосипед, а изучить готовый, великолепный, инструмент.

Мужик, серьёзно, не используй апач для статики. Все твои оптимизации бесполезны если ты юзаешь апач, поставь NGinx или H20. Это не дорого (на самом деле).

Открой для себя Amazon AWS/Azure и т.д. Хостинги с говноапачем - это прошлый век.

Что за бред? мы избавились от png в пользу svg чтобы был вектор и малый вес, иначе какой смысл в svg. Короче забей это я к слову. Я не трачу время на ведомипед я напсиал плагин на галп которому нет равных и я его использую для себя, и он занял 100 стрчоек кода и науичл меня псиать плагины на галп. Эту задачу по другому не решить, нет ни единой причины учит какой то другой инструмент за место того чтобы напсиать плагин на сборщик который у меня уже настроен и который я давно использую. Я даю 100% что вебпак не умеет делать то что умеет мой плагин. я могу четко описать что делает мой плагин и ты скажешь да или нет. жди видео

Это многозначный термин, в него вплетают все что угодно начиная с просто выдающихся людей и заканчивая чуть ли не сверхестесвенными способностями. Но суть не в этом, а в том что все здоровые люди появляются примерно с одним и тем же кол-вом 'ресурсов'. Эти ресурсы можно потратить на быт, семью, работу и тд, Человека в принципе можно считать гением если он потратил примерно 70% своего ресурса в одно узкое место и сделал там кучу открытий. А ты тратишь их на троллинг и всякую фигню и следовательно просто не можешь им быть.

Больше похож на чувака где-то в середине стада, который направлен в сторону отстающих, практически стоишь и кричишь что они все дебилы.

Ну я уже не понимаю, что ты хочешь.

Это прекрасно, но почему ты используешь таск-раннер для сборки сайта, а не специализированный инструмент сборки.

Веб пак, также как и галп и т.д. работает с плагинами. Только в отличии от галпа, он не запускает произвольные таски, а заточен под сборку сайта. Это 2 разных инструмента, которые я использую вместе.

"Вес" может быть больше ... :) Аргумент высосан из пальца.

Потому что gulp это спцециализированный инструмент сборки а не таск раннер.

Этот аргумент не является частью спора и сказан лишь к слову, он говорит что в данном контексте не обсуждается в чем лучше хранить графику и предполагается что в нашем конкретном случае мы РЕШИЛИ в svg. не тупи

Ребят короче я понял что у нас разные уровни, и мне нет особого смысла вас учить когда вы еще и СПОРИТЕ со мной. Я приведу последний раз свои аргументы, и попробуйте их перекрыть:


1) Много svg файлов обединенных в один лучше сжимаются чем каждый из них по отдельности.
2) Один файл грузится быстрее чем мнго маленьких. И на http2 и на http1, потому что сжатые и склеенные svg занимают не более 500 килобайт, а скорость одного потока не успевает за такое время упасть. По этому лучше распараллелить загрузку компонентов сайта, где файл с иконками один "компонент", нежели грузить каждый пук отдельно.
3) Подобное запаковывание svg в css позволяет делать лайврелоад svg без перезагрузки страницы.
4) Тот факт что третий пункт есть в WebPack не означает что не нужно порадоваться что я такой молодец написал плагин еще и на галп, к тому же я возможно напишу и на вебпак плагин.
5) У меня в css инлайнится не base64 кодирование а encodeURIComponent кодирование, оторое меньше весит и лучше сжимается.
6) Заодно плагин делает еще и оптимизацию svg другим плагином.

Я тебя просто поправляю. Т.к. это уже не разговор. Просто прими как факт. А то тебя почитают необразованные люди и поверят тебе себе во вред.

Apach масдай. Не говори бред. Nginx + ssd свой сервак, уже в той же цене, что и половины хостингов под apachem с урезанным всем чем можно.

ТОТ_САМЫЙ,

Кстати я вот тоже думал че с этим делать, по сути я могу чекать сколько будет весить png с таким же качеством и если меньше то инлайнить её а не svg)) как идея?

Я писал свой текст не неоразованным людям а тому к кому обращался в диалоге, и я расчитывал что он поймет меня. Я не собираюсь только от того что "Нас смотрят" разгоавривать как с даунами разжевывая очевдности. ты уж прости

сделай ещё один пак, пусть пользователь при загрузке сайта выбирает, какой пак грузить с svg или png... :D

А лучше оба, потом протестирует у себя на устройстве и выберет тот, который ему больше подходит.

Я за последнее время понял только одно. Нет лучших решений, есть наименьшее зло!

Ну у меня только один минус, некрасивое использование, то что приходится лезть и прописывать КЛАСС который задаст background-image это не оч красиво и может расходиться с некоторми методологиями верстки.. идеальным решением было бы со стороны браузеров обеспечить поддержку <symbol> нормальную

чтобы можно было писать так: background-image: url(file.svg#logo) и чтобы он от туда только нужное доставал.



Ну а пока есть что есть, по этому я приведу последний раз свои аргументы, и попробуйте их перекрыть:

1) Много svg файлов обединенных в один лучше сжимаются чем каждый из них по отдельности.
2) Один файл грузится быстрее чем мнго маленьких. И на http2 и на http1, потому что сжатые и склеенные svg занимают не более 500 килобайт, а скорость одного потока не успевает за такое время упасть. По этому лучше распараллелить загрузку компонентов сайта, где файл с иконками один "компонент", нежели грузить каждый пук отдельно.
3) Подобное запаковывание svg в css позволяет делать лайврелоад svg без перезагрузки страницы.
4) Тот факт что третий пункт есть в WebPack не означает что не нужно порадоваться что я такой молодец написал плагин еще и на галп, к тому же я возможно напишу и на вебпак плагин.
5) У меня в css инлайнится не base64 кодирование а encodeURIComponent кодирование, оторое меньше весит и лучше сжимается.
6) Заодно плагин делает еще и оптимизацию svg другим плагином.

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

В HTTP2 в рамках одного коннекшена в обе стороны могут обрабатываться множество различных запросов, а сами заголовки будут сжиматься + протокол бинарный, а не текстовый. Т.е. вся возня с оптимизацией ложиться на плечи HTTP серверу/клиенту, а не разработчику. Более того, в HTTP2 можно вместе с ответом на конкретный файл сервак может подцепить файл, который клиент вообще не просил, но который он может попросить, т.е. там всё очень хитро. И кстати, всё это дело можно гзипить.

***

Я наконец понял твой кейз, но дело в том, что мне гораздо проще использовать векторные шрифты или генерация SVG по JS шаблону (который в свою очередь описан на языке шаблонов).

Кстати про шрифты, возможно скоро веб-шрифты научаться передавать цвет (намёк на возможную реализацию фичи).

Опять ты упрямишься. Я тоже так думал и думал что мне впаривают очередной велосипед, серьёзно. Но потом я потратил пару дней на изучение (да, там реально не просто) и меня как из ведра окатило.

Вот уже есть плагины для данной задачи для WebPack:

https://github.com/kisenka/webpack-svg-sprite-loader
https://www.npmjs.com/package/webpack-svgstore-plugin

(не удивляйся, что в примере не CSS, т.к. в вебпак нет разделения на сущности файлов, а всё выстраивается конвеерами, например, css!svg-sprite!stylus)

Разноое сглаживание и собственно все, так же нельзя использовать анимации, а я могу svg еще и анимировать и интерактивный сделать и все это в качестве ФОНА).

Нет противостояния моего плагина и http2. твои решения используют тольк http2 а мои и http1 и http2 грубо говоря. то есть у меня и там и там быстро работает, а у тебя толькто в http2.


svgstore-plugin есть и на галп и он совсем другое делает, он делает запаковку которую мождно использовать в html лишь как <svg> <use link='file.svg#logo'> но как background-image в css использовать нельзя. background-image: url(file.svg#logo) будет просто весь svg рисовать или пустоту (так как все запаковано в обекты <symbol> а они невидимые). svg-sprite-loader делает то же самое. они просто запаковывают много svg в один svg. и его нельзя использовать как background-url, именно из-да background-url и было принято решение запаковывать все в css файл. Ну и как побочный эффект это дало лайврелоад. Название плагина моего, я напомню, gulp-svg-to-css вполне отражает суть.

У нас дизайнеры рисуют в кореле и илюстраторе, они обомлели когда я им показал что файл просто сохраняешь, даешь диву класс с именем файла и он начинает работать, а ты продолжаешь редактировать файл а он и в браузере меняется) да я сам от такого офигел), мы даже не мечтали о такой фитче) обычно приходилось все a png рендерить и сохранять в папку потом прописывать стиил и.т.п. а они не умеют и прописывал я и.т.п. а потом не нравились резкие контуры, и процедура повторялась). А тепрь все как и должно быть, в папке src вккторные исходники которые можно открывать и редактировать, а в public_html все компилируется) я уже молчу про то что все запаковывается в спрайт и автоматически сжимается.

kobezzza, шрифтом вот так не сделаешь ;) http://uijs.ru/#about

Почему? Я задам блоку с шрифтом CSS анимацию и всё :)

Главный недостаток шрифтов на мой взгляд, что нельзя сейчас использовать множество цветов.

kobezzza, разное сглаживание и размытие сильнейшее так что невозможно использовать для иконок. один цвет на всю иконку. нельзя анимировать. давай еще раз, нельзя анимировать, можно ли анимировать? НЕТ. Ты не сможешь анимировать. ТО что ты сказал это не анимация. Поанимируй например точку у буквы i ) НО основное это конечно не то что плохая пригодность, а НЕ пригодность для использования в качестве иконок из за размытия и сглаживания ужасного. Браузер сглаживает их как текст и поулчается ад, пруфы легко гуглятся.

Иди спать, пол пятого)