SVG Resources

Specifications & Documentation

Authoritative references for the SVG format and its integration with CSS and the DOM.

• MDN: SVG — Scalable Vector Graphics The most practical entry point: guides, tutorials, and compatibility data for SVG on the web.
• MDN: SVG element reference Complete listing of every SVG element with syntax, attributes, browser support, and examples.
• MDN: SVG attribute reference Every SVG attribute — presentation, structural, styling — with permitted values and element context.
• W3C SVG 2 Specification The full formal specification. Useful for edge-case behaviour and understanding the relationship between SVG and CSS.
• MDN: Namespaces crash course Explains the SVG XML namespace — essential background for scripting SVG with JavaScript.

Optimization Tools

SVG exported from design tools often contains redundant metadata and verbose attributes. These tools strip the bloat without affecting visual output.

• SVGOMG (web tool) Browser-based GUI for SVGO. Paste or upload an SVG, toggle individual optimization plugins, and download the result. The fastest way to optimize a single file.
• SVGO (command-line / Node) The underlying optimization engine. Run it in a build pipeline to automatically compress all SVGs during deployment.
• MDN: SVG and CSS Guidance on moving inline presentation attributes to a stylesheet — a key step in reducing file size and improving maintainability.

Editors

Tools for authoring SVG visually, without writing path data by hand.

• Inkscape Free, open-source vector editor with full SVG support. The go-to choice for creating and editing complex SVG illustrations on the desktop.
• Boxy SVG Lightweight browser-based SVG editor with a clean interface — good for quick edits without installing software.
• Figma Collaborative interface design tool. Exports individual frames or components as clean, well-structured SVG files ready for the web.

Path & Animation Helpers

Utilities and references that make working with SVG paths and motion easier.

• SVG Path Editor (yqnn) Visual, interactive path editor. Edit the d attribute of any SVG path and see the result instantly — invaluable for understanding path commands.
• Get Waves Generates smooth SVG wave shapes for page dividers and decorative elements. Exports a ready-to-paste <svg> element.
• MDN: CSS easing functions Reference for cubic-bezier(), steps(), and named easings — applicable to both CSS animations and SVG's calcMode attribute.
• MDN: animateMotion Native SVG element for moving an object along an arbitrary path — no JavaScript required.

Related Pages in This Course

SVG overlaps with several other areas covered in IWT.

• /media/svg/ — SVG tutorials index internal All 16 SVG tutorials, from shapes and paths to scripting, accessibility, and optimization.
• /media/images/ — Raster images internal When to use JPEG, PNG, WebP, and AVIF instead of SVG — formats, compression trade-offs, and responsive images.
• Data URIs (URLs section) internal How to inline an SVG directly into a CSS background-image or an <img> src attribute using data: URIs.
• SVG Reference cheatsheet internal Quick lookup for elements, path commands, presentation attributes, and common patterns.