SVG Tutorial
Learn SVG (Scalable Vector Graphics) and discover how to build crisp, responsive, and resolution-independent shapes directly in your browser.
- What is SVG?
- Create an SVG
- SVG viewBox
- SVG Rectangles
- SVG Circles & Ellipses
- SVG Lines
- SVG Polylines & Polygons
- Styling SVGs
- SVG Paths: The Basics
- SVG Paths: Curves & Arcs
- SVG Text
- SVG Text on a Path
- Grouping Elements
- Definitions & Reuse
- SVG Linear Gradients
- SVG Radial Gradients
- SVG Patterns
- SVG Transformations
- SVG Filters
- SVG Animations
SVG (Scalable Vector Graphics) is an XML-based markup language used for describing two-dimensional vector graphics. Unlike raster images (like JPEGs or PNGs) that are made of pixels, SVGs are built using mathematical formulas, meaning they can scale to any size without losing quality.
Because SVGs are essentially just text files written in markup, they are incredibly lightweight, indexable, and can even be styled and animated using CSS and JavaScript.