SVG in WPF: Renderer oder XAML-Zeichnung wählen

Ein SVG öffnet sich im Browser. Seinen Dateinamen in ein WPF-Image einzutragen gibt dir aber nicht dieselbe Rendering-Pipeline. Entscheide zuerst, was die Anwendung tatsächlich erhalten soll: ein von einer Bibliothek verarbeitetes SVG, native WPF-Zeichenobjekte oder einen Rasterexport.

WPFs integrierte Bildcodecs umfassen PNG und JPEG, führen SVG aber nicht auf. Das Image-Steuerelement kann auch eine DrawingImage anzeigen. Eine Vektordarstellung muss daher nicht bedeuten, eine SVG-Datei direkt zu laden. Microsoft dokumentiert diese getrennten Wege über die Bildverarbeitung und Zeichnungen als Bildquelle.

Dieser Leitfaden macht die Entscheidung anhand eines selbst erstellten Lesezeichen-Icons konkret. Das SVG und XAML unten wurden von Hand geschrieben; sie sind weder ein Konverter-Benchmark noch eine Aufnahme einer Windows-Anwendung.

Die Darstellung wählen, bevor du die Datei änderst

Diese Entscheidungen betreffen das Objekt, das deine Anwendung anzeigt. Sie entscheiden nicht darüber, ob der Designer eine bearbeitbare SVG-Masterdatei behalten sollte. Bewahre diese auf, auch wenn die App ein PNG erhält.

Zuerst eine kleine native DrawingImage ausprobieren

Bei einem einfachen Icon bietet eine von Hand erstellte Zeichnung einen hilfreichen Ausgangspunkt, ohne einen SVG-Parser einzuführen. Microsoft zeigt den Aufbau: Setze Image.Source auf eine DrawingImage und weise die Zeichnung anschließend ihrer Eigenschaft Drawing zu. Das folgende eigene Beispiel folgt diesem dokumentierten Muster.

Hier ist das SVG-Motiv: ein petrolfarbenes Lesezeichen und ein separater korallfarbener Kreis. Speichere es als bookmark.svg, wenn du eine Quelle zum Vergleich in deinem Editor möchtest.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Platziere dieses Image im Layoutcontainer eines vorhandenen WPF-Fensters, etwa in einem Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Die beiden sichtbaren Zeichenobjekte beschreiben Lesezeichen und Kreis getrennt. Das transparente Rechteck legt die gesamten Zeichnungsgrenzen des Beispiels von 120 mal 80 fest, einschließlich des leeren Rands um die Grafik. Es beschneidet keine später hinzugefügte Geometrie und macht das XAML nicht zu einem SVG-Dokument.

Die Koordinaten sind bewusste Gestaltungsentscheidungen. Vergleiche beide Ausschnitte: Das Lesezeichen verwendet dieselben Punkte, der Kreis denselben Mittelpunkt und Radius. Das ist eine kleine manuelle Übertragung, die du prüfen kannst, keine Anleitung zur Übertragung sämtlicher SVG-Funktionen nach XAML.

Die Quelldateien wurden als XML geprüft, dieses Beispiel wurde aber nicht in einer Windows-WPF-Anwendung gebaut oder gerendert. Teste es in deinem Projekt, bevor du es übernimmst.

Grenzen und Pinsel vor der Wiederverwendung prüfen

Beginne mit der angegebenen Größe. Prüfe, ob die untere Kerbe des Lesezeichens sichtbar bleibt und der Kreis getrennt steht. Probiere danach einen breiteren oder höheren Layoutbereich. Stretch="Uniform" erhält die Proportionen und passt die Grafik in den verfügbaren Bereich ein, wie in Microsofts Hinweisen zur Bildskalierung beschrieben.

Ändere den korallfarbenen Brush-Wert in eine andere Farbe. Das ist eine gezielte Bearbeitung eines nativen Zeichenobjekts. Es belegt nicht, dass beliebige importierte SVG-Teile dieselben praktischen Steuermöglichkeiten bieten.

Wenn die Zeichnung außermittig wirkt, vergleiche ihre Grenzen mit der viewBox und den leeren Rändern des SVGs. Eine korrekte Silhouette kann trotzdem einen anderen Anteil ihres Layoutbereichs belegen. Behalte diesen einfachen Ausgangspunkt bei, während du die endgültige Grafik einführst.

Einen Renderer verwenden, wenn SVG die Eingabe bleibt

Wenn es unpraktisch ist, native Geometrie von Hand zu pflegen, prüfe eine Bibliothek, die ausdrücklich SVG für WPF liest. Das Paket SharpVectors.Wpf bietet Komponenten zum Parsen, Konvertieren und Anzeigen von SVG. Auf seiner Paketseite kannst du die aktuelle Version, Zielframeworks und Abhängigkeiten prüfen, bevor du es deinem Projekt hinzufügst.

Die Einstiegsdokumentation von SharpVectors beschreibt die Konvertierung in WPF-Zeichenobjekte und Beispiele für bildbasierte Darstellung. Das ist ein anderer Weg, als die gewöhnliche Bitmap-Pipeline einen SVG-Dateinamen dekodieren zu lassen.

Verwende das eigene Lesezeichen als erste Bibliothekseingabe und ersetze es anschließend durch deine tatsächliche Grafik. Prüfe diese Punkte getrennt:

1. Laden: Löst das gewählte Beispiel die Datei oder Anwendungsressource in deinem Projekt auf?
2. Darstellung: Liefert die API Zeichenobjekte, erzeugt sie XAML oder rendert sie für deinen Anwendungsfall eine Bitmap?
3. Erscheinungsbild: Sind Kerbe, separater Kreis, Farben und leere Ränder in der laufenden Anwendung korrekt?
4. Bereitstellung: Benötigt das Ergebnis die Laufzeitassembly der Bibliothek oder weitere Assets auf dem Zielrechner?

Folge den Beispielen, die zu deiner installierten Version passen. SharpVectors dokumentiert die Einstellung IncludeRuntime, kennzeichnet TextAsGeometry als veraltet und weist auf Namespace-Änderungen in Version 2.0 hin. Das sind Gründe, alte Ausschnitte vor dem Kopieren ihrer Einstellungen zu prüfen, statt anzunehmen, eine Konvertierungskonfiguration bleibe dauerhaft passend. SharpVectors-Dokumentation

Prüfe bei einem Logo mit Schrift sowohl die tatsächliche Zielausgabe als auch die Quelle. Unser Leitfaden zu Schriftänderungen in SVG erklärt den Unterschied zwischen Text, der Schriftarten benötigt, und Schriftzügen, die als Konturen erhalten bleiben. Die Textkonvertierung kann verändern, was bearbeitbar bleibt. Behalte daher die originale Designdatei.

SvgImageSource nicht aus dem falschen XAML-Framework übernehmen

Eine Suche nach diesem Problem kann dich zur SvgImageSource-Referenz von Microsoft führen. Die UWP-Klassendokumentation ordnet diesen Typ Windows.UI.Xaml.Media.Imaging zu. Das ist eine andere API als WPFs Steuerelemente und Medienklassen unter System.Windows.

Prüfe das im Beispiel genannte Framework, bevor du einen Namespace oder ein Paket hinzufügst. Ähnliches XAML-Markup macht eine UWP- oder WinUI-Bildquelle nicht zu einer integrierten WPF-Funktion. Eine Lösung kann im anderen Framework gültig sein und trotzdem nicht zu deinem Desktopprojekt passen.

Entscheiden, ob ein PNG ausreicht

Ein PNG-Export ist eine sinnvolle Auslieferungsoption, wenn die benötigten Größen bekannt sind und die Anwendung die Geometrie nicht bearbeiten muss. Exportiere für diese Größen, vergleiche transparente Kanten mit dem tatsächlichen Hintergrund und prüfe die größte Darstellung. Die Layoutgröße einer Bitmap zu erhöhen stellt die Quellpfade nicht wieder her.

Prüfe außerdem den Inhalt des SVGs, bevor du Zeit in eine Rendering-Bibliothek investierst. Wenn es nur ein Rasterbild einbettet, macht der Import der Hülle daraus keine bearbeitbare Geometrie. Der Leitfaden zu eingebetteten Rasterbildern in SVG zeigt, was du prüfen solltest. Verwende bei einer Icon-Sammlung dieselben Prüfungen für Ränder und Silhouetten im gesamten Set. Unser Ablauf zur Vorbereitung von UI-Icons behandelt diese Vorbereitungsphase.

Wenn das Lesezeichen oder Logo nur noch als PNG oder JPG vorliegt, kann PerfectVectors Bild-zu-Vektor-Ablauf helfen, einen bearbeitbaren SVG-Kandidaten vorzubereiten. Prüfe die rekonstruierte Silhouette, Kerbe und separaten Details, bevor du einen WPF-Auslieferungsweg wählst. Die Vektorisierung bereitet die Grafik vor; sie installiert keinen WPF-Renderer und garantiert keine native XAML-Konvertierung.

Der umfassendere Leitfaden zur Bildvektorisierung erklärt diesen Schritt zur Wiederherstellung der Quelle. Sobald diese fertig ist, müssen die Anwendungsprüfungen weiterhin in WPF stattfinden.

FAQ

Kann WPF Image eine SVG-Datei direkt laden? WPFs dokumentierte integrierte Bildcodecs umfassen SVG nicht. Verwende eine SVG-fähige Bibliothek, stelle native Zeichenobjekte über DrawingImage bereit oder liefere ein unterstütztes Rasterformat wie PNG.

Ist DrawingImage dasselbe wie eine SVG-Datei? Nein. DrawingImage zeigt WPF-Zeichenobjekte an. Eine SVG-Bibliothek kann diese erzeugen, oder du kannst sie direkt erstellen, wie im kleinen Beispiel hier.

Kann ich das UWP-Beispiel für SvgImageSource in WPF verwenden? Behandle es nicht als integrierte WPF-API. Die UWP-Referenz gehört zu einem anderen Namespace und Framework. Wähle Code und Abhängigkeiten für deine tatsächliche Anwendung.

Erhält eine Konvertierung von SVG nach XAML sämtliche Effekte? Verlasse dich nicht darauf. Prüfe die dokumentierten Fähigkeiten des Konverters und deine Grafik in der Zielanwendung, einschließlich Text, Grenzen, separater Formen und Effekte.

Quellen

1. Microsoft — Überblick über die WPF-Bildverarbeitung — Integrierte Bitmap-Formate und Verhalten bei der Bildskalierung.
2. Microsoft — Eine Zeichnung als Bildquelle verwenden — Native DrawingImage und Aufbau der Zeichenobjekte.
3. SharpVectors — Erste Schritte — WPF-Zeichnungskonvertierung, Laufzeiteinstellungen und dokumentierte Migrationshinweise.
4. NuGet — SharpVectors.Wpf — Aktuelle Paketidentität und Kompatibilitätsinformationen.
5. Microsoft — UWP-Klasse SvgImageSource — Framework- und Namespace-Grenze einer häufig verwechselten API.

Wähle einen WPF-Weg und vergleiche ein kleines Motiv, bevor du dein gesamtes Asset-Set ersetzt. Wenn du Rastergrafik rekonstruieren musst, bereite einen bearbeitbaren SVG-Kandidaten vor, prüfe die Formen und teste anschließend die gewählte Darstellung in deiner Anwendung.