Comments 17
Гениально!
+2
Ох ты ж как охренительно!!!
+3
Не знал, что jpeg может быть прозрачным.
Только не понял, альфа-маска сохраняется как растровое или векторное изображение? По идее, она выглядит очень «геометрично», т.е. для построения нетрудно составить формулу, а значит, и описать векторно?
Еще больше можно, теоретически, сэкономить, применив сжатие самого svg, т.к. xml формат сильно избыточен.
Поправьте меня, если ошибаюсь.
Только не понял, альфа-маска сохраняется как растровое или векторное изображение? По идее, она выглядит очень «геометрично», т.е. для построения нетрудно составить формулу, а значит, и описать векторно?
Еще больше можно, теоретически, сэкономить, применив сжатие самого svg, т.к. xml формат сильно избыточен.
Поправьте меня, если ошибаюсь.
-1
Обычное растровое изображение.
Если маска простая — думаю, пару строк на js через canvas может ещё больше сократить объем (можно ещё масштабирование маски под исходный размер сделать).
Если маска простая — думаю, пару строк на js через canvas может ещё больше сократить объем (можно ещё масштабирование маски под исходный размер сделать).
+1
Дело в том что
1) Геометрическая маска это лишь пример. На деле она такая не всем нужна нужна.
2) Расчет прозрачности ведется по пикселям — я думаю это очевидно. XML тут придется рендерить в растр для расчета в любом случае.Хотя теоретически и так рендерит это в растр для отображения на экране сам браузер или кто там… тут не знаю. см пунк 1. =)
Мне лично кажется что на ява скрипте было бы куда удобнее, но возможно не быстрее…
1) Геометрическая маска это лишь пример. На деле она такая не всем нужна нужна.
2) Расчет прозрачности ведется по пикселям — я думаю это очевидно. XML тут придется рендерить в растр для расчета в любом случае.Хотя теоретически и так рендерит это в растр для отображения на экране сам браузер или кто там… тут не знаю. см пунк 1. =)
Мне лично кажется что на ява скрипте было бы куда удобнее, но возможно не быстрее…
0
Как хранить маску — решать вам. Хотите, используйте растровую маску, хотите — используйте всю мощь SVG для отрисовки маски (фигуры, полигоны и многое другое), хотите с помощью JavaScript — ничто вас здесь не ограничивает. Я показал лишь пример, что применять лучше — зависит от задач. Если у вас есть большая картинка с прозрачным фоном, на котором аккуратно вырезан человек — тут «геометрии» в маске мало. А если нужна просто аватарка вырезанная в форме «звезды», то конечно выгоднее использовать векторную маску.
0
Последняя Opera Next — не работают только примеры с «css background». Ubuntu.
0
Автор, а не пробовали ради любопытства все же IE через VML и что-то типа этого поковырять? В связи со временем суток мозг уже не соображает, поэтому сам осознать не могу — реально это или нет. :-)
0
Ха-ха-ха! Internet Explorer — единственный браузер, который смог отобразить картинку всеми способами. Ненавистники ИЕ, можете начинать скрипеть зубами. :-D
ФФ 13, Хром 19, Сафари 5 не одолели внешние файлы при CSS background и img; Опера 12 не одолела CSS background. А вот ИЕ 9 добросовестно отобразил все до единой картинки. Вроде, у всех браузеров автообновление не трогал, поэтому версии должны быть актуальные.
Есть, разумеется, один традиционный нюанс, который портит вся ляпоту — ИЕ 9 привязан к оси, до которой не все форточники обновились.
ФФ 13, Хром 19, Сафари 5 не одолели внешние файлы при CSS background и img; Опера 12 не одолела CSS background. А вот ИЕ 9 добросовестно отобразил все до единой картинки. Вроде, у всех браузеров автообновление не трогал, поэтому версии должны быть актуальные.
Есть, разумеется, один традиционный нюанс, который портит вся ляпоту — ИЕ 9 привязан к оси, до которой не все форточники обновились.
0
Судя по консоли Firefox, внешние изображения не грузятся по соображениям «безопасности»:
Попытка нарушения системы безопасности: содержимое «http://paulzi.ru/habr/svg-alpha/out.svg» не имеет права загружать данные из paulzi.ru/habr/svg-alpha/mask.jpg.
+3
Можно упомянуть также для новых версий вебкита:
-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)
-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)
+1
UFO just landed and posted this here
Спасибо! Хотя не понял причём тут «сложная маска»? В качестве маски в статье используется изображение, и оно может быть каким угодно сложным. Кроме того для работы метода не требуется включённый JavaScript (по крайней мере в браузерах где есть поддержка SVG).
+1
так тут в принципе любая маска будет работать. даже если не ошибаюсь картинкой.
btw всегда удивляло отсутствие в jpg альфаканала
btw всегда удивляло отсутствие в jpg альфаканала
0
хм… интересный подход. както боролись с аналогичной траблой.
в эту сторону както и не подумали.
в эту сторону както и не подумали.
0
Sign up to leave a comment.
JPEG сжатие картинки с альфа-каналом или SVG masks