svg.md

SVG

SVGator & HTML 2 SVG are nice.

Links

• Zdog - Flat, round, designer-friendly pseudo-3D engine. (React bindings)
• Rough.js - Create graphics with a hand-drawn, sketchy, appearance. (Web)
• 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) (HN)
• 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 <use> (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) (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.
• SVG Wave - Tiny, customizable gradient SVG wave generator. (Code)
• Too Many SVGs Clogging Up Your Markup? Try use. (2021)
• SVG Explained in 100 Seconds (2021)
• Yogurt Layout - Small JS layout computation library, to organize space in SVGs and canvases.
• Haikei - Generate unique SVG design assets.
• Warp SVG Online - Warp and distort SVG files online. (Code)
• SVG Generators (2021)
• Make Awesome SVG Animations with CSS (2021) (Code)
• SVG Color Matrix Mixer
• DOM to SVG - Library to convert a given HTML DOM node into an accessible SVG "screenshot".
• Swipey image grids (2021) (Tweet)
• SVG Essentials & Animation Course (Code)
• svgpath - SVG path low level transformations toolkit.
• kld-intersections - Library of intersection algorithms covering all SVG shape types.
• SVG Loader - Plug 'n Play external SVG loader. (Article)
• Boring Avatars - React library to generate custom avatars. (Code) (HN)
• svgj - Quickly converts .svg files into JSX.
• text-to-svg - Convert text to SVG path without native dependence.
• Blobs - Random blob generation and animation. (Web)
• LunaSVG - Standalone SVG rendering library in C++.
• Rune.js - JavaScript library for programming graphic design systems with SVG. (Web)
• SVG Loaders - Loading icons and small animations built with pure SVG. (Code)
• Hero Patterns - Free repeatable SVG background patterns for your web projects.
• Polymorph - Morph SVG Paths. (Docs)
• scribby - JavaScript library which lets users draw simple "scribbles" on a web page.
• Fire SVG animations (SMIL) when the SVG is visible (2021)
• Drauu - Headless SVG-based drawboard in browser. (Code)
• svg-pan-zoom - JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks.
• Basic Pattern Repository - Simple patterns for <use>. Just SVG - for your delight. (Code)
• Which SVG technique performs best for way too many icons? (2021)
• svgen - Tool for working with scalable vector graphics.
• tldraw/svg - SVG utility functions used by tldraw.
• VTracer - Raster to Vector Graphics Converter. (Code)
• llline - Smooth SVG Line/Stroke Generator.
• fffuel - Free SVG generators, web design tools & modern HTML templates.
• Scour - SVG optimizer/cleaner written in Python that reduces the size of scalable vector graphics by optimizing structure and removing unnecessary data.
• Flip, Invert, and Reverse (2021) - 3 kinds of transformations for the SVG path commands.
• resvg-js - High-performance SVG renderer, powered by Rust based resvg and napi-rs.
• SVGcode - Convert raster images to SVG vector graphics. (Article) (Code) (Video)
• Pablo - Lightweight, expressive JavaScript SVG library. (Web) (HN)
• shape2path - Convert SVG shapes to SVG paths.
• SVG.js - Lightweight library for manipulating and animating SVG.
• Country Flags in SVG (Code)
• SVG Silh - Free SVG Image & Icon.
• svgson - Transform SVG files to JSON notation.
• goodgraphics - Library for scripting SVGs.
• svg-path-reverse - SVG path reversal library.
• png2svg - Go module and command line utility for converting small PNG images to SVG Tiny 1.2.
• SVGO Components - Transform SVG into components for various frameworks.
• foosvg - SVG rendering library in pure Rust.
• Cubic Bézier: From Math to Motion (2021) (HN)
• svgexport - SVG to PNG/JPEG command-line tool and Node.js module.
• svg - Go library for parsing svg files.
• three-plotter-renderer - SVG renderer with occlusion for plotters and SVG editors.
• WasmSVGGraphics - Rust library for rendering SVG Graphics with WASM.
• TinyVG - Challenger to the throne of vector graphics. (Article) (HN) (Code) (Spec) (Lobsters)
• svg2png-wasm - SVG to PNG converter JS library made with WASM + resvg.
• Katachidraw - SVG based drawing tool and react-native component.
• Using mask as clip-path (2022) (Tweet)
• oksvg - Partial implementation of SVG 2.0 specification in Go.
• SuperShields - Smart, Lua-powered SVG status badges. (HN)
• myScale - Quick SVG Icon Resizer. (Code)
• Gradient Badge - Badge generator with color gradient support. (Code)
• PlutoSVG - Tiny SVG rendering library in C.
• How to use SVG filters
• Rasterx - SVG 2.0 path compliant rasterizer that can use either the Go vector or a derivative of the freetype anti-aliaser.
• svg_stack - Combine multiple SVG elements into a single SVG element.
• svgasm - SVG animation from multiple SVGs or single GIF using tracer.
• svg2rough.js - Utilizes Rough.js to convert an SVG to a hand-drawn visualization.
• Ideal SVG exports
• Chunky SVG - Elixir library for generating SVG images.
• svg-sprite - Low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types.
• SVG passthrough precision (HN)
• SVG to TS - Build performant SVG icon libraries by converting raw SVG files to TypeScript that is optimized for modern tree shaking mechanisms.
• SVG Working Group specifications
• SVGPathCommander - ES6+ JavaScript tools for processing and manipulating SVG path data.
• svgstore - Combines multiple SVG files into one.
• Pattern Fills - Collection of SVG patterns and build scripts that allow utilizing them in SVG, CSS and D3. (Code)
• Magical SVG Techniques (2022)
• How to use P3 colors with SVGs (2022)
• SVGator - Free SVG Animation Creator Online - No Coding.
• SVG Generator - Online SVG Graphics Generation with the ability to export to SVG. (Code)
• SVG Spinners
• React Sketch Canvas - Freehand vector drawing component for React using SVG as canvas.
• SVGPS - Converts your icons into a single JSON file that is ready to use in your frontend or mobile projects. (Code)
• svg-path-morph - Smoothly interpolate between variations of SVG paths.
• Mini SVG data: URI - Small, efficient encoding of SVG data URIs for CSS, HTML, etc.
• Heazy - Generate stylish SVG design assets with ease. (Code)
• ASCIIToSVG - Create beautiful SVG diagrams from ASCII art.
• picosvg - Helps simplify SVG files. Intended for use as part of a font build.
• svg-hush - Make arbitrary SVG files as benign and safe to serve as images in other common Web file formats.
• Visualizing SVG viewbox
• DgrmJS - JavaScript library for creating SVG flow diagrams.
• SVG Tiler - Tool for drawing diagrams on a grid, combining grids of SVGs into a big SVG figure.
• svgpathtools - Collection of tools for manipulating and analyzing SVG Path objects and Bezier curves.
• Experimenting A New Syntax To Write SVG (2022) (HN)
• svg-path-bounds - Retrieve bounding box from svg path data.
• Pattern Monster - SVG Pattern Generator. (Code)
• SVG playground (Code)
• Satori - Convert HTML and CSS to SVG. (HN)
• SVG sprites: old-school, modern, unknown, and forgotten (2022)
• GIOSVG - SVG in Go.
• SVG text layout for Krita (2022)
• occult - vpype plug-in to remove occulted lines in SVG files.
• rasterize-svg - Rasterize SVG Elements for Download as PNG.
• gkurve: simpler vector graphics - Stephen Gutekanst (2022)
• svg-halftone - Tool for converting raster images to SVG halftone patterns. (Code)
• html2svg - Convert HTML and canvas to SVG using Chromium. (Forking Chrome to turn HTML into SVG) (HN)
• SSVG: Scalable Scalable Vector Graphics - Library to speed up interactive svg-based data visualizations by transforming them into canvases.
• vectormaker - Convert PNG-to-SVG Vectors. (Code)
• SVG text to path - Convert SVG nodes to vector font-free elements.
• Svgl - Beautiful library with SVG logos. (Code)
• Online SVG Animation Creator (Reddit)