SVG Tutorial
Welcome to the SVG (Scalable Vector Graphics) tutorial! SVG is an XML-based vector graphics format that allows you to create high-quality, scalable graphics in web pages.
What is SVG?
SVG (Scalable Vector Graphics) is an XML markup language used to describe two-dimensional vector graphics. Unlike bitmaps (like JPEG, PNG), SVG graphics can be scaled infinitely without losing quality.
SVG Advantages
- Scalability: No distortion regardless of zoom level
- Small file size: Vector graphics files are usually smaller than bitmaps
- Editable: Can be directly edited with text editors
- Searchable: Text in SVG can be indexed by search engines
- Scriptable: Can manipulate SVG elements with JavaScript
- Styleable: Can style with CSS
Simple Example
html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#3b82f6" />
</svg>This code creates a 100x100 pixel SVG canvas and draws a blue circle in the center.
Tutorial Contents
🚀 Getting Started
- SVG Embedded in HTML - Learn how to use SVG in web pages
📐 Basic Shapes
- SVG Rectangle - Draw rectangles and squares
- SVG Circle - Draw circles
- SVG Ellipse - Draw ellipses
- SVG Line - Draw straight lines
🎨 Complex Graphics
- SVG Polygon - Draw polygons
- SVG Polyline - Draw polylines
- SVG Path - Draw arbitrary shapes with paths
- SVG Text - Add text to SVG
🎭 Styles and Effects
- SVG Stroke Properties - Stroke styles detailed
- SVG Filters Introduction - Filter effects basics
- SVG Blur Effects - Create blur effects
- SVG Shadow - Add shadow effects
- SVG Linear Gradient - Create linear gradients
- SVG Radial Gradient - Create radial gradients
📚 Reference
- SVG Examples - Practical examples collection
- SVG Reference Manual - Element and attribute quick reference
Browser Support
All modern browsers support SVG:
| Browser | Supported Version |
|---|---|
| Chrome | 4+ |
| Firefox | 3+ |
| Safari | 3.2+ |
| Edge | 12+ |
| Opera | 10+ |
Get Started
Ready? Let's start with SVG Embedded in HTML to learn how to use SVG in web pages!