Векторные иконки на HTML5 + JS

[redigen]

Масштабирование иконок — это конечно круто, но как дела обстоят на практике. Как правило иконки это растр и они перерисовывается под нужные размеры. В примере иконки 30×30px, если уменьшить их масштаб к примеру до 16×16px, то они будут выглядеть убого. Ибо они были отрисованны в векторе по масштабу 30×30px.
Но это решение хорошо к примеру динамической сменой цвета иконок, сверху на SVG можно наложить полупрозрачную PNG с градиентами черных и белых цветов.
Возможно буду использовать эту библиотеку для этих целей, спасибо!

[rewiaca]

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

[s2d]

Не так давно появилась аналогичная подборка (правда более элегантная) на кикстартаре
Скачать иконки можно тут: www.thenounproject.com/

[13i]

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

[DmitryBaranovskiy]

Вовсе не обязательно. Немного «копипэйста» и всё.

[wickedweasel]

их качество не ухудшиться

мои глаза кровоточат

[rewiaca]

Артефакты появляются или вас смутила грамматика?

[wickedweasel]

да, но другая

[rewiaca]

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

[torbasow]

Что-то не видно в посте исправления. Так и осталось с ошибкой: «их качество не ухудшиться».

[Lachezis]

О черт! Бегите к врачу.

[barkalov]

<captain>why not swg?</captain>

[barkalov]

<grammarnazi>svg</grammarnazi>

[Levsha100]

SVG?

[1amer]

в фаербаге на данной странице выполнить
document.getElementsByTagName('body')[0].innerHTML='';for(i in icon){document.getElementsByTagName('body')[0].innerHTML+=(i+'<br><textarea><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" style="position: absolute; left: 40px; top: 40px;"><defs/><path fill="#333333" stroke="none" d="'+icon[i]+'"/><rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#000000" stroke="#000" style="opacity: 0;" opacity="0"/></svg></textarea><br>');}


[JeanLouis]

В опере тоже

[HomoLuden]

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

<path fill="#333333" stroke="none" d="M16,1.466C7.973,1.466,1.466,7.973,1.466,16C1.466,24.027,7.973,30.534,16,30.534C24.027,30.534,30.534,24.027,30.534,15.999999999999998C30.534,7.973,24.027,1.466,16,1.466ZM17.255,23.88V25.927H15.296999999999999V23.903C12.084,23.462999999999997,10.675999999999998,20.823,10.675999999999998,20.823L12.677999999999997,19.15C12.677999999999997,19.15,13.953999999999997,21.372999999999998,16.263999999999996,21.372999999999998C17.539999999999996,21.372999999999998,18.507999999999996,20.689999999999998,18.507999999999996,19.523999999999997C18.507999999999996,16.794999999999998,11.158999999999995,17.125999999999998,11.158999999999995,12.064999999999998C11.158999999999995,9.864999999999998,12.896999999999995,8.279999999999998,15.295999999999996,7.905999999999998V5.859H17.253999999999994V7.904999999999999C18.925999999999995,8.125,20.905999999999995,9.004999999999999,20.905999999999995,10.898V12.35H18.309999999999995V11.645999999999999C18.309999999999995,10.919999999999998,17.384999999999994,10.436,16.350999999999996,10.436C15.030999999999995,10.436,14.062999999999995,11.096,14.062999999999995,12.02C14.062999999999995,14.814,21.411999999999995,14.132,21.411999999999995,19.435C21.413,21.614,19.785,23.506,17.255,23.88Z"></path>

Постыдились бы такое на общее обозрение выкладывать. В то время как профессионалы советуют битмап-кэширование вектора для производительности (в SL, например эффект перехода на битмап ощутимый), тут обратный процесс. Замануха HTML-Пятщиков. Осторожнее с этим чудом (SVG).

[13i]

а почему страница должна тормозить? из-за обработки HTML5?

[HomoLuden]

HTML это инструкция браузеру что, где и как отрисовать. Начнешь двигать страничку вверх-вниз или на страничке какой-нибудь блок через JS будешь двигать, и тогда весь контент начнет перерисовываться. Причем наверняка через CPU. И хорошо если будут задействованы инструкции проца (SSL, например). На нетбуках и планшетах наверное тяжеловато будет. Хотя Apple под HTML5 свои детища и затачивает.

[13i]

не в курсе, проверял ли кто-нибудь это, тестировал?
если у меня к примеру на странице будут 10-15 таких иконок, по 100-500 штук каждая, будет ли тормозить слабенький нетбук? (у меня к счастью нет слабого, поэтому прошу проверить, по возможности конечно)

[HomoLuden]

Я как раз с нетбука и пишу. Изменение масштаба тормозит как на странице, заваленной кучей мелких картинок плюс флэш-модуль. Если по-честному, то эта конкретная страница тормозит не более, чем «обычные» (ХеХе… как в рекламе получилось), плохо сверстанные с кучей рекламы. Но она-то почти ничего не содержит.
Я считаю, что вариант чата или нечто типа одноклассников с кучей JS на борту тормозить будет однозначно. Особенно если без хорошей оптимизации кода.

[13i]

Спасибо.

[bolk]

SSL, например

SSE?

[HomoLuden]

Именно SSE… ОПЕЧАТАЛСЯ…

[rewiaca]

Да-да, вы правильно сделали, что подметили, Вам спасибо за внесение толкового замечания! Кеширование в битмап повышает производительность, это стоит понимать всем будущим верстальщикам html5/css3. Но в рамках демонстраций возможностей и открывающихся неосвоенных границ, на вопрос производительности акцент не стоит.

[DmitryBaranovskiy]

А вы бы не представляли, а проверили бы и написали бы результаты.
А при чём тут HTML5 кстати?

[HomoLuden]

При том, что сейчас, как мне видится, всячески продивигается (пиарится) этот стандарт. Причем внимание людей и разработчиков заостряется именно на векторном рисовании. Чего стоят только мультимедийные демки с использованием связки HTML5 + CSS3 + JS. Но ведь все это софтверный рендеринг и вычисления. Есть ли тут возможности оптимизации как в Java, Flex, SL?

[danSamara]

Это уже вопрос к браузеро-писайтелям — пусть оптимизируют отрисовку SVG.

[cashby]

Хм… В опере 11.00 если кликнуть, удерживая Ctrl, иконки пропадают :) В огнелисе все ок.

[kyrie]

боюсь мобильные браузеры просто повесятся, если использовать эти иконки на практике. Да и кросс-браузерностью там не пахнет. Боюсь лучше по старинке, проверять скриптом устройство и подсовывать нужную картинку.

[DmitryBaranovskiy]

Вы проверяли? Откройте страницу на своём iPhone или в IE6 и удивитесь.

[HomoLuden]

Неужели к IE6 SVG пришаманили?!

[shifty]

VML

[DmitryBaranovskiy]

Эти иконки — это просто демонстрация библиотеки, не призыв к действию. Хотя, нужно признать, что при правильном использовании они могут существенно увеличить скорость загрузки страницы. Не стоит забывать и о том, что при печати страницы такие иконки выглядят намного лучше. И не стоит забывать о том, что и иконки и библиотека абсолютно бесплатны и работают во всех современных браузерах вплоть до IE6.

Как добавление, здесь и не пахнет HTML5.

[Iskin]

Вот бы переконвертировать их в SVG. Например, чтобы править в векторном редакторе (объединить две) или перевести в растовый PNG для favicon.

[DmitryBaranovskiy]

А что там конвертировать-то? Path у вас есть, обернули его в SVG контейнер, вот вам и SVG.

[torbasow]

В тегах явно не хватает SVG и VML. Raphaël же их и генерирует?

А ещё: по моему впечатлению, по меньшей мере половина этих иконок имеется в Unicode. SVG — хорошая штука, но Unicode семантичнее.

[HomoLuden]

Вот я хотел тоже про Unicode или шрифт Wingdings написать. Тут акцент смещен на то, что можно произвольные иконки сделать самому (например, в InkScape).

[DmitryBaranovskiy]

Думаю, что меньше половины. И потом, как я выше писал, иконки могут быть и многоцветные

[Neonailol]

svg для иконок в вебе это както безумно)
+ а вот эти красивее nicolasgallagher.com/pure-css-gui-icons/

[DmitryBaranovskiy]

То есть SVG для иконок — это безумно, а CSS — это не безумно?

Оно может и красивее (на вкус, на цвет), но иконки не прозрачные, при смене цвета фона страницы нужно и иконки допиливать. Да и в IE как-то не очень хорошо смотрится.

[Lebnik]

На днях хотел поделиться с хабропользователями иконками без яваскрипта на одном CSS3, но кармы не хватило, пока тема интересна может быть кого-то заинтересует yapro.ru/web-master/css/css3-ikonki-s-pomoshiyu-transform-rotation.html