mz-svg

ミ☆ mzSVG ☆彡

TypeScript-based library for managing SVG in the browser and Node.js. The modular approach allows you to select only the required functions. It works well with all modern bundlers and Node.js and supports tree shaking 🌲.

Links 🔗

• Website
• Documentation

Features 🚀

• Works in browser and Node.js.
• Based on TypeScript.
• Save the SVG to the file system in Node.js, or download it as SVG, PNG, JPG, etc. in a browser environment.
• Extensive Unit Testing.

Working with path data ('d' property)

• Translate, rotate, and scale path.
• Convert path to relative or absolute commands.
• Find path bounding box.
• Minify path data.
• Beautify path data.
• Path data validation.
• Path data parser.

Create SVG elements in browser & Node.js

• Primitive shapes like path, rectangle, circle, ellipse, polygon, polyline, etc.
• Container objects like <g>, <defs>, <use>, etc.
• SVG <pattern>, <clipPath>, <mask>, etc.
• Rectangle path element.
• Star shape, flower shape.

Animation

• Create animation elements like <animate>, <animateMotion>, <animateTransform>, etc.

Documentation 🔖

Main

• TypesScript Usage
• Browser Usage
• Node.js Usage

Create SVG

• Create Svg Element
• Create Svg From String
• Get Svg As String

Shapes

• Create Path
• Create Rect
• Create Rect Path
• Create Circle
• Create Ellipse
• Create Line
• Create Polygon
• Create Polyline
• Create Star
• Create Flower

Containers

• Create Group
• Create Defs
• Create Use
• Create Pattern
• Create Clip Path
• Create Mask
• Create Symbol

Path Data

• Translate Path
• Rotate Path
• Scale Path
• Bounding Box
• Path To Relative
• Path To Absolute
• Minify Path
• Beautify Path
• Parse Path
• Validate Path

IO

• Save Svg
• Download Svg

Animation

• Create Animate
• Create Animate Motion
• Animate Motion Mpath
• Create Animate Transform

Helpers

• Append Once
• Prepend Once

Other

• Constants
• Unit Tests

---