Cила CSS поможет тебе принять форму, SVG!

[@imater]

Мне ещё нравится, что к элементам в SVG можно обращаться через jQuery, если у них указан класс. Можно, например, изменить кривизну линий у кривых Безье, поменяв один параметр. SVG очень недооценён и, как всегда, благодаря отсутствия поддержки у IE8.

[@LegoMushroom]

мне кажется, скоро все изменится.
9to5google.com/2012/09/15/google-drops-ie8-support-in-apps-on-november-15th/

хотя как только в CSS появятся фигуры вроде path, SVG умрет как что-то инородное в браузере.

[@SOLON7]

Было бы жестоко если Гугл на странице поиска поставил уведомление что Ие8 сакс, нужно обновить до хрома 28.
Они бы таким образом давно уже заевовали рынок )))

Или хотя бы чтобы МС не привязывали ИЕ9 к Windows 7 как к минимальной ОС…

[@safright]

Если смотреть статистику браузеров по сша — все не так радужно. Так что гуглу есть над чем стараться.

[@LegoMushroom]

Гугл если не задает, то сильно влияет на эту статистику в США. Это всего лишь звоночек.

[@exdeniz]

А что с производительностью?

[@LegoMushroom]

Проблем замечено не было. Специальных тестов не производилось.

[@safright]

На таких маленьких примерах проблем не будет. Более того, мне кажется для сложной графики svg очень хорош: прикручивали библиотечку для деловой графики на основе envision, закидывали в нее порядка полумиллиона значений для графика — и отрисовывал он это с замечательнейшей скоростью.

[@LegoMushroom]

Проблем замечено не было на достаточно большом проекте. Просто уточнил.

[@lorndesign]

( демо не работает в Опере 12.12 (win)

[@LegoMushroom]

Прочитайте раздел «Правда или любим всех», пожалуйста

[@lorndesign]

Спс, прозевал… местами заголовки абстрактные, вот и пропустил абзац.

[@LegoMushroom]

Можно и JS, но пока не особо представляю как это сделать. Object, Embed и iFrame не прокатит. Совсем забыл про статичные сайты. Последние, наверное, 5 моих проектов были динамическими, всего 1 html файл. Прошу простить. Обезательно подумаю о решении.

[@LegoMushroom]

Да, действительно, спасибо! Сразу не подумал. Нужно сделать тест.

[@remal]

А что XML declaration и doctype делает внутри body??

[@za90]

Очевидно скопировалось от «вредного старичка». Что так, что без этого добра — однофункционально.
PS: хотя как раз в ИЕ не проверял.

[@KindWizzard]

Решил попробовать использовать SVG в живом проекте и тут же столкнулся с проблемой. Проблема воспроизводится легко и в данном примере. Подскажите, пожалуйста, это нормально, что если указать размер иконки в процентах (http://codepen.io/anon/pen/iAnKu), то в FireFox (18.0.1) svg-иконка имеет размер примерно в 1,5 — 2 раза больше, чем в Safari (6.0.2)? Или это я что-то путаю?

[@LegoMushroom]

Дело в том, что пример совсем «сырой» и не содержит ни ресетов, ни нормалайзов для браузеров.

body, html{
  width:100%;
  height:100%;
}

codepen.io/anon/pen/LEjis

А зачем вам проценты для выражения размера иконок? Или это будут не иконки? Спасибо

[@KindWizzard]

Готовлю сайт, который бы масштабировался адекватно. Собственно, в коде выглядит все максимально просто:


Использую reset.css (http://meyerweb.com/eric/tools/css/reset/). Блокам html и body задаю 100% ширины и высоты. Буду разбираться с кодом. Возможно проблема в чем-то другом. В Safai, собственно, SVG занимает положенное место. Но сама графика не занимает это место полностью.

[@KindWizzard]

Извиняюсь:

    <object class="bHeadLogo" data='/images/logo.svg'>  
             <img src='/images/logo.png'/>  
    </object> 

И, похоже, я понял, в чем же дело. FireFox пропорционально растягивает SVG по высоте относительно заданной в процентах ширины. А Safari — нет.

[@SVGen]

Можете порекомендовать какой-нибудь модуль для Гранта или Галпа для автоматизации склейки общего СВГ именно с таким способом объявления фигур, как у вас?
А включение его в страницу поможет упростить этот способ.

[@LegoMushroom]

Попробуйте grunt-svgstore

[@SVGen]

Как я понял, он оптимален при использовании другой техники, с помощью use. Хотелось бы, чтобы получался «спрайт» именно такой, как у вас. Может, как-то этот плагин специально настроить надо?

[@LegoMushroom]

Ой, прошу прощения. Запутался в техниках :) Нет таких плагинов не встречал. Честно сказать, эксперименты с техникой описанной здесь привели меня к технике с использованием (которую Крис собственно и описал — первый комментарий по вашей ссылке) и вам советую вам переходить на нее :)

[@SVGen]

Ясно :)
Мне ваша понравилась тем, что можно задавать фигуру пиктограммы прямо из стилей, а use принуждает задавать её в разметке. Хорошо, буду смотреть в ту сторону.

[@LegoMushroom]

Да это огромный плюс, но количество хаков и глюков в итоге перевешивают.
Вы не поняли, они обе мои, поэтому я и запутался :)

[@SVGen]

Ой! Теперь буду знать.
Спасибо вам за них! :)