Mobile App Icons: SVG Best Practices für iOS und Android

Jeder Mobile-Entwickler kennt diesen Moment: Du fügst ein wunderschön designtes Icon in deine App ein, baust sie, startest den Simulator — und siehst eine unscharfe, falsch ausgerichtete oder komplett unsichtbare Form. Das Icon sah in Figma makellos aus, im Browser perfekt. Aber auf einem echten Gerät ging etwas schief.

Die Lücke zwischen dem Designen eines SVG-Icons und dem Ausliefern in einer nativen Mobile App ist größer als die meisten Teams denken. iOS und Android verarbeiten Vektor-Assets über völlig unterschiedliche Pipelines.

Warum SVG-Icons für Mobile wichtig sind

Mobile Bildschirme gibt es in einer schwindelerregenden Vielfalt an Größen und Pixeldichten. Ein modernes Android-Gerät kann mit 1x, 1,5x, 2x, 3x oder sogar 4x Dichte laufen. iPhones kommen mit 2x und 3x.

SVG-Icons lösen das Problem, indem sie Formen mathematisch definieren. Eine Datei, unendliche Auflösung.

Vorteile einer gut aufgebauten Pipeline:

• Kleinere App-Bundles — ein Vektor-Asset ersetzt 4-5 Raster-Exporte
• Pixel-perfektes Rendering bei jeder Bildschirmdichte
• Einfachere Wartung — eine Quelldatei aktualisieren, alle Targets neu generieren
• Bessere Barrierefreiheit — Vektorformen können semantische Metadaten tragen
• Zukunftssicher — kein Re-Export bei neuen Bildschirmdichten

SVGs für Mobile Export vorbereiten

Die Saubere-SVG-Checkliste

1. Alle Transformationen abflachen. CSS- und SVG-Transforms in Gruppenelementen werden manchmal von Mobile-Konvertern ignoriert.

2. Alle Konturen vektorisieren. Androids VectorDrawable-Format hat begrenzten Stroke-Support. Konvertiere Konturen zu gefüllten Pfaden.

3. Versteckte Ebenen und Metadaten entfernen.

4. Einheitlichen viewBox verwenden. Standardisiere auf 0 0 24 24 für UI-Icons.

5. Pfade vereinfachen. Weniger Punkte = kleinere Dateien, schnelleres Rendering.

Beispiel eines korrekt bereinigten Icon-SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
        fill="currentColor"/>
</svg>

iOS: Asset Catalogs und PDF-Vektoren

Apples empfohlener Ansatz für Vektor-Icons ist die Verwendung von PDF-Assets in Xcode Asset Catalogs. Seit Xcode 12 unterstützt Apple auch SVG-Assets direkt, aber PDF bleibt der bewährtere Weg.

Vektor-Assets in Xcode einrichten

1. Öffne deinen Asset Catalog (.xcassets)
2. Erstelle ein neues Image Set
3. Im Attributinspektor setze Scales auf "Single Scale"
4. Setze Resizing auf "Preserve Vector Data"
5. Ziehe deine PDF- oder SVG-Datei hinein

<!-- Contents.json für ein Vektor-Asset -->
{
  "images" : [
    {
      "filename" : "icon-settings.svg",
      "idiom" : "universal"
    }
  ],
  "properties" : {
    "preserves-vector-representation" : true
  }
}

iOS Icon-Größen

Android: Vector Drawables

Android verarbeitet Vektor-Icons über sein eigenes XML-Format VectorDrawable — im Wesentlichen eine SVG-Teilmenge.

<!-- res/drawable/ic_check_circle.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tintMode="src_in"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zm-2,15l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
</vector>

<ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    app:srcCompat="@drawable/ic_check_circle"
    android:contentDescription="@string/check_icon_desc" />

Android Icon-Größen Referenz

Automatisierte Icon-Pipeline

Schritt 1: Quell-SVG optimieren

/* Beispiel SVGO-Konfiguration (svgo.config.js) */
module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions',
    'removeXMLNS',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-*', 'class']
      }
    },
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [
          { xmlns: 'http://www.w3.org/2000/svg' }
        ]
      }
    }
  ]
};

Schritt 2: Plattform-Assets generieren

• PDF für iOS (mit svgexport oder cairosvg)
• VectorDrawable XML für Android (mit svg2vectordrawable)
• Optimiertes SVG für Web/PWA

Schritt 3: Output validieren

• Dateigrößen prüfen (alles über 5KB markieren)
• ViewBox-Konsistenz überprüfen
• Nicht unterstützte Elemente scannen
• Bei Zielgrößen rendern und mit Referenz-Screenshots vergleichen

Häufige Fehler und Korrekturen

1. Konturen statt Füllungen verwenden

Korrektur: Konvertiere alle Konturen zu Füllungen vor dem Export.

2. Nicht-standardisierter ViewBox

Korrektur: Standardisiere auf 0 0 24 24.

3. Eingebettete Schriften und Text

Korrektur: Konvertiere allen Text in Pfade. Immer. Keine Ausnahmen.

4. Dark Mode vergessen

Korrektur: Verwende currentColor als Füllwert. Auf iOS Template-Rendering-Modus. Auf Android android:tint.

5. Barrierefreiheit ignorieren

Korrektur: Immer contentDescription auf Android und accessibilityLabel auf iOS setzen.

Performance-Überlegungen

Alles zusammenbringen

1. Designe Icons auf einem standardisierten Raster (24x24 empfohlen) mit gefüllten Pfaden
2. Bereinige das SVG — Transforms abflachen, Konturen vektorisieren, Metadaten entfernen, mit SVGO optimieren
3. Konvertiere in Plattformformate — PDF/SVG für iOS Asset Catalogs, VectorDrawable XML für Android
4. Validiere — Dateigrößen prüfen, bei Zielgrößen rendern, Barrierefreiheit-Labels überprüfen
5. Automatisiere — in deine CI/CD integrieren

Wenn du mit bestehenden Raster-Icons arbeitest, kann VectoSolve die schwere Arbeit übernehmen. Unsere KI-gesteuerte Vektorisierungs-Engine produziert saubere, optimierte SVGs, bereit für Mobile-Export-Pipelines.