What is Raster vs Vector Image in flutter ?

Overview

Raster images (bitmaps) are made of pixels, while vector images are made of mathematical paths. Flutter supports both, but they have different use cases, performance, and scalability.

---

Raster Images (Bitmap)

Definition

Images composed of a grid of pixels (e.g., PNG, JPEG, WebP, BMP, GIF).

Characteristics

Examples

dartCopy
// Load raster image from assets
Image.asset('assets/images/photo.png')

// Load from network
Image.network('https://example.com/image.jpg')

// Custom image widget
Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/background.png'),
      fit: BoxFit.cover,
    ),
  ),
)

Formats

When to Use

• ✅ Photos (landscapes, portraits)
• ✅ Complex graphics (artwork, screenshots)
• ✅ Textures (backgrounds, patterns)
• ❌ Icons (use SVG instead)
• ❌ Logos (use SVG instead)

---

Vector Images

Definition

Images defined by mathematical paths (lines, curves) instead of pixels (e.g., SVG).

Characteristics

Flutter Support

Flutter doesn't natively support SVG. Use flutter_svg package.

yamlCopy
dependencies:
  flutter_svg: ^2.0.0

Examples

dartCopy
import 'package:flutter_svg/flutter_svg.dart';

// Load SVG from assets
SvgPicture.asset(
  'assets/icons/logo.svg',
  width: 100,
  height: 100,
  color: Colors.blue, // Tint SVG
)

// Load SVG from network
SvgPicture.network(
  'https://example.com/icon.svg
  placeholderBuilder: (context) => CircularProgressIndicator(),
)

// Custom color
SvgPicture.asset(
  'assets/icons/star.svg',
  colorFilter: ColorFilter.mode(Colors.yellow, BlendMode.srcIn),
)

When to Use

• ✅ Icons (app icons, UI icons)
• ✅ Logos (company logos, branding)
• ✅ Simple illustrations (geometric shapes, diagrams)
• ✅ Responsive UI (scale to any size)
• ❌ Photos (not suitable for complex images)
• ❌ Complex graphics (use raster instead)

---

Comparison Table

---

Scaling Comparison

Raster Image (PNG)

dartCopy
// 100x100 PNG scaled to 500x500
Image.asset(
  'assets/icons/icon.png',
  width: 500,
  height: 500,
)
// ❌ Result: Blurry, pixelated

Vector Image (SVG)

dartCopy
// SVG scaled to any size
SvgPicture.asset(
  'assets/icons/icon.svg',
  width: 500,
  height: 500,
)
// ✅ Result: Sharp, crisp

---

Performance Considerations

Raster Images

dartCopy
// ❌ Loading large images without optimization
Image.network('https://example.com/10mb.jpg') // Slow!

// ✅ Use cached_network_image
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

// ✅ Specify dimensions
Image.network(
  'https://example.com/image.jpg
  width: 300,
  height: 200,
  fit: BoxFit.cover,
)

Vector Images (SVG)

dartCopy
// ✅ SVGs are lightweight and performant
SvgPicture.asset(
  'assets/icons/icon.svg',
  width: 100,
  height: 100,
)

// ⚠️ Complex SVGs can be slow (many paths)
// Use raster for very complex graphics

---

Converting Between Formats

Raster → Vector (Not Recommended)

• Use tools like Adobe Illustrator's "Image Trace"
• Quality depends on original image

Vector → Raster

bashCopy
# Convert SVG to PNG using Inkscape
inkscape icon.svg --export-png=icon.png --export-width=512

---

File Size Comparison

Example: App icon (100x100)

Winner: SVG (smallest file size)

---

Use Cases

Raster

Profile pictures:

dartCopy
CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://example.com/profile.jpg'),
)

Background images:

dartCopy
Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/background.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

Vector

App icons:

dartCopy
BottomNavigationBarItem(
  icon: SvgPicture.asset('assets/icons/home.svg', width: 24),
  label: 'Home',
)

Logos:

dartCopy
AppBar(
  title: SvgPicture.asset('assets/images/logo.svg', height: 40),
)

---

Best Practices

dartCopy
// ✅ Use SVG for icons and logos
SvgPicture.asset('assets/icons/icon.svg')

// ✅ Use WebP for photos (smaller than PNG/JPEG)
Image.asset('assets/images/photo.webp')

// ✅ Provide multiple resolutions for raster images (1x, 2x, 3x)
assets/
  images/
    logo.png
    2.0x/logo.png
    3.0x/logo.png

// ✅ Optimize raster images before adding to app
// Use tools like TinyPNG, ImageOptim

// ❌ Don't use raster for icons (use SVG)
// Image.asset('assets/icons/icon.png') ❌

// ❌ Don't scale small raster images to large sizes
// Image.asset('assets/icons/icon.png', width: 500) ❌

---

Summary

Recommendation:

• Use SVG for icons, logos, and simple graphics
• Use WebP or PNG for photos and complex images

Learn more:

• flutter_svg Package
• Image Optimization