Комментарии 43
Я вообще не понимаю тяги ко всему суперновому. Да возможно SVG хорош в некоторых ситуациях, например построение графиков (Raphaël).
Но делать кнопки — мне кажется уже слишком…
Но делать кнопки — мне кажется уже слишком…
0
Я бы не сказал, что это тяга. Использование изображения в качестве кнопки — наиболее простой и удобный способ улучшить дизайн, т.к. встроенные возможности стилизации кнопок пока ещё слабоваты. А используя растровые изображения, мы тут же натыкаемся на отсутствие масштабируемости, необходимой из-за использования разных шрифтов и возможности изменения размеров шрифта пользователями. Векторные изображения показались мне наиболее простым и логичным решением: ведь они именно для этого и создавались.
+1
Приведите пожалуйста пример того, чего нельзя сделать для кнопки средствами обычной верстки (html + css), но можно с помощью SVG
0
Сделать glass background для элемента. Не transparent, а именно glass как в Windows Aero теме.
+1
Я не совсем понял о чем вы, но мне кажется что это вполне решается прозрачным png-фоном, тем более если автор статьи отказывается от поддержки IE6
0
Нет, прозрачность это совсем не то, я же написал.
Стекло в Windows Aero делает размывание всего что находится за ним (в SVG для этого есть функция gaussian blur).
Стекло в Windows Aero делает размывание всего что находится за ним (в SVG для этого есть функция gaussian blur).
+2
И оно делает это динамически с любым фоном, который получился под svg-элементом?
Жрёт-то, наверное, огого.
Жрёт-то, наверное, огого.
0
Хотите сказать, что SVG создает скрин того, что под ней (копирует не свой фон, а то, на чем SVG лежит), блёрит это и вставляет в свой фон? Я так делал на Silverlight + WriteableBitmap + PixelShaders. Как с SVG такое провернуть?
0
Если ограничиваться CSS2, то масштабируемый градиентный фон, насколько я знаю, сделать не получится. В CSS3, разумеется, это уже решается, но этот стандарт пока ещё слишком сырой (даже не зафиналенный ещё) и недостаточно широко поддерживаемый.
0
Согласен, не получится. Но есть несколько но:
1) Допустим, сделать масштабируемый градиент на блок с текстом сложно, т.к. блок может сильно менять высоту и ширину. А кнопки имеют как правило маленькие размеры, в которых ширина варьируется несущественно, а высота в пределах одной-двух строк, поэтому это вполне решаемая задача при использовании CSS2.
2) Вы же в статье отказываетесь от поддержки IE, значит большинство браузеров поддерживают CSS3 (исключая пользователей, не обновивших FF && Opera).
1) Допустим, сделать масштабируемый градиент на блок с текстом сложно, т.к. блок может сильно менять высоту и ширину. А кнопки имеют как правило маленькие размеры, в которых ширина варьируется несущественно, а высота в пределах одной-двух строк, поэтому это вполне решаемая задача при использовании CSS2.
2) Вы же в статье отказываетесь от поддержки IE, значит большинство браузеров поддерживают CSS3 (исключая пользователей, не обновивших FF && Opera).
0
1) На многих нетбуках сейчас очень большой DPI, для комфортной работы приходится сущственно увеличивать размеры шрифтов. По сравнению с обычным режимом увеличение может быть раза в полтора. Значит, и градиентную картинку придётся делать в полтора раза больше, в обычном режиме она сильно урежется, будет некрасиво (да, я понимаю, можно увеличить не на 50%, а чуть меньше, и залить остаток цветом прилегающей границы, но всё это полумеры, весьма далёкие от простоты, удобства и универсальности векторной заливки).
2) CSS3, в отличие от SVG, очень сильно режет ещё и старые версии всех остальных браузеров. Более того, даже в новейших версиях возможности CSS3 поддерживаются недостаточно широко (например, как выяснилось в комментариях к прошлой статье, CSS-градиент в Опере не работает совсем; использование растровой картинки градиента с CSS3-масштабированием в Хроме не сглаживается, а рисуется полосками; плюс к тому разнообразные глюки, описанные, например, в этой статье — в общем, проблем если и меньше, чем с SVG, то ненамного).
2) CSS3, в отличие от SVG, очень сильно режет ещё и старые версии всех остальных браузеров. Более того, даже в новейших версиях возможности CSS3 поддерживаются недостаточно широко (например, как выяснилось в комментариях к прошлой статье, CSS-градиент в Опере не работает совсем; использование растровой картинки градиента с CSS3-масштабированием в Хроме не сглаживается, а рисуется полосками; плюс к тому разнообразные глюки, описанные, например, в этой статье — в общем, проблем если и меньше, чем с SVG, то ненамного).
0
Мне кажется векторная графика в вебе это очевидная и естественная вещь, которую стоило бы внедрить повсеместно ещё во времена диалапа. У вектора туева хуча плюсов: компактный, быстрый, чёткий, изменяемый.
Единственное, что мешает внедрению — растровые мозговые слизни на головах разработчиков стандартов и браузеров.
Единственное, что мешает внедрению — растровые мозговые слизни на головах разработчиков стандартов и браузеров.
+9
Хотя я, в целом, согласен с вашей мыслью, но таки:
только до тех пор пока на странице не пропишется огромное количество элементов, которые необходимо будет прорисовывать с антиалиасингом — не самое слабое задание для слабых компьютеров, вроде тех же нетбуков.
быстрый
только до тех пор пока на странице не пропишется огромное количество элементов, которые необходимо будет прорисовывать с антиалиасингом — не самое слабое задание для слабых компьютеров, вроде тех же нетбуков.
0
Аргумент не совсем аргумент.
Если у среднестатистического пользователя на страничке, что-то тормозит или плохо(медленно) прорисовывается это проблема девелопера.
И естественно всегда приходится идти на копромис, будь то между кроссбраузерностью и красивостью, будь между весом странички и скоростью ее загрузки.
Если у среднестатистического пользователя на страничке, что-то тормозит или плохо(медленно) прорисовывается это проблема девелопера.
И естественно всегда приходится идти на копромис, будь то между кроссбраузерностью и красивостью, будь между весом странички и скоростью ее загрузки.
0
Нет, ну понятно, что это уже больше вопрос о «прямости рук» разработчика, чем о достоинствах или недостатках конкретной технологии. Я просто немного слабо раскрыл смысл в своем первоначальном посте, его следует воспринимать в контексте ответа на:
Что-то мне кажется, что в таком случае тормоза были бы адскими, особенно на компьютере соответствующего времени. Т.е. использовать элементы векторной графики это, конечно, позитивно, но ставить ее просто так, а не там, где с нее будет смысл, это плохое решение.
векторная графика в вебе это очевидная и естественная вещь, которую стоило бы внедрить повсеместно ещё во времена диалапа
Что-то мне кажется, что в таком случае тормоза были бы адскими, особенно на компьютере соответствующего времени. Т.е. использовать элементы векторной графики это, конечно, позитивно, но ставить ее просто так, а не там, где с нее будет смысл, это плохое решение.
+1
Вы имеете глубокое заблуждение.
Есть некая программуля, Xara Designer. Я в ней работаю уже 15 лет. Это очень быстрый векторный редактор, основным плюсом которого является удобная работа с растровыми заливками. Так вот, ещё на Intel 486 DX2/66 (66 мегагерцевый проц, для тех кто не в курсе), этот редактор рендерил такие массивы растрово-векторной каши, на которых CorelDraw умирал завешивая комп наглушняк.
Отсюда мораль: когда у девелоперов руки изжопы, тогда у юзера тормоза. Так что векторной графике ничто не мешает быть быстрой, кроме лени или недалёкости программистов.
Есть некая программуля, Xara Designer. Я в ней работаю уже 15 лет. Это очень быстрый векторный редактор, основным плюсом которого является удобная работа с растровыми заливками. Так вот, ещё на Intel 486 DX2/66 (66 мегагерцевый проц, для тех кто не в курсе), этот редактор рендерил такие массивы растрово-векторной каши, на которых CorelDraw умирал завешивая комп наглушняк.
Отсюда мораль: когда у девелоперов руки изжопы, тогда у юзера тормоза. Так что векторной графике ничто не мешает быть быстрой, кроме лени или недалёкости программистов.
+3
Ради интереса, проведите замеры, сколько будут грузиться 5 растровых и 5 векторных кнопок одинакового размера. Интересно, есть ли разница?
+1
На главной странице моего приложения сидят шесть кнопок. Изначально были обычные input'ы, потом я их все заменил на SVG. В Опере разницы в скорости загрузки и отрисовки на глаз не заметил ни малейшей. Если подскажете, чем замеряются такие вещи, могу попробовать засечь.
Кстати, вы мне напомнили ещё одну проблему, о которой я забыл написать. В IE инициализация неподдерживаемых объектов оказалась сильно тормозной и, похоже, однопоточной. В результате эти шесть кнопок (точнее, разумеется, вложенных в них input'ов) отрисовывались в течение полутора–двух секунд, последовательно, одна за другой. Сейчас добавлю в статью…
Кстати, вы мне напомнили ещё одну проблему, о которой я забыл написать. В IE инициализация неподдерживаемых объектов оказалась сильно тормозной и, похоже, однопоточной. В результате эти шесть кнопок (точнее, разумеется, вложенных в них input'ов) отрисовывались в течение полутора–двух секунд, последовательно, одна за другой. Сейчас добавлю в статью…
+1
Честно признаюсь, я не очень сведущ в svg, но не понимаю, почему нельзя, допустим поместить svg картинку внутрь дива, поставить ей position: absolute и растянуть на 100% по высоте и ширине. По сути это будет тот же фон, только полноценно поддерживающий скриптование, зависящий от ширины и высоты родителя, которая изменяется через css. В этом случае текст кнопки спокойно вставляется средствами html и регулируется средствами css и никаких проблем с его позиционированием не будет.
+2
а в чём проблема взять кнопку, положить внутрь svg и абсолютно растянуть его по размерам кнопки?
habrahabr.ru/blogs/webdev/99248/ + habrahabr.ru/blogs/svg/110367/
habrahabr.ru/blogs/webdev/99248/ + habrahabr.ru/blogs/svg/110367/
+1
Никогда не понимал, зачем вот тут
пишут
onclick="javascript:doClickAction(parentNode.name);
"
пишут
javascript:
, если эти аттрибуты и так ожидают, что внутри будет этот самый javascript.+2
Как минимум, в IE ещё поддерживается VBScript. Соответственно, данный префикс уточняет скриптовый язык.
0
Да пусть хоть ASMScript поддерживает, ожидаемый в этих атрибутах язык не поменяется. Спецификация для кого пишется?
+1
inviz.ru/lsd/Dependencies/lsd-examples/Demos/index.html Я просто оставлю это здесь.
Свг использовать можно. Если сильно хотеть.
Свг использовать можно. Если сильно хотеть.
0
НЛО прилетело и опубликовало эту надпись здесь
В том-то и проблема, что у меня масштаб не обязан быть 1:1, и даже более того, ситуация, когда он 1:1 весьма редка. А хуже всего то, что он у меня ещё и разный по вертикали и горизонтали.
0
НЛО прилетело и опубликовало эту надпись здесь
1. В моём SVG сейчас все размеры целочисленные. Вообще все. Просто одни в пикселях, другие — в процентах.
2. Не понимаю, какое отношение имеет этот маятник к кнопке? Я вижу, что он масштабируется — ну так и правильно, любой SVG будет масштабироваться, это же суть самого формата. Возьмите SVG-картинку из прошлой статьи, поправьте так, как вы предлагаете, и выложите результат. Боюсь, что иначе мы так и не поймём друг друга.
2. Не понимаю, какое отношение имеет этот маятник к кнопке? Я вижу, что он масштабируется — ну так и правильно, любой SVG будет масштабироваться, это же суть самого формата. Возьмите SVG-картинку из прошлой статьи, поправьте так, как вы предлагаете, и выложите результат. Боюсь, что иначе мы так и не поймём друг друга.
0
НЛО прилетело и опубликовало эту надпись здесь
Для добавления SVG-изображения в HTML-страницу существует пять способов
Для полноты картины назову ещё два: SVG-фавиконки и SVG-шрифты.
Итак, мы вставили нашу кнопку. Собираемся добавить вторую… и тут же понимаем, что для этого нам придётся делать новый SVG-файл, так как надпись хранится внутри SVG-кода. Но количество файлов-картинок хотелось бы минимизировать
Можно сделать через PHP, а надпись передавать параметром в адресе. Вполне наглядно, по-моему:
<object data="./button.php?text=ОК" type="image/svg+xml"></object>
Firefox: Нет поддержки стилей в SVG, отвещающих за положение базы шрифта. В результате становится невозможным выровнять текст по вертикали
Fx3.6 уже понимает
dominant-baseline
.0
<object data="./button.php?text=ОК" type="image/svg+xml"></object>С одной стороны, вариант. С другой стороны, браузеру придётся кэшировать несколько кнопок, а не одну. Кстати, первоначальная моя идея (до того, как я обнаружил standby) была в передаче текста внутрь SVG через якорь:
<object data="./button.svg#ОК" type="image/svg+xml"></object>
А внутри SVG вытаскивал его инициализационным скриптом. Мне этот способ не понравился своей неочевидностью, а также тем, что текст приходится кодировать как URL (например, Run%20the%20test), что гораздо менее наглядно. PHP-вариант, кстати, тоже этим грешит.
Fx3.6 уже понимает dominant-baseline.Хм… По-моему, я его пробовал в 3.6.13, и реакция была нулевой. Ладно, попробую ещё раз, мог что-то напутать.
0
3.6.13, работает. Может, не во всех случаях. Но вот в этом тестовом коде работает:
С этим стилем текст ровно посерёдке, без него — выше. Кажется, в Fx3.5 такое ещё не работало.
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect fill="darkgreen" x="0" y="0" width="100%" height="100%"/>
<rect fill="pink" x="45" y="45" width="10" height="10"/>
<text x="50" y="50" style="dominant-baseline: middle; text-anchor: middle;">Тест</text>
</svg>
С этим стилем текст ровно посерёдке, без него — выше. Кажется, в Fx3.5 такое ещё не работало.
+1
Ничего не понимаю: в FF, действительно, работает, зато в Опере отказывается. Неужто я результаты для разных браузеров умудрился перепутать? Вроде, не пил…
Ладно, сейчас поправлю статью. Спасибо за пинок.
Ладно, сейчас поправлю статью. Спасибо за пинок.
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Проблемы использования SVG-кнопок в браузерах