SVG in WPF: renderer o disegno XAML?

Un SVG si apre nel browser, ma inserire il suo nome di file in un Image WPF non offre la stessa procedura di rendering. Inizia scegliendo cosa riceverà effettivamente l'applicazione: SVG elaborato da una libreria, oggetti di disegno WPF nativi o un'esportazione raster.

I codec di immagini integrati di WPF includono PNG e JPEG, ma non elencano SVG. Il controllo Image può visualizzare anche un DrawingImage, quindi una visualizzazione vettoriale non deve necessariamente significare caricamento diretto di un file SVG. Microsoft documenta questi come metodi separati di gestione delle immagini e sorgente di disegno.

Questa guida usa un'icona originale di segnalibro per rendere concreta la scelta. SVG e XAML sotto sono stati scritti a mano; non sono una valutazione delle prestazioni di un convertitore né una cattura di un'applicazione Windows.

Scegli la rappresentazione prima di cambiare il file

Queste scelte riguardano l'oggetto visualizzato dall'applicazione. Non decidono se il progettista debba conservare un originale SVG modificabile. Conservalo anche se l'app riceve un PNG.

Prova prima un piccolo DrawingImage nativo

Per un'icona semplice, un disegno scritto a mano offre un riferimento utile senza introdurre un parser SVG. Microsoft mostra la struttura: imposta Image.Source a un DrawingImage, poi assegna il disegno alla sua proprietà Drawing. Il seguente esempio originale segue quel modello documentato.

Ecco il disegno SVG: un segnalibro verde petrolio e un cerchio corallo separato. Salvalo come bookmark.svg se vuoi un sorgente da confrontare nell'editor.

<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>

Inserisci questo Image nel contenitore di disposizione di una finestra WPF esistente, come un 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>

I due oggetti di disegno visibili descrivono separatamente segnalibro e cerchio. Il rettangolo trasparente stabilisce i limiti completi del disegno di 120 per 80 dell'esempio, incluso il margine vuoto intorno alla grafica. Non ritaglia la geometria successiva e non trasforma lo XAML in un documento SVG.

Le coordinate sono scelte deliberate di creazione. Confronta i due frammenti: il segnalibro usa gli stessi punti e il cerchio lo stesso centro e raggio. È una piccola traduzione manuale che puoi esaminare, non una ricetta per tradurre ogni funzionalità SVG in XAML.

I file sorgente sono stati controllati come XML, ma questo esempio non è stato compilato né renderizzato in un'applicazione Windows WPF. Provalo nel tuo progetto prima di adottarlo.

Controlla limiti e pennelli prima di renderlo riutilizzabile

Inizia dalle dimensioni fornite. Conferma che l'incavo inferiore del segnalibro rimanga visibile e il cerchio separato. Prova poi uno spazio di disposizione più largo o più alto. Stretch="Uniform" conserva le proporzioni adattandosi all'area disponibile, come descritto nelle indicazioni Microsoft sul ridimensionamento delle immagini.

Cambia il valore corallo di Brush con un altro colore. È una modifica intenzionale di un oggetto di disegno nativo; non dimostra che parti SVG arbitrarie importate offrano gli stessi controlli comodi.

Se il disegno sembra decentrato, confrontane i limiti con il viewBox dell'SVG e i margini vuoti. Una sagoma corretta può comunque occupare una frazione diversa dello spazio assegnato nella disposizione. Mantieni questo semplice riferimento mentre introduci la grafica finale.

Usa un renderer quando l'input rimane SVG

Quando mantenere a mano geometria nativa è poco pratico, valuta una libreria che legga esplicitamente SVG per WPF. Il pacchetto SharpVectors.Wpf fornisce componenti di analisi, conversione e visualizzazione SVG. La pagina del pacchetto è il luogo appropriato per controllare versione attuale, framework di destinazione e dipendenze prima di aggiungerlo a un progetto.

La documentazione introduttiva di SharpVectors descrive la conversione in oggetti di disegno WPF ed esempi di visualizzazione basata su immagini. È quindi un metodo diverso dal chiedere alla normale procedura bitmap di decodificare il nome di un file SVG.

Usa il segnalibro originale come primo input della libreria, poi sostituiscilo con la grafica effettiva. Mantieni separati questi controlli:

1. Caricamento: l'esempio scelto risolve il file o la risorsa dell'applicazione nel progetto?
2. Rappresentazione: l'API restituisce oggetti di disegno, produce XAML o renderizza una bitmap per il tuo caso d'uso?
3. Aspetto: incavo, cerchio separato, colori e margini vuoti sono corretti nell'applicazione in esecuzione?
4. Distribuzione: il risultato richiede l'assembly di runtime della libreria o altre risorse sulla macchina di destinazione?

Segui gli esempi corrispondenti alla versione installata. SharpVectors documenta un'impostazione IncludeRuntime, indica TextAsGeometry come deprecato e segnala cambiamenti di namespace per la versione 2.0. Sono motivi per esaminare i vecchi frammenti prima di copiarne le impostazioni, non per presumere che una configurazione di conversione rimanga appropriata indefinitamente. Documentazione SharpVectors

Per un logo con scritte, ispeziona l'output effettivo di destinazione oltre al sorgente. La nostra guida alle variazioni dei caratteri SVG spiega la differenza fra testo dipendente dai caratteri e scritte mantenute come contorni. Convertire il testo può cambiare ciò che rimane modificabile, quindi conserva il file originale del progetto.

Non prendere SvgImageSource dal framework XAML sbagliato

Una ricerca di questo problema può portare al riferimento Microsoft SvgImageSource. La documentazione della classe UWP colloca quel tipo in Windows.UI.Xaml.Media.Imaging. È un'API diversa dai controlli e dalle classi multimediali System.Windows di WPF.

Controlla il framework indicato da un esempio prima di aggiungere un namespace o un pacchetto. Un markup XAML simile non rende una sorgente immagine UWP o WinUI una funzionalità integrata di WPF. Una soluzione per un altro framework può essere valida lì e comunque sbagliata per il tuo progetto desktop.

Decidi se basta un PNG

Un'esportazione PNG è una scelta ragionevole di consegna quando le dimensioni richieste sono note e l'applicazione non deve modificare la geometria. Esporta per quelle dimensioni, confronta i bordi trasparenti sullo sfondo effettivo e ispeziona l'uso alle dimensioni massime. Aumentare le dimensioni di disposizione di una bitmap non ricrea i tracciati sorgente.

Controlla inoltre cosa contiene l'SVG prima di dedicare tempo a una libreria di rendering. Se incorpora soltanto un'immagine raster, importare il contenitore non renderà quell'immagine geometria modificabile. La guida ai raster incorporati negli SVG mostra cosa ispezionare. Per una raccolta di icone, usa gli stessi controlli di margini e sagome in tutto l'insieme; la nostra procedura di preparazione delle icone UI tratta quella fase grafica.

Se il segnalibro o il logo esiste ormai soltanto come PNG o JPG, la procedura da immagine a vettore di PerfectVector può aiutare a preparare un candidato SVG modificabile. Ispeziona sagoma recuperata, incavo e dettagli separati prima di scegliere un metodo di consegna WPF. La vettorializzazione prepara grafica; non installa un renderer WPF e non garantisce una conversione in XAML nativo.

La guida più ampia alla vettorializzazione delle immagini spiega quel passaggio di recupero del sorgente. Una volta pronto il sorgente, i controlli dell'applicazione vanno comunque svolti in WPF.

FAQ

Image di WPF può caricare direttamente un file SVG? I codec di immagini integrati documentati di WPF non includono SVG. Usa una libreria capace di gestire SVG, fornisci oggetti di disegno nativi tramite DrawingImage oppure fornisci un formato raster supportato come PNG.

DrawingImage è la stessa cosa di un file SVG? No. DrawingImage visualizza oggetti di disegno WPF. Una libreria SVG può creare quegli oggetti, oppure puoi crearli direttamente, come nel piccolo esempio qui.

Posso usare l'esempio UWP SvgImageSource in WPF? Non trattarlo come un'API integrata di WPF. Il riferimento UWP appartiene a namespace e framework diversi; scegli codice e dipendenze per l'applicazione effettiva.

Convertire un SVG in XAML conserverà ogni effetto? Non presumerlo. Controlla le capacità documentate del convertitore e ispeziona la grafica nell'applicazione di destinazione, inclusi testo, limiti, forme separate ed effetti.

Fonti

1. Microsoft — Panoramica delle immagini WPF — Formati bitmap integrati e comportamento di ridimensionamento delle immagini.
2. Microsoft — Usare un disegno come sorgente immagine — DrawingImage nativo e struttura degli oggetti di disegno.
3. SharpVectors — Introduzione — Conversione di disegni WPF, impostazioni runtime e avvertenze di migrazione documentate.
4. NuGet — SharpVectors.Wpf — Identità attuale del pacchetto e informazioni di compatibilità.
5. Microsoft — Classe UWP SvgImageSource — Confine fra framework e namespace per un'API spesso confusa.

Scegli un metodo WPF e confronta un piccolo disegno prima di sostituire l'intero insieme di risorse. Se la grafica raster richiede recupero, prepara un candidato SVG modificabile, ispeziona le forme e prova poi la rappresentazione scelta nell'applicazione.