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

Но делать кнопки — мне кажется уже слишком…
Я бы не сказал, что это тяга. Использование изображения в качестве кнопки — наиболее простой и удобный способ улучшить дизайн, т.к. встроенные возможности стилизации кнопок пока ещё слабоваты. А используя растровые изображения, мы тут же натыкаемся на отсутствие масштабируемости, необходимой из-за использования разных шрифтов и возможности изменения размеров шрифта пользователями. Векторные изображения показались мне наиболее простым и логичным решением: ведь они именно для этого и создавались.
Приведите пожалуйста пример того, чего нельзя сделать для кнопки средствами обычной верстки (html + css), но можно с помощью SVG
Сделать glass background для элемента. Не transparent, а именно glass как в Windows Aero теме.
Я не совсем понял о чем вы, но мне кажется что это вполне решается прозрачным png-фоном, тем более если автор статьи отказывается от поддержки IE6
Нет, прозрачность это совсем не то, я же написал.
Стекло в Windows Aero делает размывание всего что находится за ним (в SVG для этого есть функция gaussian blur).
И оно делает это динамически с любым фоном, который получился под svg-элементом?
Жрёт-то, наверное, огого.
Хотите сказать, что SVG создает скрин того, что под ней (копирует не свой фон, а то, на чем SVG лежит), блёрит это и вставляет в свой фон? Я так делал на Silverlight + WriteableBitmap + PixelShaders. Как с SVG такое провернуть?
Если ограничиваться CSS2, то масштабируемый градиентный фон, насколько я знаю, сделать не получится. В CSS3, разумеется, это уже решается, но этот стандарт пока ещё слишком сырой (даже не зафиналенный ещё) и недостаточно широко поддерживаемый.
Согласен, не получится. Но есть несколько но:
1) Допустим, сделать масштабируемый градиент на блок с текстом сложно, т.к. блок может сильно менять высоту и ширину. А кнопки имеют как правило маленькие размеры, в которых ширина варьируется несущественно, а высота в пределах одной-двух строк, поэтому это вполне решаемая задача при использовании CSS2.
2) Вы же в статье отказываетесь от поддержки IE, значит большинство браузеров поддерживают CSS3 (исключая пользователей, не обновивших FF && Opera).
1) На многих нетбуках сейчас очень большой DPI, для комфортной работы приходится сущственно увеличивать размеры шрифтов. По сравнению с обычным режимом увеличение может быть раза в полтора. Значит, и градиентную картинку придётся делать в полтора раза больше, в обычном режиме она сильно урежется, будет некрасиво (да, я понимаю, можно увеличить не на 50%, а чуть меньше, и залить остаток цветом прилегающей границы, но всё это полумеры, весьма далёкие от простоты, удобства и универсальности векторной заливки).
2) CSS3, в отличие от SVG, очень сильно режет ещё и старые версии всех остальных браузеров. Более того, даже в новейших версиях возможности CSS3 поддерживаются недостаточно широко (например, как выяснилось в комментариях к прошлой статье, CSS-градиент в Опере не работает совсем; использование растровой картинки градиента с CSS3-масштабированием в Хроме не сглаживается, а рисуется полосками; плюс к тому разнообразные глюки, описанные, например, в этой статье — в общем, проблем если и меньше, чем с SVG, то ненамного).
Мне кажется векторная графика в вебе это очевидная и естественная вещь, которую стоило бы внедрить повсеместно ещё во времена диалапа. У вектора туева хуча плюсов: компактный, быстрый, чёткий, изменяемый.

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

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

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

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

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

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

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

Кстати, вы мне напомнили ещё одну проблему, о которой я забыл написать. В IE инициализация неподдерживаемых объектов оказалась сильно тормозной и, похоже, однопоточной. В результате эти шесть кнопок (точнее, разумеется, вложенных в них input'ов) отрисовывались в течение полутора–двух секунд, последовательно, одна за другой. Сейчас добавлю в статью…
Честно признаюсь, я не очень сведущ в svg, но не понимаю, почему нельзя, допустим поместить svg картинку внутрь дива, поставить ей position: absolute и растянуть на 100% по высоте и ширине. По сути это будет тот же фон, только полноценно поддерживающий скриптование, зависящий от ширины и высоты родителя, которая изменяется через css. В этом случае текст кнопки спокойно вставляется средствами html и регулируется средствами css и никаких проблем с его позиционированием не будет.
А можно пример кода? Сходу не получается сообразить, как наложить два элемента друг на друга с центровкой. Попробовал сделать два DIV'а со сдвигом второго на первый через отрицательный margin, но текст внутри дива не захотел центрироваться по вертикали. Таблицу что ли впихивать?..
Сорри, не понял, что значит «положить внутрь»? По этим двум ссылкам ничего подобного не обнаружил.
button {position:relative;z-index:0}
button .button-bg {position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%}
Никогда не понимал, зачем вот тут
onclick="javascript:doClickAction(parentNode.name);"

пишут javascript:, если эти аттрибуты и так ожидают, что внутри будет этот самый javascript.
Как минимум, в IE ещё поддерживается VBScript. Соответственно, данный префикс уточняет скриптовый язык.
Да пусть хоть ASMScript поддерживает, ожидаемый в этих атрибутах язык не поменяется. Спецификация для кого пишется?
Спецификация для кого пишется?
Уж для кого-кого, но никак не для Великого и могучего IE, сверкающего боя, с ногой на небе, живущего, пока не исчезнут машины. :-)

По крайней мере, такой вывод следует из его текущего соответствия стандартам…
UFO landed and left these words here
В том-то и проблема, что у меня масштаб не обязан быть 1:1, и даже более того, ситуация, когда он 1:1 весьма редка. А хуже всего то, что он у меня ещё и разный по вертикали и горизонтали.
UFO landed and left these words here
1. В моём SVG сейчас все размеры целочисленные. Вообще все. Просто одни в пикселях, другие — в процентах.
2. Не понимаю, какое отношение имеет этот маятник к кнопке? Я вижу, что он масштабируется — ну так и правильно, любой SVG будет масштабироваться, это же суть самого формата. Возьмите SVG-картинку из прошлой статьи, поправьте так, как вы предлагаете, и выложите результат. Боюсь, что иначе мы так и не поймём друг друга.
UFO landed and left these words here
Я именно этот тег и использую (см. первую часть статьи и код примера кнопки).
Для добавления SVG-изображения в HTML-страницу существует пять способов


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

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


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

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

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


Fx3.6 уже понимает dominant-baseline.
<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, и реакция была нулевой. Ладно, попробую ещё раз, мог что-то напутать.
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 такое ещё не работало.
Ничего не понимаю: в FF, действительно, работает, зато в Опере отказывается. Неужто я результаты для разных браузеров умудрился перепутать? Вроде, не пил…

Ладно, сейчас поправлю статью. Спасибо за пинок.
И в «Опере» и в «уэбкитах» не работает. Я для них пытаюсь джаваскриптовский хак писать, но остановился пока на том, что обнаружил: получить высоту текста — нетривиальная задача. Метод text.getBBox() даёт разные результаты во всех браузерах по разному.
Only those users with full accounts are able to leave comments. Log in, please.