SVG - мои ссылки на интересные ресурсы

Содержание

• Книги и гайды
• Статьи
• Библиотеки
• Видео
• Инструменты
• Разное

Книги и гайды

Карманное руководство по написанию SVG (rus)

Перевод книги Pocket Guide to Writing SVG на css-live.ru. Неплохое введение для начинающих, чтобы понять, что такое svg

SVG Tutorial

Отличная книга от Jakob Jenkov

Snap.svg Tutorial

Статьи

На русском

1. Визуализация данных с помощью HTML5 Canvas и SVG
2. Svg-фильтр для получения черно-белого фото из цветного
3. Руководство по SVG-анимациям (SMIL)
4. SVG-иконки – много и со стилем
5. Как я использую SVG-спрайты
6. SVG спрайт с webpack одной строкой
7. Имитация относительного позиционирования в svg
8. Подборка инструментов для редактирования, конвертирования и оптимизации SVG
9. Иконочные шрифты и почему они не нужны
10. Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных

На английском

1. An Overview of SVG Sprite Creation Techniques
2. Motion Blur Effect with SVG
3. Optimising SVG load with Service Worker
4. Chillwave
5. Animated SVG Icon
6. SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features
7. Caching SVG Sprite in localStorage
8. Creating SVG Sprites using Gulp and Sass
9. Styling SVG <use> Content with CSS
10. SVGs beyond mere shapes
11. Clipped SVG Slider
12. GreenSock Tutorial – How To Create A Simple Image Slideshow
13. The SVG path Syntax: An Illustrated Guide
14. Pong with SVG.js
15. Stuff at the Top of an SVG
16. GreenSock for Beginners: a Web Animation Tutorial
17. Of SVG, Minification and Gzip
18. How to Hand Code SVG
19. Coloring SVGs in CSS Background Images
20. Building a responsive image
21. Managing SVG Interaction With The Pointer Events Property
22. Using Custom Fonts With SVG in an Image Tag
23. The guide to integrating and styling icon systems — SVG sprites, SVG symbols and icon fonts
24. Инлайновые SVG и компоненты
25. SVG-спрайты, SVG-символы и иконочные шрифты
26. Три способа создания угловых граней на SVG
27. Адаптивные картинки на SVG

Библиотеки

0. D3.js

   король визуализации данных

1. Vivus

   анимация путей, работает без зависимостей

2. Bonsai

   мощная библиотека для сложных и простых вещей

3. Velocity

   высокопроизводительный анимационный движок, с АПИ от jQuery, но работает без него

4. Raphael

   библиотека известна поддержкой браузеров до IE6, дальше Дмитрий Барановский разарботал SnapSVG

5. SnapSVG

   моя любимая библиотека, разработана Дмитрием Барановским совместно с Adobe Web Platform Team. Мощный функционал

6. Lazy Line Painter

   jQuery плагин для анимации путей, похож на Vivus

7. SVG.js

   легкая и быстрая библиотека для манипулирования и анимации SVG

8. Walkway

   рисование анимированных линий на основе трех элементов path, line и polyline

9. mo.js

   анимации движений

10. jQuery DrawSVG
11. Two.js
12. Textures.js
13. Peity
14. SVG Charting Libraries
15. GreenSock

Видео

1. Формат SVG: от иконок до живых картин
2. Manipulating SVG With CSS
3. How to Animate SVG Using SVGator

Инструменты

1. SVGOMG - онлайн оптимизация svg
2. IcoMoon - Free - бесплатные иконки
3. ZorroSVG - Put a Mask on it - конвертация png в svg
4. ICONIZR - создание спрайта
5. SVG for Everybody - поддержка svg для IE 6-8
6. SVG PORN - SVG Logo
7. Distorted Button Effects - красивая анимация кнопок
8. Hero Patterns - генерация фонов svg
9. Vectr - Free Vector Graphics Software
10. SVG Filter Effects
11. microicon
12. SVG animation tool - можно создавать красивые прелоадеры
13. Customize and apply backgrounds fast
14. BOXY SVG - редактор

Разное

1. Блог Yoksel - очень много полезных статей
2. SVG typography
3. SVG Path Builder
4. Animated SVG Paths
5. Awesome SVG
6. SVG 101 - Instructive SVG's
7. Искусство SVG фильтров и почему они потрясающие - презентация