Как стать автором
Обновить

Комментарии 17

Ох ты ж как охренительно!!!
Не знал, что jpeg может быть прозрачным.
Только не понял, альфа-маска сохраняется как растровое или векторное изображение? По идее, она выглядит очень «геометрично», т.е. для построения нетрудно составить формулу, а значит, и описать векторно?
Еще больше можно, теоретически, сэкономить, применив сжатие самого svg, т.к. xml формат сильно избыточен.

Поправьте меня, если ошибаюсь.
Обычное растровое изображение.
Если маска простая — думаю, пару строк на js через canvas может ещё больше сократить объем (можно ещё масштабирование маски под исходный размер сделать).
Дело в том что
1) Геометрическая маска это лишь пример. На деле она такая не всем нужна нужна.
2) Расчет прозрачности ведется по пикселям — я думаю это очевидно. XML тут придется рендерить в растр для расчета в любом случае.Хотя теоретически и так рендерит это в растр для отображения на экране сам браузер или кто там… тут не знаю. см пунк 1. =)

Мне лично кажется что на ява скрипте было бы куда удобнее, но возможно не быстрее…
Как хранить маску — решать вам. Хотите, используйте растровую маску, хотите — используйте всю мощь SVG для отрисовки маски (фигуры, полигоны и многое другое), хотите с помощью JavaScript — ничто вас здесь не ограничивает. Я показал лишь пример, что применять лучше — зависит от задач. Если у вас есть большая картинка с прозрачным фоном, на котором аккуратно вырезан человек — тут «геометрии» в маске мало. А если нужна просто аватарка вырезанная в форме «звезды», то конечно выгоднее использовать векторную маску.
Последняя Opera Next — не работают только примеры с «css background». Ubuntu.
Автор, а не пробовали ради любопытства все же IE через VML и что-то типа этого поковырять? В связи со временем суток мозг уже не соображает, поэтому сам осознать не могу — реально это или нет. :-)
На сколько я знаю, в VML нет аналогов SVG Mask, поэтому наложить растровый альфа-канал не получится, максимум что можно сделать — это использовать векторную маску. Поправьте меня если я не прав.
Ха-ха-ха! Internet Explorerединственный браузер, который смог отобразить картинку всеми способами. Ненавистники ИЕ, можете начинать скрипеть зубами. :-D

ФФ 13, Хром 19, Сафари 5 не одолели внешние файлы при CSS background и img; Опера 12 не одолела CSS background. А вот ИЕ 9 добросовестно отобразил все до единой картинки. Вроде, у всех браузеров автообновление не трогал, поэтому версии должны быть актуальные.

Есть, разумеется, один традиционный нюанс, который портит вся ляпоту — ИЕ 9 привязан к оси, до которой не все форточники обновились.
Судя по консоли Firefox, внешние изображения не грузятся по соображениям «безопасности»:
Попытка нарушения системы безопасности: содержимое «http://paulzi.ru/habr/svg-alpha/out.svg» не имеет права загружать данные из paulzi.ru/habr/svg-alpha/mask.jpg.
Вы не в курсе, чем это может быть вызвано? Не гуглится чего-то.

И вообще, я не понимаю, как включение JPEG'а в SVG может быть уязвимостью, особенно если файлы находятся на одном сервере в одной директории.
Можно упомянуть также для новых версий вебкита:
-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)
НЛО прилетело и опубликовало эту надпись здесь
Спасибо! Хотя не понял причём тут «сложная маска»? В качестве маски в статье используется изображение, и оно может быть каким угодно сложным. Кроме того для работы метода не требуется включённый JavaScript (по крайней мере в браузерах где есть поддержка SVG).
так тут в принципе любая маска будет работать. даже если не ошибаюсь картинкой.
btw всегда удивляло отсутствие в jpg альфаканала
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории