Image Handling in .NET MAUI (Android/iOS)

For .NET MAUI, the approach to handling images is different and more streamlined than Xamarin.Forms. Here's what you need to know:

SVG vs. Bitmap Images in MAUI

Yes, you can (and should) primarily use SVG images in MAUI because:

• MAUI has built-in SVG support (via Microsoft.Maui.Graphics)

• SVGs scale perfectly to any resolution

• Single file maintenance (no need for multiple density versions)

• Smaller app size (one file instead of multiple bitmaps)

Recommended Approach

1. Use SVG as your primary format for icons, logos, and simple graphics

2. Use PNG only when necessary (for complex images, photos, or when SVG rendering isn't perfect)

3. For PNGs, provide 1x-3x versions (MAUI handles scaling better than Xamarin)

Image Sizes for MAUI

Unlike Xamarin.Forms, you don't need to provide all those density-specific versions. MAUI recommends:

For SVG:

• Single SVG file in your Resources/Images folder

• MAUI will automatically scale it appropriately

For PNG (when needed):

text

myimage.png       (1x - baseline)
myimage@2x.png    (2x)
myimage@3x.png    (3x)

Folder Structure

Place your images in:

text

Resources/
  Images/
    logo.svg
    icon.png
    icon@2x.png
    icon@3x.png

Usage in XAML

xml

<Image Source="logo.svg" WidthRequest="200" HeightRequest="100"/>
<!-- or -->
<Image Source="icon.png"/>

When to Use Multiple PNG Versions

Consider providing multiple PNG versions when:

1. The image contains photographic content

2. The SVG renders poorly on some devices

3. You need pixel-perfect rendering at specific sizes

Performance Considerations

1. SVG rendering has a small performance cost during loading (but is cached)

2. For frequently used images, consider:

   • Using PNG for better performance

   • Pre-rendering SVG to bitmap for complex graphics

Migration from Xamarin.Forms

If migrating from Xamarin.Forms:

1. Start by replacing all density-specific images with SVGs

2. Only keep multiple PNG versions where SVG doesn't work well

3. Remove all the old density folders (drawable-hdpi, etc.)

iOS/Android Specific Notes

• MAUI handles the platform-specific details for you

• No need for platform-specific image folders

• The same Resources/Images folder works for all platforms

This approach significantly simplifies your image management while maintaining high quality across all devices.