rune.svg.js
v0.0.1
Published
Plugin for Rune.js that parses SVG files into a Rune.Group.
Readme
Rune.Svg.js
A plugin that parses SVG files (or strings) and converts them Rune objects.
Currently implemented:
- [x] Convert tags to Rune objects (
<rect>,<ellipse>,<circle>,<line>,<polygon>,<path>,<text>,<image>,<g>) - [x] Parse tag attributes supported by Rune
- [x] Parse style attributes supported by Rune
- [x] Path: Convert relative commands to absolute
Rune.Anchor - [x] Path: Convert
Sto fullRune.Anchorbezier - [x] Path: Convert
VandHtoRune.Anchorline - [ ] Parse
<defs>for gradients (Gradients not support in Rune.js yet) - [ ] Convert transform attribute
matrix()into actualxandyvalues for object
Using in the browser
First download the latest release. Then include the rune.svg.js file after your rune.js file in your HTML file.
<head>
<script src="rune.js"></script>
<script src="rune.svg.js"></script>
</head>The plugin is now available as Rune.Svg.
Using in node
npm install rune.svg.js
Then require the rune.svg.js module in your code, along with your rune.js module (if needed).
var Rune = require('rune.js');
var Svg = require('rune.svg.js');The plugin is now available as Svg.
Usage
This loads a SVG file and converts it to a Rune.Group.
var svg = new Rune.Svg('myfile.svg');
svg.load(function(err) {
var group = svg.toGroup();
r.stage.add(group);
});This parses a SVG string and converts it to a Rune.Group.
var svg = new Rune.Svg('<svg>...</svg>');
svg.load(function(err) {
var group = svg.toGroup();
r.stage.add(group);
});