Snap.svg README

The project's README from github.com/adobe-webplatform/Snap.svg. As one markdown file: README.md.

Snap.svg · Build Status CDNJS GitHub Tag License

A JavaScript SVG library for the modern web. Learn more at snapsvg.io.

Follow us on Twitter.

Install

Learn

Use

In your HTML file, load simply by:

<script src="snap.svg-min.js"></script>

No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /dist folder.

webpack

To load with webpack 2.x and 3.x, install Imports Loader (npm i -D imports-loader), and add the following to your webpack config:

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

Then, in any module you’d like to require Snap, use:

import Snap from 'snapsvg';

Build

Build Status

Snap.svg uses Grunt to build.

cd Snap.svg

npm install -g grunt-cli

*You might need to use sudo npm, depending on your configuration.

npm install

*Snap.svg uses Grunt 0.4.0. You might want to read more on their website if you haven’t upgraded since a lot has changed.

grunt

Testing

Tests are located in test folder. To run tests, simply open test.html in there. Automatic tests use PhantomJS to scrap this file, so you can use it as a reference.

Alternatively, install PhantomJS and run command

grunt test

Contribute

git checkout -b my_branch

git commit -am "Added some awesome stuff"

git push origin my_branch

Note: Pull requests to other branches than dev or without filled CLA wouldn’t be accepted.

Snap.svg (adobe-webplatform/Snap.svg)

Searching Database…

14K ·GitHub
Snap.svg
Что это?Snap.svg — это JavaScript-библиотека для создания и анимации современной SVG-графики в браузере.
Это фреймворк или библиотека?Это библиотека, которую вы подключаете к странице или сборке вместе с приложением; она зависит от небольшой библиотеки событий «eve».
Как добавить её в проект?Установите через Bower (bower install snap.svg) или npm (npm install snapsvg), либо скачайте минифицированные или обычные файлы вручную из папки dist, а затем просто подключите скрипт в HTML — больше никаких скриптов не нужно.
Нужны ли webpack или другие инструменты сборки, чтобы её использовать?Нет, можно просто подключить скрипт прямо в HTML; webpack нужен только если хотите собрать её в общий бандл, и тогда также понадобится пакет Imports Loader.
Где работает Snap.svg?Он работает в любом современном веб-браузере, который поддерживает SVG, так как это клиентская JavaScript-библиотека.
Где можно узнать больше о Snap.svg?В проекте указан сайт snapsvg.io: там есть руководство Getting Started, справочник API (API Reference) и комната в Slack для помощи от сообщества.
Зачем использовать Snap.svg, а не работать с SVG напрямую?Он предоставляет более высокоуровневый JavaScript API для создания, анимации и изменения SVG-элементов, избавляя от необходимости писать громоздкий код для работы с DOM и SVG вручную.
What are similar projects?lottie-web, mojs, raphael, zdog, lenis, d3, plotly.js, twemoji
Which topics is it in?snap, svg, graphics, javascript-library, animation, frontend, apache-2.0, library, javascript, web, open-source
Creator
adobe-webplatform
Size
3.7 MB
Stars
14K
Updated
CommitMar 13
Age
13y
Commits · 90 Days