SVG
SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics.
Docs
- MDN: SVG Tutorial
- MDN: SVG Element Reference
- W3C: SVG Specification
Blog Posts & Articles
- CSS-Tricks: Use and Reuse Everything in SVG, Even Animations
- CSS-Tricks: SVG Favicons and All the Fun Things We Can Do With Them
Tutorials
- SVG Tutorial
- CSS-Tricks: SVG Lodge - Comprehensive SVG guides and tutorials
- CSS-Tricks: Using SVG - Practical SVG implementation guide
- CSS-Tricks: SVG Properties and CSS - Styling SVG with CSS
- CSS-Tricks: Mega List of SVG Information - Extensive SVG resource collection
Tools
- AI
- svgmaker.io, $20 for a bunch of credits, has APIs and MCP Server.
- SVGDreamer, open source
- replicate-flux-mcp, uses Replicate
- Editors:
- Boxy SVG - SVG editor. Paid subscription to save image.
- Inkscape - Free and open source vector graphics editor. Was unable to install.
- Figma - Exports to SVG format
- Excalidraw - Exports to SVG format
- Optimization:
- SVGO - Node.js-based SVG optimizer (command-line)
- SVGOMG - Web-based GUI for SVGO optimization
- Vecta.io Nano - SVG compressor with 80% average size reduction