Unlock the Power of SVG Graphics with Graphery SVG
Graphery SVG, also known as gySVG, is a lightweight yet powerful library that simplifies the creation and manipulation of SVG graphics from JavaScript. Compatible with Vanilla JavaScript and popular frameworks like React, Vue, Svelte, Stencil, and Angular, gySVG offers a seamless way to work with SVG without compromising project performance or size.
What is SVG?
Scalable Vector Graphics (SVG) is an XML-based format used to define vector-based graphics for the web. A simple example of an SVG is a yellow circle with a green border, which can be created using a few lines of code.
Why Do We Need a New SVG Library?
Despite the existence of many SVG libraries, there was a need for a smaller and faster library that closely aligns with the SVG format. gySVG fills this gap, offering a minimized library size of 1.5 KB with gzip, significantly smaller than its predecessors. Additionally, gySVG is faster, taking only 20ms to execute, compared to 40ms for SVG.js.
Simplifying SVG Creation with gySVG
Creating a simple SVG with Vanilla JavaScript can be a daunting task, requiring many lines of code. gySVG simplifies this process through a set of lightweight methods that mirror SVG DOM attributes, properties, and methods. By using gySVG, you can create an entirely valid SVG that can be seamlessly integrated into the HTML DOM.
Browser Support
gySVG leverages the power of JavaScript proxies, which are supported by most modern browsers, including Microsoft Edge 12+, Firefox 18+, Chrome 49+, Safari 10+, and Opera 36+. Unfortunately, Internet Explorer 11 does not support proxies and cannot be integrated using polyfills or transpilers.
Getting Started with gySVG
To start using gySVG, you can either load it from a CDN or install it locally using npm. Once installed, you can reference the library and import it as an ES module or load the script version.
Understanding the SVG Element
The gySVG() function creates an SVG element and returns an object with a gySVG wrapper over that element. This object can be used to nest other elements, define its coordinate system, or establish other configuration parameters.
Configuring the ViewBox and Viewport
The .viewBox() method defines the internal position and dimensions of an SVG, while the .width() and .height() methods define the viewport. These methods are essential for creating and manipulating SVG elements.
Attaching to a DOM Element
To include the SVG within the DOM of an HTML page, use the .attachTo() method, which provides a parameter as a selector to locate the element.
Adding Nested Elements
To add elements within the SVG, use the .add() method, passing a parameter with the name of the element to create. This method returns an object that can be used to set up all the characteristics of the element.
Creating Basic Shapes with gySVG
gySVG makes it easy to create basic shapes like circles, rectangles, and more. Each shape can be customized using various methods, such as .fill(), .stroke(), and .stroke_width().
Creating Gradients and Patterns with gySVG
gySVG also supports gradients and patterns, which can be used to fill shapes. Linear and radial gradients can be created using the .linearGradient() and .radialGradient() methods, respectively. Patterns can be defined using the .pattern() method.
More Examples and Documentation
Explore more examples and documentation on gySVG, including how to create dynamic shapes, working clocks, and car racing games. Get started with gySVG today and unlock the full potential of SVG graphics!