SVG
SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional vector graphics. Unlike raster images (like JPEG or PNG), SVGs are made of mathematical commands, allowing them to scale perfectly to any size without losing quality.
SVG Tutorial
New to SVG? Start here to learn everything from basic shapes to advanced filters and animations.
- 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
Why Use SVG?
- Scalability: SVGs look crisp on any screen resolution, from mobile phones to giant retina displays.
- Performance: Simple icons and illustrations are often much smaller than equivalent pixel-based images.
- Accessibility: SVGs are readable by screen readers and can be indexed by search engines.
- Styling & Animation: You can change colors, strokes, and positions using CSS and JavaScript.
Ready to start building? Check out our complete SVG Tutorial.