Matplotlib SVG: grafici e loghi come tracciati

Per mantenere un logo vettoriale all'interno di una figura Matplotlib, esporta il grafico in SVG e componilo con la geometria SVG esistente del logo. Inserire un PNG con OffsetImage può produrre un SVG che contiene un'immagine raster accanto alle linee vettoriali del grafico. La sola estensione non indica quali parti siano tracciati.

Questa guida separa le due operazioni: Matplotlib disegna il grafico dai dati e svgutils colloca un distintivo decorativo accanto ad esso. Se la grafica originale è già vettoriale, usala. Se rimane soltanto un'illustrazione raster adatta, recuperala separatamente. Mantieni i segni numerici, gli assi e le etichette nel sorgente del grafico.

Scegli cosa deve rimanere nel sorgente del grafico

Un logo è grafica; una tacca di un asse fa parte del grafico. Trattare entrambi come un'unica immagine rende più difficili le revisioni successive.

Una figura interamente vettoriale non è necessaria quando alcuni pannelli sono fotografie. Conservali come raster. L'obiettivo è mantenere il sorgente giusto per ogni componente e controllare poi il risultato assemblato.

Il riferimento savefig di Matplotlib documenta la selezione esplicita del formato di output. La sua API OffsetImage descrive un contenitore di immagini, anziché un importatore di tracciati SVG. Per la diagnosi a livello di file, leggi come individuare immagini raster all'interno di un SVG.

Cosa contengono i file consegnati

Abbiamo eseguito l'esempio con Python 3.12, Matplotlib 3.10.7 e svgutils 0.3.4. Il distintivo è un disegno originale composto da due tracciati. I quattro valori del grafico sono dati illustrativi, non un esperimento né una valutazione delle prestazioni del prodotto.

Il confronto usa lo stesso grafico in entrambi i file. A sinistra, un distintivo PNG di 32 × 32 viene inserito con OffsetImage. A destra, i suoi tracciati SVG vengono composti con il grafico esportato. Le regioni ingrandite provengono da quei file effettivamente consegnati.

Il conteggio degli elementi SVG ha dato questi risultati:

Questi conteggi riguardano questo piccolo esempio di prova. Il numero di tracciati non è un punteggio di qualità, e l'assenza di elementi image non dimostra che ogni funzionalità SVG sopravviverà in un'altra applicazione. Dimostra però che il distintivo in questo file composto è geometria, anziché un PNG incorporato.

Esporta un grafico con limiti prevedibili

Installa le versioni usate qui in un ambiente di progetto:

python -m pip install matplotlib==3.10.7 svgutils==0.3.4

Salva questo codice come plot.py ed eseguilo in una cartella di lavoro vuota:

import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt
 
plt.rcParams["svg.fonttype"] = "none"
 
fig = plt.figure(figsize=(6, 3), dpi=72)
ax = fig.add_axes([0.14, 0.22, 0.58, 0.65])
ax.plot([0, 1, 2, 3], [1, 2, 1.5, 3],
        marker="o", color="#173b40")
ax.set(xlabel="Example x", ylabel="Example y",
       title="Illustrative data only")
ax.spines[["top", "right"]].set_visible(False)
fig.savefig("plot.svg", format="svg")
plt.close(fig)

Gli assi occupano soltanto una parte della figura, lasciando spazio al distintivo sulla destra. Questa esportazione ha un viewBox di 0 0 432 216, con dimensioni esterne di 432pt per 216pt.

Mantieni stabili questi limiti mentre collochi la grafica esterna. Aggiungere bbox_inches="tight" cambia i limiti salvati, come spiega la documentazione di savefig. Se serve un ritaglio stretto, ispeziona il viewBox esportato e aggiorna successivamente le coordinate della composizione.

L'impostazione svg.fonttype="none" mantiene le etichette dell'esempio come testo. La documentazione sui caratteri di Matplotlib descrive le opzioni di output SVG come testo o tracciati. Il testo modificabile richiede comunque un carattere adatto nell'ambiente di destinazione. Se servono forme delle lettere fisse, scegli deliberatamente l'output come tracciati e conserva il sorgente del grafico per modificare le etichette. La guida alle variazioni dei caratteri SVG tratta questo compromesso.

Componi la grafica senza rasterizzarla

Salva questo distintivo originale come badge.svg accanto a plot.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="100" viewBox="0 0 100 100">
  <path fill="#173b40" fill-rule="evenodd"
        d="M30 5H70L95 30V70L70 95H30L5 70V30Z
           M34 17L17 34V66L34 83H66L83 66V34L66 17Z"/>
  <path fill="#28bfa3" d="M53 23L30 55H47L43 77L70 43H53Z"/>
</svg>

Poi esegui questo script di composizione:

import svgutils.transform as sg
 
page = sg.SVGFigure("432pt", "216pt")
page.root.set("viewBox", "0 0 432 216")
 
chart = sg.fromfile("plot.svg").getroot()
badge = sg.fromfile("badge.svg").getroot()
badge.moveto(332, 76, scale_x=0.64)
 
page.append([chart, badge])
page.save("vector-logo.svg")

La procedura segue il metodo di caricamento, trasformazione, aggiunta e salvataggio del tutorial di svgutils sulla composizione delle figure. Abbiamo usato scale_x, l'argomento supportato da svgutils 0.3.4; il tutorial meno recente mostra un argomento di scala diverso.

La grafica del distintivo, larga 100 unità, diventa larga 64 unità. Il suo angolo superiore sinistro si trova in (332, 76) nel sistema di coordinate del grafico. Le dimensioni esterne esplicite e il viewBox rendono inequivocabile quel posizionamento per questo esempio. Sono coordinate della pagina, non dei dati: spostare un punto nel grafico non farà spostare il distintivo insieme ad esso.

Per le annotazioni legate a un punto dei dati che cambia, mantieni una corrispondenza esplicita tra le coordinate del grafico e la pagina esportata, oppure usa uno strumento di composizione che fornisca tale associazione. Un posizionamento fisso nella pagina è adatto a un logo in un angolo o a un pannello illustrativo separato.

L'originale SVG può contenere funzionalità diverse dai tracciati. Un SVG che incorpora già un PNG rimane un contenuto misto quando viene composto. Controlla anche gli ID referenziati, i caratteri e le risorse collegate esternamente quando combini file più complessi. Il distintivo di questo esempio evita tali dipendenze.

Ispeziona il file, poi prova una revisione

Apri vector-logo.svg in un browser o nell'editor di destinazione. Controlla l'apertura centrale del distintivo, le etichette del grafico e lo spazio vuoto tra i due. Ispeziona il file sia alle dimensioni effettive d'uso sia ingrandito.

Un piccolo controllo XML può confermare la struttura senza affidarsi all'anteprima:

import xml.etree.ElementTree as ET
 
root = ET.parse("vector-logo.svg").getroot()
ns = "{http://www.w3.org/2000/svg}"
for tag in ("image", "path", "text"):
    print(tag, len(root.findall(".//" + ns + tag)))

Per l'esempio fornito, stampa image 0, path 10 e text 15. Il confronto raster stampa image 1, mantenendo gli otto tracciati del grafico. In quel confronto, il riferimento dell'immagine contiene dati PNG; è contenuto raster autonomo, non un file del logo esterno mancante.

Ora cambia l'ultimo valore y illustrativo in plot.py, riesegui lo script e ripeti la composizione. Il grafico dovrebbe cambiare mentre il distintivo rimane nella posizione riservata sulla pagina. Questo controllo della revisione individua una procedura che funziona una volta ma dipende da un'esportazione precedente del grafico.

Controlla separatamente il passaggio di consegna successivo. Se la figura deve entrare in un documento, la procedura SVG per LaTeX spiega le scelte di esportazione ed etichettatura. Una buona anteprima nel browser, da sola, non dimostra la conformità ai requisiti di una rivista né la conservazione nel PDF finale.

Recupera soltanto la grafica che ne ha bisogno

Quando esiste il sorgente del grafico, esporta da quello. La vettorializzazione non può ripristinare dati numerici o comandi di rappresentazione da uno screenshot.

PerfectVector è adatto al caso più circoscritto in cui un logo decorativo o un'illustrazione semplice esiste ormai soltanto come immagine raster. Con la sua procedura di recupero della grafica scientifica, ritaglia la sola grafica, visualizza il candidato vettoriale e ispeziona aperture, forme sottili e regioni di sfondo indesiderate. Escludi dal ricalco gli assi, i segni di misurazione e le etichette. Componi l'SVG della grafica accettata con il grafico nativo, poi ripeti i controlli sul file consegnato.

Usa l'originale vettoriale quando lo possiedi. Ridisegna manualmente un simbolo semplice quando il ricalco perde un dettaglio significativo. Mantieni raster i pannelli fotografici. La panoramica sulla vettorializzazione delle immagini spiega cosa può recuperare il ricalco prima che tu scelga questa strada.

FAQ

Salvare una figura Matplotlib come SVG rende vettoriale un logo PNG? No. Nella procedura OffsetImage verificata, il grafico viene esportato come geometria vettoriale mentre il logo PNG rimane un elemento image all'interno dell'SVG.

Posso posizionare il logo SVG usando le coordinate dei dati? La composizione mostrata qui usa le coordinate della pagina esportata. Un logo legato a un punto dei dati richiede una corrispondenza esplicita delle coordinate oppure uno strumento che mantenga tale associazione.

Perché le mie etichette sono diventate tracciati? L'impostazione dell'output dei caratteri SVG di Matplotlib controlla se le etichette vengono esportate come testo o tracciati dei glifi. Scegli questa impostazione prima di esportare e conserva il sorgente del grafico per modificare il testo in seguito.

Fonti

1. Matplotlib — savefig — Esportazione SVG esplicita ed effetto dei limiti di ritaglio stretti.
2. Matplotlib — OffsetImage — Comportamento del contenitore di immagini usato per il confronto raster.
3. Matplotlib — Caratteri in Matplotlib — Opzioni di output SVG come testo o tracciati dei glifi.
4. svgutils — Creazione di figure di qualità editoriale — Esportazione separata del grafico, composizione SVG, trasformazioni e salvataggio di una figura assemblata.

Esporta il grafico dal suo codice e mantieni separata la grafica. Se rimane soltanto un motivo decorativo raster, prepara un candidato SVG della grafica, ispeziona aperture e contorni, poi componilo con il grafico e controlla nel file esatto da consegnare la presenza di pixel, il posizionamento e le variazioni delle etichette.