SVG Format Guide: Scalable Vector Graphics for the Web

What Is SVG?

SVG (Scalable Vector Graphics) is an XML-based vector image format by the W3C. Unlike PNG or JPG (which store pixels), SVG describes images with math: lines, curves, shapes, text. The key advantage: scales infinitely without quality loss.

SVG vs PNG/JPG: When to Use Each

SVG Structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4A90E2"/>
  <text x="50" y="55" text-anchor="middle" font-size="14" fill="white">KJ</text>
</svg>

Embedding SVG in HTML

As <img>: simple but no internal CSS/JS access.

<img src="logo.svg" alt="Company logo" width="200">

Inline SVG: enables CSS, JS, and currentColor.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

SVG with currentColor

Inline SVGs inherit text color automatically:

<button style="color: #E53E3E;">
  <svg viewBox="0 0 24 24" width="20"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>
  Delete
</button>

Optimizing SVG with SVGO

npm install -g svgo
svgo logo.svg -o logo.min.svg   # reduces size 40-60%
svgo *.svg                       # all SVGs in folder

SVG Animations

.logo-circle { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

SVG Favicon with Dark Mode Support

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) { .bg{fill:#1a1a2e} .fg{fill:#fff} }
    .bg{fill:#fff} .fg{fill:#1a1a2e}
  </style>
  <rect class="bg" width="32" height="32" rx="4"/>
  <text class="fg" x="16" y="22" text-anchor="middle" font-size="18" font-weight="bold">K</text>
</svg>

Conclusion

SVG is the definitive vector format for the web: perfect scalability, small files for simple graphics, CSS/JS animations, and dark mode support. Use it for logos, icons, and non-photographic illustrations.

Advanced Use Cases

Web optimization at scale: e-commerce sites with thousands of products can reduce bandwidth costs 60-80% by migrating from JPG to AVIF or WebP. Cloudflare Images, Imgix and Cloudinary offer on-the-fly transformation based on client Accept header — serving AVIF to modern Chrome/Edge, WebP to Safari/Firefox, JPG fallback to legacy browsers. Print-ready output: converting RGB to CMYK with ICC profile (US Web Coated SWOP v2 for commercial offset, FOGRA39 for European) ensures printed colors match preview on calibrated screen. PDF/X-1a and X-4 are formats required by professional printers. Professional photography: Adobe workflow consists of RAW (camera input) → DNG (archival) → PSD (non-destructive editing) → TIFF (deliverable) → JPG/WebP (web/social). Each stage preserves different capabilities. Vector graphics: SVG is preferred for logos, icons, flat illustrations — scales infinitely without loss and animates with CSS/JavaScript. For modern UIs, icon fonts (Font Awesome) are being replaced by SVG sprites for better accessibility and customization.

Best Practices and Professional Tips

Format selection by content: photographs → JPG (quality 85-95) or WebP (quality 80-90); graphics with text/fine lines → PNG or WebP lossless; flat illustrations → SVG; UI icons → SVG; screenshots → PNG; HDR → AVIF or JPEG XL. Color profile management: always embed ICC profile in professional files (Adobe RGB for pre-press photography, sRGB for web, Display P3 for Apple ecosystem). Without embedded profile, viewers assume sRGB which can cause visible color shifts. Resolution vs size: for web display, 72 DPI is sufficient; for professional print, 300 DPI minimum. Lazy loading + responsive images: combine <img loading="lazy" srcset> with AVIF/WebP fallback chain for bandwidth savings without sacrificing UX. Metadata privacy: smartphone JPG files contain GPS, camera model, exact date — use exiftool -all= to strip before uploading to social networks if privacy matters.

Compatibility and Technical Considerations

KaijuConverter supports more than 30 image formats (JPG, PNG, WebP, AVIF, HEIC/HEIF, GIF, BMP, TIFF, SVG, ICO, PSD, RAW from multiple vendors, JPEG XL) using ImageMagick 7.x, libvips, and format-specific libraries (libpng, libjpeg-turbo, libwebp, libavif, librsvg). We process images up to 25 MB with resolutions up to 16384×16384 pixels and depths of 8/10/12/16-bit per channel. EXIF and metadata: we read all embedded information (camera, lens, GPS, capture data, ICC profile) and migrate it to output when destination format supports it — critical for professional workflows that depend on provenance tracking. HDR: we support PQ and HLG transfer functions for AVIF/JPEG XL/HEIC HDR (rec.2020 color space). Performance: a typical 5 MB JPG→WebP conversion takes 1-3 seconds; iPhone 12 Mpix HEIC→JPG takes 2-5 seconds; multi-layer PSD→PNG flat may require 5-15 seconds depending on complexity. Privacy: TLS 1.3 encryption, isolated Docker containers, automatic deletion after 2 hours with multi-pass overwrite.

Related conversions

Most teams that read this guide convert images in one of these directions:

• JPG to WEBP
• PNG to JPG
• HEIC to JPG
• PNG to WEBP
• TIFF to PNG
• RAW to JPG