Tiny: the minimized library size is less than 3 KB, and this value can be reduced to 1.5 KB with gzip.
Fast: benchmarking with the excellent SVG.JS library is very good. For the same process, gySVG takes 20ms and SVG.js more than 40ms.
Powerful: you can use all attributes, properties, and methods of SVG versions 1.0, 1.1, and 2.0. The API is straightforward and very close to the SVG structure.
# Goal: reduce code complexity
const div = document.querySelector('#drawing'); const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('width', '100px'); svg.setAttribute('height', '100px'); div.appendChild(svg); const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('x', '10'); rect.setAttribute('y', '10'); rect.setAttribute('width', '90'); rect.setAttribute('height', '90'); rect.setAttribute('fill', '#F06'); svg.appendChild(rect);
gySVG simplifies the creation and manipulation through a set of very light methods that fit SVG DOM attributes, properties, and methods. This is the equivalent code write with gySVG:
const svg = gySVG().width('100px').height('100px'); const rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#f06'); svg.attachTo('#drawing');
The result is an entirely valid SVG that can be used without limitations as part of the HTML DOM.
# API style: method chaining
In gySVG, all are methods, thus, when you want to work with SVG attributes or properties, you
must use methods. For example, set an
id to an SVG element is
for getting this identification it's necessary to use
gySVG builds dynamically by proxies the methods, and these methods can be chained together to simplify successive calls. Each call returns the original wrapper, and you can include one call after another.
const svg = gySVG() .width('100%') .height('100%'); svg.add('rect') .x(10) .y(10) .width(90) .height(90) .fill('#f06');
Note: chained call is possible when calling setter methods. When a getter method (then returns a value) is called the value property is returned, it is impossible to do more chained calls.
# Browser support
The magic of gySVG is the use of
proxies allow creating the wrappers dynamically for each SVG element, reduce the library's
size, and keep the performance.
Proxy is supported by:
- Microsoft Edge 12, and later
- Firefox 18, and later
- Chrome 49, and later
- Safari 10 desktop and mobile, and beyond
- Opera 36, and later
Proxy is not supported by Internet Explorer 11 (and it's not possible to use polyfills or
transpilers for this feature). If you need compatibility with old browsers, use other excellent
# Framework support
# Server-side rendering
gySVG is ready to work both on the client and the server. This library is tested with
Node (opens new window) and JSDom (opens new window) for server-side
rendering (SSR). You can put the SVG generated into the DOM or obtain the SVG code directly
Although the functionality of gySVG is extensive, there are always some features that are not available from the beginning. This library can be extended with new functionality by plugins. In that guide, you will see some examples and learn how to create your extension step by step.