A lightweight library for manipulating and animating SVG.
A lightweight library for manipulating and animating SVG, without any dependencies.
SVG.js is licensed under the terms of the MIT License.
bower install svg.js
npm install svg.js
https://cdnjs.com/libraries/svg.js
Check https://svgdotjs.github.io to learn more.
All notable changes to this project will be documented in this file.
The document follows the conventions described in “Keep a CHANGELOG”.
====
svgdotjs
'random' option and randomize() method to SVG.Color -> TODO!precision() method to round numeric element attributes -> TODO!SVG.FX -> TODO!parents() method on SVG.Element return an instance of SVG.Set (breaking change) -> TODO!masker in SVG.Mask with the masker() method (breaking change) -> TODO!clipper in SVG.ClipPath with the clipper() method (breaking change) -> TODO!targets in SVG.Mask and SVG.ClipPath with the targets() method (breaking change) -> TODO!SVG.regex (in color, element, pointarray, style, transform and viewbox) -> TODO!mouseenter and mouseleave -> TODO!width() and height() methods to SVG.FXSVG.FX.once so that it add its callback on the last situation instead of the current oneSVG.FX.step so that the animation doesn't stop if an afterAll callback call animate (#677)options object to SVG.on() and el.on() (#661)el.flip() which causes an error when calling flip without any argumentclear() does not remove the parser in svg documents anymorelen not declared in FX module, making it a global variable (9737e8a)bbox not declared in SVG.Box.transform in the Box module (131df0f)namespace not declared in the Event module (e89c97e)SVG.PathArray.parse that did not correctly parsed flat arraysSVG.TextPath (#582)clone() method to SVG.Array/PointArray/PathArray (#590)font() method to SVG.TspanSVG.Box()transform() method to boxesevent() to SVG.Element to retrieve the event that was fired last on the element (#550)SVG.Polyline,SVG.Polygon, SVG.Line, SVG.Path (related #547)SVG.PointArray to be passed flat arraySVG.PointArray use to parse string to allow more flexibility in the way spaces and commas can be usedplot to be called with 4 parameters when animating an SVG.LineSVG.Number are now calculated in its morph method (related #547)initAnimation method of the FX module (#547, #552, #584).tbox(). .tbox() now map to .rbox(). If you are using .tbox(), you can substitute it with .rbox() (#594, #602)el.rbox() now always returns the right boxes in screen coordinates and has an additional paramater to transform the box into other coordinate systemsfont() method can now be used like attr() method (#620)SVG.MorphObj that is in the FX moduleoff() (#518)size() for poly elements when their height/width is zero (#505)SVG.Array now accepts a comma seperated string and returns array of numbers instead of stringsSVG.Matrix now accepts an array as inputSVG.Element.matrix() now accepts also 6 valuesdx()/dy() now accepts percentage values, too but only if the value on the element is already percentageflip() now flips on both axis when no parameter is passeddocumentElement.contains() in IEnpm run test:quick which aim at being fast rather than correct - great for git hooks (981ce24)npm run build now requires nodejs 4.x+SVG.Matrix.skew() (#545)SVG.FX.dequeue() (#546)SVG.FX.step, if custom properties is added to Array.prototype (#549)SVG.FX.afterAll (#534)SVG.FX.speed() (#536)npm run build to build a new version of SVG.js without requiring gulp to be globally installedfill(), stroke() without an argument is now a nopfilterSVGElements utility to use a for loop instead of the native filter functionSVG.ViewBoxparent parameter for clone()document.contains (#490) related to (#480)undo when undoing transformations (#494)SVG.morph() (#473)SVG.Color with new fxradius() for circles when animating and other related code (#477)stop(true) throws an error when element is not animated (#475)add() when altering svgs with whitespacesSVG.Doc().create where size was set to 100% even if size was already specifiedparse() from SVG.PathArray which does not correctly handled S and T (#485)SVG.Point which serves as Wrapper to the native SVGPoint (#437)element.point(x,y) which transforms a point from screen coordinates to the elements space (#403)element.is() which helps to check for the object instance faster (instanceof check)svgjs:data attribute which was not set properly in all browsers (#428)isNumber and numberAndUnit regex (#405)group.move() now allows string numbers as input (#433)matrixify() will not apply the calculated matrix to the node anymoretransform() which returns the matrix values (a-f) now, too (#423)text()rbox() (#425)SvgPathSeg which is removed in Chrome 48 (#409)gbox() to group to get bbox with translation included (#405)ungroup()/flatten() (#238), toParent() and toDoc()morph() method for paths via plugin svg.pathmorphing.jsparent() methodparents() method to get an array of all parenting elementstext() after import/clone (#393)doc() which always should return root svgSVG.FX when animating with plot()dmove() and use() with external filemove() duo to incompatibilities with other move-functions e.g. in SVG.PointArrayselect() method globally or on parent elementsSVG.Circle elementrx() and ry() to SVG.Rect, SVG.Circle, SVG.Ellispe and SVG.FXsvg.wiml.js plugin to plugins listctm() method to for matrix-centric transformationsmorph() method to SVG.MatrixSVG.FXnative() method to elements and matrix to get to the native apiuntransform() method to remove all transformationssvg() methodsituation object in SVG.FXelement() method using the SVG.Bare class to create elements that are not described by SVG.jsw and h properties as shorthand for width and height to SVG.BBoxSVG.TBox to get a bounding box that is affected by transformation valuesoff() methodparent reference on elements to parent() methodCustomEvent instead of Event to be able to fire events with a detail object [thanks @Fuzzyma]SVG.TSpan class to SVG.Tspan to play nice with the adoption systemclone() method to use the adoption systemlines reference to lines() on SVG.Texttrack reference to track() on SVG.TexttextPath reference to textPath() on SVG.Textarray reference to array() method on SVG.Polyline, SVG.Polygon and SVG.Pathrake to Node's gulp for building [thanks to Alex Ewerlöf]to() method to at() method in SVG.FXSVG.SetFX to SVG.FX.SetSVG.Number to return new instances with calculations rather than itselfSVG.Symbol but kept the symbol() method using the new element() methodradius() method when y value equals 0SVG.MarkerSVG.Symbolfirst() and last() methods to SVG.Setlength() method to SVG.Text and SVG.TSpan to calculate total text lengthreference() method to get referenced elements from a given attribute valueSVG.get() will now also fetch elements with a xlink:href="#elementId" or url(#elementId) value givenSVG.offrbox() [thanks @bryhoyt]classes(), hasClass(), addClass(), removeClass() and toggleClass() [thanks @pklingem]after() when calling stop(true) (fulfill flag) [thanks @vird]rebuild event whenever the rebuild() method is calledElement#style() would not save empty values in IE11 [thanks @Shtong]SVG is not defined error [thanks @anvaka]move()on text elements with a string based valuetext() method on text element when acting as getter [thanks @Lochemage]style() method with a css string [thanks @TobiasHeckel]leading() method to SVG.FXreverse() method to SVG.Array (and thereby also to SVG.PointArray and SVG.PathArray)fulfill option to stop() method in SVG.FX to finalise animationsbbox() and rbox() methodsat() method directly on morphable svg.js instances in SVG.FX module_private methods to local named functionsdy() methodstyleplain() method to SVG.Text element to add plain text content, without tspansplain() method to parent elements to create a text element without tspansbuild() to enable/disable build modeSVG.TSpan to accept nested tspan elements, not unlike the text() method in SVG.Textrelative() method in favour of dx(), dy() and dmove()SVG.PathArray for compatibility with other libraries and better performance on parsing and rendering (up-to 48% faster than 1.0.0-rc.4)SVG.PathArray structureleading() implementation to be more font-size "aware"attr method on SVG.ElementSVG.FX class with SVG.invent() functionfill attribute on elementsloaded() method to image tagpointAt() method to SVG.Path, wrapping the native getPointAtLength()MAJOR.MINOR.PATCH versioning format to play nice with package managerslength() method to sugar moduleanimate('=').to()toString() method [thanks @dotnetCarpenter]SVG.invent function to ease invention of new elementsanimate('2s')length() mehtod to path, wrapping the native getTotalLength()SVG.invent to generate core shapes as well for leaner codetoString() methodindex() method to SVG.Parent and SVG.Setmorph() and at() methods to SVG.Number for unit morphingcx() and cy() methods on elements with native x, y, width and height attributes for better performanceSVG.PathArray for real path transformationsbbox() method to SVG.Setrelative() method for moves relative to the current positionmorph() and at() methods to SVG.Color for color morphingsize() method with null for either width or height valuesdata() method now accepts object for for multiple key / value assignmentsunbiased system for pathsloop() method to SVG.FXsetInterval to requestAnimFrame for animationsget() to SVG.SetSVG.PointArray to a separate filelinkTo(), addTo() and putIn() methods on SVG.ElementSVG.A element with the link()pause() and play() to SVG.FXsituation objecthas() method to SVG.Setwidth() and height() as setter and getter methods on all shapesreplace() method to elementsradius() method to SVG.Rect and SVG.EllipseSVG('drawing').fixSubPixelOffset())