SVG Format: Scalable Vector Graphics for the Web
SVG (Scalable Vector Graphics) is an XML-based image format that describes graphics using mathematical equations rather than pixels. The result: images that scale perfectly to any size without losing quality.
Vector vs. Raster — The Key Difference
| Feature | SVG (vector) | PNG/JPG (raster) |
|---|---|---|
| Scaling | ✅ Perfect at any size | ❌ Pixelates when enlarged |
| File size | Small for simple graphics | Grows with resolution |
| Photographs | ❌ Not suitable | ✅ Ideal |
| Logos, icons, illustrations | ✅ Ideal | Acceptable |
| Text-editable | ✅ XML/code | ❌ Binary |
| Animatable with CSS/JS | ✅ Yes | ❌ No |
| Search engine indexable | ✅ Text is readable | ❌ No |
Practical rule: use SVG for logos, icons, illustrations, and data charts. Use PNG/WebP for photographs and screenshots.
Internal Structure of an SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="180" height="180"
rx="15" ry="15"
fill="#3b82f6" stroke="#1d4ed8" stroke-width="3"/>
<circle cx="100" cy="100" r="50" fill="white" opacity="0.8"/>
<text x="100" y="107" text-anchor="middle"
font-family="Arial, sans-serif" font-size="18"
font-weight="bold" fill="#1e40af">SVG</text>
</svg>
Basic Shapes
<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2"/>
<polygon points="100,10 190,190 10,190" fill="#f59e0b"/>
<ellipse cx="100" cy="60" rx="80" ry="40" fill="#10b981"/>
<path d="M 10,80 Q 95,10 180,80 T 360,80"
fill="none" stroke="#6366f1" stroke-width="3"/>
The path Command
| Command | Meaning | Example |
|---|---|---|
M x,y |
Move to | M 10,20 |
L x,y |
Line to | L 100,200 |
H x |
Horizontal line | H 150 |
V y |
Vertical line | V 80 |
C x1,y1 x2,y2 x,y |
Cubic Bézier | C 30,10 70,10 100,50 |
Q x1,y1 x,y |
Quadratic Bézier | Q 50,0 100,50 |
Z |
Close path | Z |
ViewBox and Coordinate Systems
<svg width="100%" height="auto" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#ef4444"/>
</svg>
viewBox="minX minY width height" defines the internal coordinate system. SVG scales automatically while preserving aspect ratio.
Embedding SVG in HTML
<!-- As img tag -->
<img src="logo.svg" alt="Logo" width="200" height="80">
<!-- Inline SVG — full CSS and JS access -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
<path class="icon-path" d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
</svg>
.icon-path { fill: #3b82f6; transition: fill 0.3s ease; }
.icon-path:hover { fill: #1d4ed8; }
SVG Animation
.spinner {
animation: rotate 2s linear infinite;
transform-origin: center;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
const circle = document.querySelector('#my-circle');
circle.setAttribute('fill', '#ef4444');
circle.animate(
[{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }, { transform: 'scale(1)' }],
{ duration: 800, iterations: Infinity }
);
Inkscape CLI
inkscape input.svg --export-type=png --export-dpi=300 --export-filename=output.png
inkscape input.svg --export-type=pdf --export-filename=output.pdf
inkscape input.svg --export-id=logo --export-type=png --export-filename=logo.png
inkscape input.svg --export-type=png --export-width=800 --export-filename=out-800.png
Python with CairoSVG
import cairosvg
cairosvg.svg2png(url="input.svg", write_to="output.png", output_width=800, dpi=150)
cairosvg.svg2pdf(url="input.svg", write_to="output.pdf")
svg_code = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>'
cairosvg.svg2png(bytestring=svg_code.encode(), write_to="circle.png")
svgwrite — Create SVG Programmatically
import svgwrite
dwg = svgwrite.Drawing('chart.svg', size=('400px', '300px'))
dwg.add(dwg.rect(insert=(0, 0), size=('100%', '100%'), fill='#f8fafc'))
data = [('JAN', 80), ('FEB', 120), ('MAR', 95), ('APR', 140), ('MAY', 110)]
colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
for i, (month, value) in enumerate(data):
x = 40 + i * 70
y = 250 - value
dwg.add(dwg.rect(insert=(x, y), size=(50, value), fill=colors[i], rx=4, ry=4))
dwg.add(dwg.text(month, insert=(x+25, 270), text_anchor='middle', font_size='12px'))
dwg.add(dwg.text(str(value), insert=(x+25, y-5), text_anchor='middle', font_size='11px'))
dwg.save()
Optimize with SVGO
npm install -g svgo
svgo logo.svg -o logo.min.svg
svgo -f ./icons/ -o ./icons-optimized/
Typical result: 40–70% size reduction.
When NOT to Use SVG
- Photographs → use JPEG, WebP, or AVIF
- Screenshots → PNG or WebP
- Complex gradients with many colors → JPG or PNG may be more efficient
Convert SVG Online
To convert SVG to PNG, PDF or other formats without installing software, KaijuConverter offers direct browser-based conversion.
Related conversions
Most teams that read this guide convert images in one of these directions: