SVG - мои ссылки на интересные ресурсы
Содержание
Книги и гайды
Карманное руководство по написанию SVG (rus)
Перевод книги Pocket Guide to Writing SVG на css-live.ru. Неплохое введение для начинающих, чтобы понять, что такое svg
Отличная книга от Jakob Jenkov
Статьи
На русском
- Визуализация данных с помощью HTML5 Canvas и SVG
- Svg-фильтр для получения черно-белого фото из цветного
- Руководство по SVG-анимациям (SMIL)
- SVG-иконки – много и со стилем
- Как я использую SVG-спрайты
- SVG спрайт с webpack одной строкой
- Имитация относительного позиционирования в svg
- Подборка инструментов для редактирования, конвертирования и оптимизации SVG
- Иконочные шрифты и почему они не нужны
- Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных
На английском
- An Overview of SVG Sprite Creation Techniques
- Motion Blur Effect with SVG
- Optimising SVG load with Service Worker
- Chillwave
- Animated SVG Icon
- SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features
- Caching SVG Sprite in localStorage
- Creating SVG Sprites using Gulp and Sass
- Styling SVG
<use>
Content with CSS - SVGs beyond mere shapes
- Clipped SVG Slider
- GreenSock Tutorial – How To Create A Simple Image Slideshow
- The SVG
path
Syntax: An Illustrated Guide - Pong with SVG.js
- Stuff at the Top of an SVG
- GreenSock for Beginners: a Web Animation Tutorial
- Of SVG, Minification and Gzip
- How to Hand Code SVG
- Coloring SVGs in CSS Background Images
- Building a responsive image
- Managing SVG Interaction With The Pointer Events Property
- Using Custom Fonts With SVG in an Image Tag
- The guide to integrating and styling icon systems — SVG sprites, SVG symbols and icon fonts
- Инлайновые SVG и компоненты
- SVG-спрайты, SVG-символы и иконочные шрифты
- Три способа создания угловых граней на SVG
- Адаптивные картинки на SVG
Библиотеки
- D3.js
король визуализации данных
- Vivus
анимация путей, работает без зависимостей
- Bonsai
мощная библиотека для сложных и простых вещей
- Velocity
высокопроизводительный анимационный движок, с АПИ от jQuery, но работает без него
- Raphael
библиотека известна поддержкой браузеров до IE6, дальше Дмитрий Барановский разарботал SnapSVG
- SnapSVG
моя любимая библиотека, разработана Дмитрием Барановским совместно с Adobe Web Platform Team. Мощный функционал
- Lazy Line Painter
jQuery плагин для анимации путей, похож на Vivus
- SVG.js
легкая и быстрая библиотека для манипулирования и анимации SVG
- Walkway
рисование анимированных линий на основе трех элементов
path
,line
иpolyline
- mo.js
анимации движений
- jQuery DrawSVG
- Two.js
- Textures.js
- Peity
- SVG Charting Libraries
- GreenSock
Видео
Инструменты
- SVGOMG - онлайн оптимизация svg
- IcoMoon - Free - бесплатные иконки
- ZorroSVG - Put a Mask on it - конвертация png в svg
- ICONIZR - создание спрайта
- SVG for Everybody - поддержка svg для IE 6-8
- SVG PORN - SVG Logo
- Distorted Button Effects - красивая анимация кнопок
- Hero Patterns - генерация фонов svg
- Vectr - Free Vector Graphics Software
- SVG Filter Effects
- microicon
- SVG animation tool - можно создавать красивые прелоадеры
- Customize and apply backgrounds fast
- BOXY SVG - редактор
Разное
- Блог Yoksel - очень много полезных статей
- SVG typography
- SVG Path Builder
- Animated SVG Paths
- Awesome SVG
- SVG 101 - Instructive SVG's
- Искусство SVG фильтров и почему они потрясающие - презентация