Comments 29
Мне ещё нравится, что к элементам в SVG можно обращаться через jQuery, если у них указан класс. Можно, например, изменить кривизну линий у кривых Безье, поменяв один параметр. SVG очень недооценён и, как всегда, благодаря отсутствия поддержки у IE8.
мне кажется, скоро все изменится.
9to5google.com/2012/09/15/google-drops-ie8-support-in-apps-on-november-15th/
хотя как только в CSS появятся фигуры вроде path, SVG умрет как что-то инородное в браузере.
9to5google.com/2012/09/15/google-drops-ie8-support-in-apps-on-november-15th/
хотя как только в CSS появятся фигуры вроде path, SVG умрет как что-то инородное в браузере.
Было бы жестоко если Гугл на странице поиска поставил уведомление что Ие8 сакс, нужно обновить до хрома 28.
Они бы таким образом давно уже заевовали рынок )))
Или хотя бы чтобы МС не привязывали ИЕ9 к Windows 7 как к минимальной ОС…
Они бы таким образом давно уже заевовали рынок )))
Или хотя бы чтобы МС не привязывали ИЕ9 к Windows 7 как к минимальной ОС…
Если смотреть статистику браузеров по сша — все не так радужно. Так что гуглу есть над чем стараться.
А что с производительностью?
Проблем замечено не было. Специальных тестов не производилось.
На таких маленьких примерах проблем не будет. Более того, мне кажется для сложной графики svg очень хорош: прикручивали библиотечку для деловой графики на основе envision, закидывали в нее порядка полумиллиона значений для графика — и отрисовывал он это с замечательнейшей скоростью.
( демо не работает в Опере 12.12 (win)
Прочитайте раздел «Правда или любим всех», пожалуйста
UFO just landed and posted this here
А что XML declaration и doctype делает внутри body??
Решил попробовать использовать SVG в живом проекте и тут же столкнулся с проблемой. Проблема воспроизводится легко и в данном примере. Подскажите, пожалуйста, это нормально, что если указать размер иконки в процентах (http://codepen.io/anon/pen/iAnKu), то в FireFox (18.0.1) svg-иконка имеет размер примерно в 1,5 — 2 раза больше, чем в Safari (6.0.2)? Или это я что-то путаю?
Дело в том, что пример совсем «сырой» и не содержит ни ресетов, ни нормалайзов для браузеров.
codepen.io/anon/pen/LEjis
А зачем вам проценты для выражения размера иконок? Или это будут не иконки? Спасибо
body, html{
width:100%;
height:100%;
}
codepen.io/anon/pen/LEjis
А зачем вам проценты для выражения размера иконок? Или это будут не иконки? Спасибо
Готовлю сайт, который бы масштабировался адекватно. Собственно, в коде выглядит все максимально просто:
Использую reset.css (http://meyerweb.com/eric/tools/css/reset/). Блокам html и body задаю 100% ширины и высоты. Буду разбираться с кодом. Возможно проблема в чем-то другом. В Safai, собственно, SVG занимает положенное место. Но сама графика не занимает это место полностью.
Использую reset.css (http://meyerweb.com/eric/tools/css/reset/). Блокам html и body задаю 100% ширины и высоты. Буду разбираться с кодом. Возможно проблема в чем-то другом. В Safai, собственно, SVG занимает положенное место. Но сама графика не занимает это место полностью.
Извиняюсь:
И, похоже, я понял, в чем же дело. FireFox пропорционально растягивает SVG по высоте относительно заданной в процентах ширины. А Safari — нет.
<object class="bHeadLogo" data='/images/logo.svg'>
<img src='/images/logo.png'/>
</object>
И, похоже, я понял, в чем же дело. FireFox пропорционально растягивает SVG по высоте относительно заданной в процентах ширины. А Safari — нет.
Можете порекомендовать какой-нибудь модуль для Гранта или Галпа для автоматизации склейки общего СВГ именно с таким способом объявления фигур, как у вас?
А включение его в страницу поможет упростить этот способ.
А включение его в страницу поможет упростить этот способ.
Попробуйте grunt-svgstore
Как я понял, он оптимален при использовании другой техники, с помощью
use. Хотелось бы, чтобы получался «спрайт» именно такой, как у вас. Может, как-то этот плагин специально настроить надо?Ой, прошу прощения. Запутался в техниках :) Нет таких плагинов не встречал. Честно сказать, эксперименты с техникой описанной здесь привели меня к технике с использованием (которую Крис собственно и описал — первый комментарий по вашей ссылке) и вам советую вам переходить на нее :)
Sign up to leave a comment.
Cила CSS поможет тебе принять форму, SVG!