Интерактивная инфографика с анимациями CSS и SVG

[Abcd_Efgh]

ПОЖАЛУЙСТА, УБЕРИТЕ КАПС ИЗ ЗАГОЛОВКОВ
(простите, не прочитал примечания в конце)

[NeoNN]

А еще svg это популярный формат во многих системах digital-signage. В связке с JS очень мощный инструмент в руках профессионала.

[Zoberg]

Есть библиотеки, которые немного упрощают (вопрос привычки) работу с svg для javascript. Например, http://d3js.org/.

[Ganesh]

Вряд ли стоит использовать d3js для того что бы упростить работу с svg. Есть куча более специализированных библиотек для работы с графикой.

[milast]

У меня Опера 12.14 под Ubuntu, к сожалению нет анимации в шкале. Сперва не понял в чём идея, пока не открыл в хромиуме.

[FantasyOR]

Opera 12.14 под Windows 7 — тоже нет анимации.
А ещё в Opera под Android не работает кнопки «Предпросмотр» и «Написать» на хабре.

[Sakura]

Safari 6 все ок

[Anton_from_Amber]

«нигде, кроме Хрома» — неправда. Фаерфокс 18 под Убунту нормально и шустро всё показывает.

[omfg]

[torbasow]

Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML.

Что, правда? Многие не знают? О.

Мы загружаем SVG файл с помощью JavaScript, чтобы получить доступ к HTML содержимому файла.

Ничего не понял.

[shimapa23]

Долго думал над этим предложением, и не знал как лучше всего его преподнести… Предложите свой вариант!

[NickyX3]

Мы загружаем SVG файл с помощью JavaScript, чтобы получить доступ к его элементам с помощью DOM.

Как то так.
Следует заметить, что популрный jquery без плагинов работать со свойствами и параметрами svg не умеет. Use Jquery.svg.dom, Luke!

[NickyX3]

Если будет время — напишем статью как мы работаем с блоками на svg поверх google карты в нашем бета-проекте и почему мы перешли на svg с canvas

[ilusha_sergeevich]

Замечательная идея для создания инфографики. Инфографика в так формате может еще и прибыль на рекламе давать

[rassadin]

Вот отличный пример как не надо делать web графику, в том числе и инфографику.

Основная критика — не обеспечен принцип graceful degradation для недостаточно старых, но популярных браузеров.
Реализация «нет SVG — не печенек», подходит разве что для демок, для продакшена не подходит.

Ну и принцип «не плодить лишних сущностей без необходимости» автору видимо не знаком. Думаю вполне очевидно, что в этом примере можно вполне было бы обойтитсь только HTML и CSS стилями без использования SVG, JS и тем более jQuery.
Все таки это же не Duck Hunt на чистом СSS писать.

Если же это все-таки пример ради примера, чтобы показать связку CSS-SVG, то как минимум это надо озвучить, и предложить варианты попрактичнее.