Комментарии 57
В связи с чем возникает законный вопрос: что будет, если кто-нибудь догадается встроить в SVG криптомайнер и начнёт постить такую картинку везде в комментариях?
Теоретически скрипты бы должны не работать.
SVG_Security
но не столь радикальная
Мы не проводили тесты на iPhone.В iOS 11 в сафари работает.
Ну хоть секундомер в картинке работает.
Это анимация жрёт. Её коряво реализовали в браузере. Даже если в картинке ничего не меняется она перерисовывается полностью.
Это да. Но когда они встроены через тег img а в этом случае картинка перересовывается полностью постоянно. Даже шаговая анимация в одну минуту (<animateTransform calcMode="discrete" dur="1min" type="rotate" fill="freeze" by="6" />
) перерисовывается несколько раз в секунду хотя в этом нет необходимости.
если это без тега img — то нагрузка на проц будет меньше?
В хроме можно залезть во внутрь svg, а в мозиле — нет.
В Firefox есть кнопка "Подсветить прорисованную область" в панели иструментов консоли. Её надо добавить в "Настройки инструментов" -> "Дополнительные кнопки инструментов" -> "Подсветить прорисованную область".
В хроме аналог флажок "Enable paint flashing" на вкладке Rendering в консоли.
Только осторожно с этим. Зрелище не для эпилептиков. В хроме это нежнее реализовано.
Вот пример:
Этот квадрат не делает ничего кроме того что жрёт процессорное время.
Если открыть этот квадрат и включить режим отображения прорисовки то можно увидеть он перерисовывается много раз в секунду несмотря на то что в картинке ничего не меняется.
В Firefox есть кнопка "Подсветить прорисованную область" в панели инструментов консоли. Её надо добавить в "Настройки инструментов" -> "Дополнительные кнопки инструментов" -> "Подсветить прорисованную область".
В хроме аналог флажок "Enable paint flashing" на вкладке Rendering в консоли.
Только осторожно с этим. Зрелище не для эпилептиков. В хроме это нежнее реализовано.
Как он это делает?
<animateTransform fill="freeze" repeatCount="indefinite" attributeName="transform" by="0" calcMode="discrete" dur="1000000000000000000000000000000h" type="rotate"/>
Разберём по полочкам:
calcMode="discrete"
— выполнить без переходов.
В этом режиме отключается переход и анимация в определённый момент выполняется мгновенно меняя одно значение на другое.dur="1000000000000000000000000000000h"
— это время анимации.
Дофига часов которое анимация будет работать. Точнее просто жрать процессор ничего не меняя в картинке. В режиме discrete через половину этого времени должна быть мгновенно изменено значение.type="rotate"
— это анимация должна повернуть фигуруby="0"
— на 0 градусов.
То есть опять ничего не изменится даже в тот момент когда должно поменяться значение.
Для лучшего понимания как работает режим discrete:
Тут я уже задал значения при которых квадрат меняет поворот. Но он также постоянно перерисовывается даже когда не движется.
Его анимация:
<animateTransform fill="freeze" repeatCount="indefinite" attributeName="transform" by="45" calcMode="discrete" dur="5s" type="rotate"/>
repeatCount="indefinite"
— повторять бесконечноdur="5s"
— длительность анимации 5 секундcalcMode="discrete"
— выполнить смену значения мгновенно без переходовtype="rotate"
— повернутьby="45"
— на 45 градусов
И никаких скриптов и майнеров не надо.
var locale = "en-gb";
на
var locale = undefined;
то получим то же самое в текущей локали.
- SVG поддерживает Javascript
new Date()
evt.target.ownerDocument.createTextNode()
SVG поддерживает Javascript
А не дыра ли это?
С чего вдруг? В img скрипты не работают. Они работают только если svg встроен напрямую в html или открыт в отдельном окне.
Нет, он показывает дату открытия, завтра соврет.
Мы не проводили тесты на iPhone или более экзотических устройствах.
С каких это пор айфон — хоть сколько-нибудь экзотическое устройство?)
Этот SVG всегда показывает сегодняшнюю дату