• Stars
    star
    10
  • Rank 1,807,489 (Top 36 %)
  • Language
  • Created over 6 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Библиотеки

  1. D3.js

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

  2. Vivus

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

  3. Bonsai

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

  4. Velocity

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

  5. Raphael

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

  6. SnapSVG

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

  7. Lazy Line Painter

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

  8. SVG.js

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

  9. Walkway

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

  10. mo.js

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

  11. jQuery DrawSVG
  12. Two.js
  13. Textures.js
  14. Peity
  15. SVG Charting Libraries
  16. 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 фильтров и почему они потрясающие - презентация