Рисуем кнопку в SVG

[Prometheus]

Идея — конечно верная. Давно уже нужна технология для отрисовки интерфейсных компонент. Использование картинок — не кашерно.

В вашем примере.
Если масштабировать в Хроме — у кнопок появляется прокрутка. При возвращении к нормальному масштабу, надпись у кнопок не на своем месте.

[CaptainFlint]

Про масштабирование в Хроме я как раз хотел упомянуть во второй статье. :-)

[CaptainFlint]

К сожалению, о возможностях CSS3 пока ещё слишком мало знаю я. SVG мне показался самым логичным решением, поэтому я начал разбираться именно с ним. Скорее всего, теперь буду копать именно в сторону CSS3.

[CaptainFlint]

Спасибо, возьму на вооружение.

[tenshi]

что мешает воспользоватся средствами css3?

[HomoLuden]

+ градиент легко сымитировать однопиксельным растром. В CSS3 фоновую картинку можно масштабировать. Скругленные бордеры есть. К тому же размер кнопки можно через JS контролировать.
П.С.: а в Silverlight есть такое свойство «SnapsToDevicePixels» ;)

[CaptainFlint]

К сожалению, отмасштабированный растровый градиент всё равно не сравняется с векторным: при больших размерах он будет полосчатым из-за толстых, растянутых пикселей. В реальном применении, конечно, этого видно не будет — такие большие кнопки не используются, но останется некий внутренний дискомфорт из-за того, что сделано «некошерно». :-)

[Kaaboeld]

если уж css3, то никто не мешает использовать и нативную css градиентную заливку пример

[CaptainFlint]

В Опере не фурычит. :-(

[qbique]

не всё так гладко с CSS3. мало-мальски сложные вещи часто рендерятся с отвратительным качеством
Например, кнопка со скруглёнными краями, градиентом, тенью и одно-пиксельным бордером получается вот такой

[dom1n1k]

И во всех браузерах немножко по-разному!
Походил на практике — хотел прогрессивно кнопочки сделать.

[Xpeh]

Так можно же SVG из градиента использовать как фоновую картинку в CSS.

[CaptainFlint]

Задание SVG в качестве фона через CSS пока работает только в Хроме. Ни Опера, ни FF это делать не умеют.

[tenshi]

опера умеет, причём давно. а вот фф только недавно научился.

[CaptainFlint]

Возможно, есть трюки, но есть страничка с примерами разных способов внедрения SVG: вариант CSS background у меня отобразился только в Хроме. В Опере 10.63/11.00 и FF 3.6.13 не захотел (четвёрку не тестировал).

[Xpeh]

Проверьте с простым div, всё будет работать. А тут какой-то нюанс, связанный с таблицами, мешает.

[tenshi]

ninjin.freeoda.com/web-components/wc.external/wc-button/wc-button.html — здесь опере подсовывается svg в качестве фона через data-url

[CaptainFlint]

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

[ilnoor]

Не знаю, по каким соображениям вы схлопотали первый минус. Идея игр на svg вполне имеет право на жизнь. Вот, например, кто-то уже балуется: пост, сама игра

[Nutochka]

Нет. SVG — слишком медленный для игр. Он просто поразительный тормозок! =))) И всё, что выходит за пределы статической картинки — ужасно медленно работает.


Если хотите писать на html5 игрушку — используйте Canvas — с ним реально сделать хоть что-то.
Вот игры на фреймворке LibCanvas:

[Nutochka]

Ну Canvas — растровый. И более глючный, чем Флеш, будем честными =)
LibCanvas — вносит много векторных примитивов. Например, Rectangle: libcanvas.com/ru/tutorial/shapes/rectangle
Документация пока сыроватая, но она в процессе и можно задавать вопросы лично разработчику по емейлу [e-mail]

[belk]

FF 3.6.13 завис после минуты Астероидов.

[Nutochka]

скоро будет новая версия с новыми оптимизациями =)

[Nutochka]

Но даже это большее достижение, чем на базе SVG =)

[JN0iZzze]

Для использования SVG лучше воспользоваться js-библиотекой по типу Raphaël
А такую банальную кнопку можно и средствами CSS выполнить, пример:

[Gorthauer87]

JPEG!!! глаза!!!1

[Jman]

my eyes are bleeding

[JN0iZzze]

ок, не знал что тут все иhttps://habrastorage.org/getpro/habr/comment_images/085/7c2/ca4/0857c2ca4437c1a410e5eb7d78acbbcd.pngдеалисты…

[JN0iZzze]

чёрт…

[Jman]

мои принципы
где есть градиент и цвета выходят за пределы безопасной палитры — нету места gif (разве что в самых простых случаях)
где есть текст — нету места jpg (в любом случае)
поэтому тут выход — только png

эту картинку (та что jpg) в gif я бы ещё пережил. но даже при -2 у комментария уже видно то зло которое случилось с текстом при jpeg сжатии.

[SowingSadness]

IE9 — не работаеть -((

[CaptainFlint]

Странно, вроде обещали поддержку SVG в IE9. Я в нём ещё не тестировал — проблем с остальными браузерами хватило выше крыши…

[CaptainFlint]

Толщина линий 0.01 хороша в абстрактном представлении или когда требуется общая масштабируемость картинки для рассматривания деталей. В моём случае применение SVG оказалось довольно специфично: масштабирование применяется не для увеличения/уменьшения как такового, а для конкретной цели, изначально с масштабированием ничего общего не имеющей (растягивание кнопочного фона — и только фона, к тому же ещё и анизотропное).

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

[CaptainFlint]

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