Проблемы использования SVG-кнопок в браузерах

[dapmoed]

Я вообще не понимаю тяги ко всему суперновому. Да возможно SVG хорош в некоторых ситуациях, например построение графиков (Raphaël).

Но делать кнопки — мне кажется уже слишком…

[CaptainFlint]

Я бы не сказал, что это тяга. Использование изображения в качестве кнопки — наиболее простой и удобный способ улучшить дизайн, т.к. встроенные возможности стилизации кнопок пока ещё слабоваты. А используя растровые изображения, мы тут же натыкаемся на отсутствие масштабируемости, необходимой из-за использования разных шрифтов и возможности изменения размеров шрифта пользователями. Векторные изображения показались мне наиболее простым и логичным решением: ведь они именно для этого и создавались.

[theRavel]

Приведите пожалуйста пример того, чего нельзя сделать для кнопки средствами обычной верстки (html + css), но можно с помощью SVG

[q0p]

Сделать glass background для элемента. Не transparent, а именно glass как в Windows Aero теме.

[theRavel]

Я не совсем понял о чем вы, но мне кажется что это вполне решается прозрачным png-фоном, тем более если автор статьи отказывается от поддержки IE6

[q0p]

Нет, прозрачность это совсем не то, я же написал.
Стекло в Windows Aero делает размывание всего что находится за ним (в SVG для этого есть функция gaussian blur).

[kirilloid]

И оно делает это динамически с любым фоном, который получился под svg-элементом?
Жрёт-то, наверное, огого.

[q0p]

кого жрёт-то?

[kirilloid]

Процессор, вестимо.

[HomoLuden]

Хотите сказать, что SVG создает скрин того, что под ней (копирует не свой фон, а то, на чем SVG лежит), блёрит это и вставляет в свой фон? Я так делал на Silverlight + WriteableBitmap + PixelShaders. Как с SVG такое провернуть?

[CaptainFlint]

Если ограничиваться CSS2, то масштабируемый градиентный фон, насколько я знаю, сделать не получится. В CSS3, разумеется, это уже решается, но этот стандарт пока ещё слишком сырой (даже не зафиналенный ещё) и недостаточно широко поддерживаемый.

[theRavel]

Согласен, не получится. Но есть несколько но:
1) Допустим, сделать масштабируемый градиент на блок с текстом сложно, т.к. блок может сильно менять высоту и ширину. А кнопки имеют как правило маленькие размеры, в которых ширина варьируется несущественно, а высота в пределах одной-двух строк, поэтому это вполне решаемая задача при использовании CSS2.
2) Вы же в статье отказываетесь от поддержки IE, значит большинство браузеров поддерживают CSS3 (исключая пользователей, не обновивших FF && Opera).

[CaptainFlint]

1) На многих нетбуках сейчас очень большой DPI, для комфортной работы приходится сущственно увеличивать размеры шрифтов. По сравнению с обычным режимом увеличение может быть раза в полтора. Значит, и градиентную картинку придётся делать в полтора раза больше, в обычном режиме она сильно урежется, будет некрасиво (да, я понимаю, можно увеличить не на 50%, а чуть меньше, и залить остаток цветом прилегающей границы, но всё это полумеры, весьма далёкие от простоты, удобства и универсальности векторной заливки).
2) CSS3, в отличие от SVG, очень сильно режет ещё и старые версии всех остальных браузеров. Более того, даже в новейших версиях возможности CSS3 поддерживаются недостаточно широко (например, как выяснилось в комментариях к прошлой статье, CSS-градиент в Опере не работает совсем; использование растровой картинки градиента с CSS3-масштабированием в Хроме не сглаживается, а рисуется полосками; плюс к тому разнообразные глюки, описанные, например, в этой статье — в общем, проблем если и меньше, чем с SVG, то ненамного).

[olegkrasnov]

Мне кажется векторная графика в вебе это очевидная и естественная вещь, которую стоило бы внедрить повсеместно ещё во времена диалапа. У вектора туева хуча плюсов: компактный, быстрый, чёткий, изменяемый.

Единственное, что мешает внедрению — растровые мозговые слизни на головах разработчиков стандартов и браузеров.

[TerrorDroid]

Хотя я, в целом, согласен с вашей мыслью, но таки:

быстрый

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

[Dare]

Аргумент не совсем аргумент.
Если у среднестатистического пользователя на страничке, что-то тормозит или плохо(медленно) прорисовывается это проблема девелопера.

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

[TerrorDroid]

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

векторная графика в вебе это очевидная и естественная вещь, которую стоило бы внедрить повсеместно ещё во времена диалапа

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

[olegkrasnov]

Вы имеете глубокое заблуждение.

Есть некая программуля, Xara Designer. Я в ней работаю уже 15 лет. Это очень быстрый векторный редактор, основным плюсом которого является удобная работа с растровыми заливками. Так вот, ещё на Intel 486 DX2/66 (66 мегагерцевый проц, для тех кто не в курсе), этот редактор рендерил такие массивы растрово-векторной каши, на которых CorelDraw умирал завешивая комп наглушняк.

Отсюда мораль: когда у девелоперов руки изжопы, тогда у юзера тормоза. Так что векторной графике ничто не мешает быть быстрой, кроме лени или недалёкости программистов.

[overbeat]

Ради интереса, проведите замеры, сколько будут грузиться 5 растровых и 5 векторных кнопок одинакового размера. Интересно, есть ли разница?

[CaptainFlint]

На главной странице моего приложения сидят шесть кнопок. Изначально были обычные input'ы, потом я их все заменил на SVG. В Опере разницы в скорости загрузки и отрисовки на глаз не заметил ни малейшей. Если подскажете, чем замеряются такие вещи, могу попробовать засечь.

Кстати, вы мне напомнили ещё одну проблему, о которой я забыл написать. В IE инициализация неподдерживаемых объектов оказалась сильно тормозной и, похоже, однопоточной. В результате эти шесть кнопок (точнее, разумеется, вложенных в них input'ов) отрисовывались в течение полутора–двух секунд, последовательно, одна за другой. Сейчас добавлю в статью…

[smashercosmo]

Честно признаюсь, я не очень сведущ в svg, но не понимаю, почему нельзя, допустим поместить svg картинку внутрь дива, поставить ей position: absolute и растянуть на 100% по высоте и ширине. По сути это будет тот же фон, только полноценно поддерживающий скриптование, зависящий от ширины и высоты родителя, которая изменяется через css. В этом случае текст кнопки спокойно вставляется средствами html и регулируется средствами css и никаких проблем с его позиционированием не будет.

[CaptainFlint]

А можно пример кода? Сходу не получается сообразить, как наложить два элемента друг на друга с центровкой. Попробовал сделать два DIV'а со сдвигом второго на первый через отрицательный margin, но текст внутри дива не захотел центрироваться по вертикали. Таблицу что ли впихивать?..

[tenshi]

а в чём проблема взять кнопку, положить внутрь svg и абсолютно растянуть его по размерам кнопки?

habrahabr.ru/blogs/webdev/99248/ + habrahabr.ru/blogs/svg/110367/

[smashercosmo]

habrahabr.ru/blogs/webdev/99248/ + habrahabr.ru/blogs/svg/110367/ + habrahabr.ru/blogs/svg/110367/ )))

[smashercosmo]

тьфу, ошибся

[CaptainFlint]

Сорри, не понял, что значит «положить внутрь»? По этим двум ссылкам ничего подобного не обнаружил.

[tenshi]

button {position:relative;z-index:0}
button .button-bg {position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%}

[s0rr0w]

Никогда не понимал, зачем вот тут

onclick="javascript:doClickAction(parentNode.name);"

пишут javascript:, если эти аттрибуты и так ожидают, что внутри будет этот самый javascript.

[CaptainFlint]

Как минимум, в IE ещё поддерживается VBScript. Соответственно, данный префикс уточняет скриптовый язык.

[s0rr0w]

Да пусть хоть ASMScript поддерживает, ожидаемый в этих атрибутах язык не поменяется. Спецификация для кого пишется?

[CaptainFlint]

Спецификация для кого пишется?

Уж для кого-кого, но никак не для Великого и могучего IE, сверкающего боя, с ногой на небе, живущего, пока не исчезнут машины. :-)

По крайней мере, такой вывод следует из его текущего соответствия стандартам…

[Inviz]

inviz.ru/lsd/Dependencies/lsd-examples/Demos/index.html Я просто оставлю это здесь.

Свг использовать можно. Если сильно хотеть.

[CaptainFlint]

В том-то и проблема, что у меня масштаб не обязан быть 1:1, и даже более того, ситуация, когда он 1:1 весьма редка. А хуже всего то, что он у меня ещё и разный по вертикали и горизонтали.

[CaptainFlint]

1. В моём SVG сейчас все размеры целочисленные. Вообще все. Просто одни в пикселях, другие — в процентах.
2. Не понимаю, какое отношение имеет этот маятник к кнопке? Я вижу, что он масштабируется — ну так и правильно, любой SVG будет масштабироваться, это же суть самого формата. Возьмите SVG-картинку из прошлой статьи, поправьте так, как вы предлагаете, и выложите результат. Боюсь, что иначе мы так и не поймём друг друга.

[CaptainFlint]

Я именно этот тег и использую (см. первую часть статьи и код примера кнопки).

[torbasow]

Для добавления SVG-изображения в HTML-страницу существует пять способов

Для полноты картины назову ещё два: SVG-фавиконки и SVG-шрифты.

Итак, мы вставили нашу кнопку. Собираемся добавить вторую… и тут же понимаем, что для этого нам придётся делать новый SVG-файл, так как надпись хранится внутри SVG-кода. Но количество файлов-картинок хотелось бы минимизировать

Можно сделать через PHP, а надпись передавать параметром в адресе. Вполне наглядно, по-моему:

<object data="./button.php?text=ОК" type="image/svg+xml"></object>

Firefox: Нет поддержки стилей в SVG, отвещающих за положение базы шрифта. В результате становится невозможным выровнять текст по вертикали

Fx3.6 уже понимает dominant-baseline.

[CaptainFlint]

<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, и реакция была нулевой. Ладно, попробую ещё раз, мог что-то напутать.

[torbasow]

3.6.13, работает. Может, не во всех случаях. Но вот в этом тестовом коде работает:

<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 такое ещё не работало.

[CaptainFlint]

Ничего не понимаю: в FF, действительно, работает, зато в Опере отказывается. Неужто я результаты для разных браузеров умудрился перепутать? Вроде, не пил…

Ладно, сейчас поправлю статью. Спасибо за пинок.

[torbasow]

И в «Опере» и в «уэбкитах» не работает. Я для них пытаюсь джаваскриптовский хак писать, но остановился пока на том, что обнаружил: получить высоту текста — нетривиальная задача. Метод text.getBBox() даёт разные результаты во всех браузерах по разному.