Комментарии 45
Масштабирование иконок — это конечно круто, но как дела обстоят на практике. Как правило иконки это растр и они перерисовывается под нужные размеры. В примере иконки 30×30px, если уменьшить их масштаб к примеру до 16×16px, то они будут выглядеть убого. Ибо они были отрисованны в векторе по масштабу 30×30px.
Но это решение хорошо к примеру динамической сменой цвета иконок, сверху на SVG можно наложить полупрозрачную PNG с градиентами черных и белых цветов.
Возможно буду использовать эту библиотеку для этих целей, спасибо!
Но это решение хорошо к примеру динамической сменой цвета иконок, сверху на SVG можно наложить полупрозрачную PNG с градиентами черных и белых цветов.
Возможно буду использовать эту библиотеку для этих целей, спасибо!
Да, совершенно верней пример вы привели. Эти иконки не созданы для того что лишь масштабировать без потерь в качестве. Смена цвета хорошая затея — получилось бы намного удобней и компактней чем по старинке — спрайтами, да вариантов куча появляется.
Не так давно появилась аналогичная подборка (правда более элегантная) на кикстартаре
Скачать иконки можно тут: www.thenounproject.com/
Скачать иконки можно тут: www.thenounproject.com/
их качество не ухудшиться
мои глаза кровоточат
Артефакты появляются или вас смутила грамматика?
да, но другая
О черт! Бегите к врачу.
<captain>why not swg?</captain>
SVG?
в фаербаге на данной странице выполнить
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>');}
Представляю как страница будет тормозить, если увлечешься векторными иконками.
Постыдились бы такое на общее обозрение выкладывать. В то время как профессионалы советуют битмап-кэширование вектора для производительности (в SL, например эффект перехода на битмап ощутимый), тут обратный процесс. Замануха HTML-Пятщиков. Осторожнее с этим чудом (SVG).
<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).
а почему страница должна тормозить? из-за обработки HTML5?
HTML это инструкция браузеру что, где и как отрисовать. Начнешь двигать страничку вверх-вниз или на страничке какой-нибудь блок через JS будешь двигать, и тогда весь контент начнет перерисовываться. Причем наверняка через CPU. И хорошо если будут задействованы инструкции проца (SSL, например). На нетбуках и планшетах наверное тяжеловато будет. Хотя Apple под HTML5 свои детища и затачивает.
не в курсе, проверял ли кто-нибудь это, тестировал?
если у меня к примеру на странице будут 10-15 таких иконок, по 100-500 штук каждая, будет ли тормозить слабенький нетбук? (у меня к счастью нет слабого, поэтому прошу проверить, по возможности конечно)
если у меня к примеру на странице будут 10-15 таких иконок, по 100-500 штук каждая, будет ли тормозить слабенький нетбук? (у меня к счастью нет слабого, поэтому прошу проверить, по возможности конечно)
Я как раз с нетбука и пишу. Изменение масштаба тормозит как на странице, заваленной кучей мелких картинок плюс флэш-модуль. Если по-честному, то эта конкретная страница тормозит не более, чем «обычные» (ХеХе… как в рекламе получилось), плохо сверстанные с кучей рекламы. Но она-то почти ничего не содержит.
Я считаю, что вариант чата или нечто типа одноклассников с кучей JS на борту тормозить будет однозначно. Особенно если без хорошей оптимизации кода.
Я считаю, что вариант чата или нечто типа одноклассников с кучей JS на борту тормозить будет однозначно. Особенно если без хорошей оптимизации кода.
SSL, напримерSSE?
Да-да, вы правильно сделали, что подметили, Вам спасибо за внесение толкового замечания! Кеширование в битмап повышает производительность, это стоит понимать всем будущим верстальщикам html5/css3. Но в рамках демонстраций возможностей и открывающихся неосвоенных границ, на вопрос производительности акцент не стоит.
А вы бы не представляли, а проверили бы и написали бы результаты.
А при чём тут HTML5 кстати?
А при чём тут HTML5 кстати?
При том, что сейчас, как мне видится, всячески продивигается (пиарится) этот стандарт. Причем внимание людей и разработчиков заостряется именно на векторном рисовании. Чего стоят только мультимедийные демки с использованием связки HTML5 + CSS3 + JS. Но ведь все это софтверный рендеринг и вычисления. Есть ли тут возможности оптимизации как в Java, Flex, SL?
Это уже вопрос к браузеро-писайтелям — пусть оптимизируют отрисовку SVG.
Хм… В опере 11.00 если кликнуть, удерживая Ctrl, иконки пропадают :) В огнелисе все ок.
боюсь мобильные браузеры просто повесятся, если использовать эти иконки на практике. Да и кросс-браузерностью там не пахнет. Боюсь лучше по старинке, проверять скриптом устройство и подсовывать нужную картинку.
Эти иконки — это просто демонстрация библиотеки, не призыв к действию. Хотя, нужно признать, что при правильном использовании они могут существенно увеличить скорость загрузки страницы. Не стоит забывать и о том, что при печати страницы такие иконки выглядят намного лучше. И не стоит забывать о том, что и иконки и библиотека абсолютно бесплатны и работают во всех современных браузерах вплоть до IE6.
Как добавление, здесь и не пахнет HTML5.
Как добавление, здесь и не пахнет HTML5.
Вот бы переконвертировать их в SVG. Например, чтобы править в векторном редакторе (объединить две) или перевести в растовый PNG для favicon.
В тегах явно не хватает SVG и VML. Raphaël же их и генерирует?
А ещё: по моему впечатлению, по меньшей мере половина этих иконок имеется в Unicode. SVG — хорошая штука, но Unicode семантичнее.
А ещё: по моему впечатлению, по меньшей мере половина этих иконок имеется в Unicode. SVG — хорошая штука, но Unicode семантичнее.
svg для иконок в вебе это както безумно)
+ а вот эти красивее nicolasgallagher.com/pure-css-gui-icons/
+ а вот эти красивее nicolasgallagher.com/pure-css-gui-icons/
На днях хотел поделиться с хабропользователями иконками без яваскрипта на одном CSS3, но кармы не хватило, пока тема интересна может быть кого-то заинтересует yapro.ru/web-master/css/css3-ikonki-s-pomoshiyu-transform-rotation.html
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Векторные иконки на HTML5 + JS