darkdragonblade / foxyjs-svgeditor

svg-editor for web

foxyjs

A simple and powerful Javascript HTML5 SVG library.

• online demo
• 中文官网

---

Features

• Out of the box interactions such as scale, move, rotate, skew, group...
• Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
• JPG, PNG, JSON and CANVAS , PDF , DXF , AI(adobe illustrator)

Supported Browsers/Environments

Context	Supported Version	Notes
Firefox	✔️	modern version (tbd)
Safari	✔️	version >= 10.1
Opera	✔️	chromium based
Chrome	✔️	modern version (tbd)
Edge	✔️	chromium based
Edge Legacy	❌
IE11	❌
Node.js	✔️	Node.js installation

Installation

$ npm install foxyjs --save
// or
$ yarn add foxyjs

Browser

See browser modules for using es6 imports in the browser or use a dedicated bundler.

Quick Start

<template>
  <div id="container" width="100vw" height="100vh"></div>
</template>;

import { Stage, SVGStar } from "foxyjs";
import "foxyjs/style.css";

const container = document.getElementById("container");
const stage = new Stage(container, {
  manualGuides: true,
  smartGuides: true,
  showGrid: true,
  showRulers: true,
});
const star = new SVGStar({
  x: 100,
  y: 100,
  rx: 60,
  ry: 60,
  depth: 0.4,
  arms: 5,
  fill: "red",
});
stage.add(star);
stage.selectedElements.set(star);
stage.toggleTool("transform-tool");