#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

<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:

#Get Started

Ready? Let's start with SVG Embedded in HTML to learn how to use SVG in web pages!