SVG Code Editor
SVG Source Code
Live Preview
Vector Engineering Manual
Scalable Vector Graphics (SVG): Coordinate Models, Path Geometry & Modern Web Optimization
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Unlike raster images (PNG, JPEG, WebP) that store fixed pixel grids, SVGs use mathematical equations to describe geometric shapes, maintaining infinite resolution across high-DPI displays.
Coordinate System & viewBox
The viewBox defines the viewport canvas coordinate frame. Attributes like preserveAspectRatio="xMidYMid meet" control uniform scaling across variable device viewports.
Path Syntax & Bézier Curves
The <path d="..."> element is the most versatile SVG primitive, rendering straight segments, quadratic curves, and smooth cubic Bézier curves through compact single-letter instructions.
CSS Styling & currentColor
SVGs embedded inline inherit CSS variables and text colors through fill="currentColor", enabling seamless theme switches between Light and Dark modes.
Essential SVG Path Command Reference
| Command | Syntax | Description & Coordinate Behavior |
|---|---|---|
M / m | M x y | Move cursor without drawing. Uppercase indicates absolute coordinates; lowercase indicates relative. |
L / l | L x y | Draw a straight line from current point to target (x, y). |
H / V | H x / V y | Draw pure horizontal or vertical lines without needing paired coordinates. |
C / c | C x1 y1, x2 y2, x y | Cubic Bézier curve with two control points (x1, y1) and (x2, y2), terminating at (x, y). |
A / a | A rx ry rot large sweep x y | Elliptical Arc curve defining radii, rotation angle, large-arc-flag, and sweep direction. |
Z / z | Z | Close current subpath by drawing a straight line back to initial MoveTo point. |
Starter Vector Recipes
1. Animated Circular Meter with Gradients
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4f46e5" />
<stop offset="100%" stop-color="#06b6d4" />
</linearGradient>
</defs>
<!-- Background Track -->
<circle cx="60" cy="60" r="50" fill="none" stroke="#e2e8f0" stroke-width="10" />
<!-- Dynamic Progress Bar -->
<circle cx="60" cy="60" r="50" fill="none" stroke="url(#grad)" stroke-width="10"
stroke-linecap="round" stroke-dasharray="314.16" stroke-dashoffset="94.2"
transform="rotate(-90 60 60)" />
<!-- Center Value Label -->
<text x="60" y="65" text-anchor="middle" font-size="18" font-family="sans-serif" font-weight="bold" fill="#1e293b">
70%
</text>
</svg>2. Responsive Wave Divider for Modern Landing Pages
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0,32L60,42.7C120,53,240,75,360,69.3C480,64,600,32,720,26.7C840,21,960,43,1080,53.3C1200,64,1320,64,1380,64L1440,64L1440,120L0,120Z"
fill="#0f172a" />
</svg>SVG Best Practices vs Common Traps
Production Best Practices
- Always include a descriptive
viewBoxrather than fixed pixel dimensions alone. - Use
fill="currentColor"for icons so they inherit CSS font colors automatically. - Group repeated graphic definitions inside
<defs>and reuse via<use href="#id">. - Minify SVGs with SVGO to purge unnecessary vector editor metadata.
Common SVG Pitfalls
- Omitting
viewBox, causing SVGs to clip or overflow uncontrollably on mobile viewports. - Using complex raster bitmap images embedded as base64 inside SVG markup, drastically bloating bundle sizes.
- Forgetting to sanitize user-submitted SVGs, which could contain malicious
<script>tags (XSS vulnerability). - Deeply nested transformations that degrade browser rendering performance.
Frequently Asked Questions (FAQs)
The viewBox attribute defines the internal coordinate system and aspect ratio of an SVG using four values: min-x, min-y, width, and height (e.g., viewBox="0 0 100 100"). When paired with CSS width and height set to 100%, the browser automatically scales all shapes, strokes, and coordinates proportionally to fit any screen resolution without pixelation.
The <path> element uses the 'd' (data) attribute containing cursor commands: M moves the pen to (x, y), L draws a straight line, C creates a cubic Bézier curve with two control points, S draws a smooth connected cubic curve, Q creates a quadratic curve with one control point, A creates an elliptical arc, and Z closes the current subpath back to its origin.
By setting stroke-dasharray equal to the total length of the path (obtainable via path.getTotalLength()) and transitioning stroke-dashoffset from that length down to 0, you create a self-drawing line animation. This technique is widely used for loading spinners, signature animations, and interactive SVG charts.
Clean up unwanted editor metadata (from Illustrator or Inkscape), collapse redundant <g> groupings, round excessive coordinate decimal places to 2 points, inline critical gradients, and pass SVGs through an optimization tool like SVGO. Properly minified SVGs often reduce file weight by 60% to 80%.
For informative SVGs, add role="img" to the <svg> element, include a descriptive <title id="svg-title"> tag, and bind it using aria-labelledby="svg-title". For purely decorative icons, mark them with aria-hidden="true" to prevent screen reader clutter.
Explore Related Tools
Hand-picked utilities and calculators related to this tool.
