Skip to content
/ svg Public

A tiny Javascript library intended to create and manage SVG elements in the DOM

License

Notifications You must be signed in to change notification settings

jclo/svg

Repository files navigation

SVG

NPM version GitHub last commit Github workflow Test coverage npm bundle size License

SVG is a tiny Javascript library intended to create and manage SVG elements in the DOM. SVG is designed to be embedded in another library. SVG is intended to run on ECMAScript 2015 (ES6) compliant browsers.

Quick Startup

You can create an SVG node inside a div by typing:

// SVG is built upon the prototypal pattern, you don't need the operator 'new'.
var svg = SVG('#svg');

If you have a look to the DOM, you will see:

<div id="svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
</div>

Then, you can fill your SVG node:

var svg = SVG('#svg');

// Append a rectangle:
svg
  .append('rect')
  .attr('x', 100)
  .attr('y', 100)
  .attr('width', 100)
  .attr('height', 100)
;

You get:

<div id="svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="100" y="100" width="100" height="100"></rect>
  </svg>
</div>

API

Static methods

SVG provides a set of static methods. You can use by typing:

SVG.noConflict();
Static Methods Description
noConflict returns the SVG variable to its previous owner
transformAttrToObj converts an SVG transform attributes string to an object
transformAttrToStr converts an SVG transform attributes string to an object
draw.getArc draws an arc
draw.getLine draws polygonal lines
draw.getMultipolyline draws a set of polylines

Create an SVG object:

Constructor Description
SVG('#id') creates the SVG object and insert an SVG node inside a DIV

Chaining Methods

Chaining Methods Description
firstParent moves to the first parent
parent moves to parent SVG element
previous selects the previous sibbling element
next selects the next sibbling element
select selects an SVG element
append appends an SVG element and selects it
appendBefore appends an SVG element before the reference SVG element and selects it
appendAfter appends an SVG element after the reference SVG element and selects it
appendHTML appends a foreignObject to svg and selects it
replace replaces the current SVG element
remove removes the given SVG element
removeChild removes the passed-in child element,
replaceChild replaces a child by another,
removeAllChilds removes all the children from the selected element
empty removeAllChilds alias
listen attaches an event listener to the SVG element
listenOnce attaches a fired once event listener to the SVG element
unlisten removes an event listener to the SVG element
alink adds a link attribute to the SVG selected element
attr adds attributes to the selected SVG element
rmattr removes the given attribute from the selected SVG element
text adds text to the selected SVG element
addClass adds a class value to the selected SVG element
removeClass removes a class value to the selected SVG element
toggleClass toggles a class value to the selected SVG element

chaining methods return this.

Non Chaining Methods

Non Chaining Methods Description
query returns the first matching element or null
getElement returns the selected SVG element
children returns the children HTMLCollection
getAttribute returns the attribute value
getComputedStyle returns the style applied to this element
getPropertyValue returns the value of the specified property
getSize returns the width and height of this element
getBbox returns the bounding boxes

License

MIT.

About

A tiny Javascript library intended to create and manage SVG elements in the DOM

Resources

License

Stars

Watchers

Forks

Packages

No packages published