SVG

Links

• Zdog - Flat, round, designer-friendly pseudo-3D engine.

• Rough.js - Create graphics with a hand-drawn, sketchy, appearance.

• SVG illustrations as React Components

• Scaling SVG Elements (Lobsters)

• Transform SVG into React Components using SVGR (2017)

• svg-to-react - Utility to convert raw SVG files into accessible and extendable React Components.

• Optimising SVGs for the Web (2020)

• Where are all the animated SVGs? (2020)

• Motion - Free, simple animated SVG editor. (Article)

• Svgbob Editor - Convert your ascii diagram scribbles into happy little SVG.

• Vecta - Powerful, online SVG editor for teams.

• OpenMoji - Open source emojis for designers, developers and everyone else. (Code)

• Visual Guide To SVG Matrix

• Curated List Of Websites For Free SVG Illustrations (2019)

• SVG Animations (Code)

• Creating a Pencil Effect in SVG (2020) (HN)

• Vivus - JavaScript library to make drawing animation on SVG. (Code)

• Canvas2Svg - Translates HTML5 Canvas draw commands to SVG.

• canvg - JavaScript SVG parser and renderer on Canvas.

• resvg - SVG rendering library in Rust.

• Creating a Gauge in React (2020)

• XVG - Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses. (Code)

• path-data-parser - SVG Path Parser.

• points-on-path - Estimate point on a SVG path.

• Practical SVG book

• How to emulate hand-drawn shapes / Algorithms behind RoughJS (2020)

• SVG for Everybody - Adds external spritemaps support to otherwise SVG-capable browsers. (Code)

• CNC Hershey Font Tool (Code)

• SVG Path Visualizer - Enter a SVG path data to visualize it and discover all its different commands.

• Nano SVG - Simple stupid SVG parser.

• Shape Divider App - Export a beautiful SVG shape divider.

• URL-encoder for SVG (Code)

• SVG Filters Playground (Code)

• Textures.js - JavaScript library for creating SVG patterns. (Web) (HN) (Example)

• SVG Caching with (2020)

• Benefits of SVG (2020)

• Free Vector Illustrations (HN)

• svg2jsx - Transform SVG into valid JSX.

• Graphical UI's with SVG and React (2020)

• SVGO - Node.js tool for optimizing SVG files.

• Lean-SVG - Optimize SVG and Flatten transforms and shapes. (Code)

• flatten-svg - Flatten SVGs into points.

• Squircley - SVG Squircle Maker. (Code) (Squircles with Vue)

• Fabric.js - JavaScript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser. (Web)

• SVG Path Editor - Online editor to create and manipulate SVG paths. (Code) (HN)

• SVG Diff - See the visual difference between two SVGs. (Code)

• diffvg - Differentiable Rasterizer for Vector Graphics. (Paper)

• Using SVGs in asset catalogs

• uhtml - Micro HTML/SVG render.

• Simple Image Vectorization (HN)

• Svglib - Pure-Python library for reading and converting SVG.

• IconPark - Transform an SVG icon into multiple themes, and generate React icons，Vue icons, SVG icons.

• PSVG - Programmable SVG. Introduces programming language features like functions, control flows, and variables.

• Loaf - Animated SVG icon library.

• vpype - Swiss-Army-knife command-line tool for plotter vector graphics.

• svg-path-properties - JavaScript alternative to getPointAtLength(t) and getTotalLength() functions. Works with Canvas objects and when Node.

• Learn SVG through 24 examples (2020)

• flowchart.js - Draws simple SVG flow chart diagrams from textual representation of the diagram. (Code)

• js-sequence-diagrams - Draws simple SVG sequence diagrams from textual representation of the diagram. (Code)

• SVGOMG - Web GUI for SVGO. (Code)

• Paths.js - Generate SVG paths for geometric shapes. (Web)

• CairoSVG - SVG converter based on Cairo. It can export SVG files to PDF, EPS, PS, and PNG files. (Web)

• SVG Crop - Remove blank space from around any SVG instantly.

• SVG Tutorial: How to Code SVG Icons by Hand (2021)

• SVG Repo - Free SVG Vectors and Icons.

• svg-injector - Fast, caching, dynamic inline SVG DOM injection library.