How to become an author
Search
Write a publication
Pull to refresh

Comments 43

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

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

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

Total votes 13: ↑11 and ↓2+9
Хотя я, в целом, согласен с вашей мыслью, но таки:
быстрый

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

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

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

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

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

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

пишут javascript:, если эти аттрибуты и так ожидают, что внутри будет этот самый javascript.
Total votes 2: ↑2 and ↓0+2
Как минимум, в IE ещё поддерживается VBScript. Соответственно, данный префикс уточняет скриптовый язык.
This comment wasn’t rated yet0
Да пусть хоть ASMScript поддерживает, ожидаемый в этих атрибутах язык не поменяется. Спецификация для кого пишется?
Total votes 1: ↑1 and ↓0+1
Спецификация для кого пишется?
Уж для кого-кого, но никак не для Великого и могучего IE, сверкающего боя, с ногой на небе, живущего, пока не исчезнут машины. :-)

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


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

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


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

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

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


Fx3.6 уже понимает dominant-baseline.
This comment wasn’t rated yet0
<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, и реакция была нулевой. Ладно, попробую ещё раз, мог что-то напутать.
This comment wasn’t rated yet0
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 такое ещё не работало.
Total votes 1: ↑1 and ↓0+1
Ничего не понимаю: в FF, действительно, работает, зато в Опере отказывается. Неужто я результаты для разных браузеров умудрился перепутать? Вроде, не пил…

Ладно, сейчас поправлю статью. Спасибо за пинок.
This comment wasn’t rated yet0
И в «Опере» и в «уэбкитах» не работает. Я для них пытаюсь джаваскриптовский хак писать, но остановился пока на том, что обнаружил: получить высоту текста — нетривиальная задача. Метод text.getBBox() даёт разные результаты во всех браузерах по разному.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr