SVG in Qt: Renderer wählen, dann die Datei prüfen

Beginne für SVG in einer Qt-Widgets-App mit QSvgWidget, wenn du eine Zeichnung anzeigen möchtest. Verwende QSvgRenderer, wenn du sie auf ein gewähltes Ziel zeichnen musst. Der Unterschied ist wichtig: Ein einmaliges Rendern in ein QImage mit fester Größe hinterlässt Pixel zur Anzeige, während du eine aufbewahrte SVG-Quelle für eine andere Größe erneut rendern kannst. Der Rendering-Leitfaden von Qt beschreibt beide Wege.

Wähle zuerst den Weg und prüfe dann die Grafik. Eine Browservorschau kann dein gewünschtes Design zeigen, aber nicht beweisen, dass Qt jede Funktion der Datei unterstützt.

Wähle einen Anzeigeweg vor der SVG-Bearbeitung

Qt dokumentiert QSvgWidget als SVG-Anzeigewidget und macht seinen Renderer über renderer() zugänglich. Das Widget gehört zu SvgWidgets; seine CMake-Abhängigkeit ist Qt6::SvgWidgets. Die Klassenreferenz ist hier nützlicher als ein altes Beispiel, das nur das allgemeine SVG-Modul hinzufügt.

Das Anzeigen eines SVGs erzeugt keinen Illustrationseditor. Behalte ein separates Quelloriginal, wenn jemand ein Blatt verschieben, eine Ecke umformen oder ein getrenntes Detail umfärben muss.

Teste eine kleine Quelle vor der vollständigen Illustration

Speichere diese eigene Zeichnung als leaf.svg. Sie verwendet ein gefülltes Blatt, eine helle Blattader und einen separaten korallenfarbenen Kreis:

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="100" viewBox="0 0 160 100">
  <path d="M24 78C20 34 56 18 98 26C90 62 58 86 24 78Z" fill="#176b64"/>
  <path d="M28 74L78 38" fill="none" stroke="#fff6e8" stroke-width="5"/>
  <circle cx="126" cy="26" r="10" fill="#ec785e"/>
</svg>

Die breite Zeichenfläche ist beabsichtigt. Wenn das Blatt hoch und schmal wird, untersuche die Behandlung des Seitenverhältnisses, bevor du seine Kurven bearbeitest. Wenn der Kreis verschwindet, prüfe die sichtbaren Grenzen und vergleiche die geladene Datei mit der Quelle. Dieses kleine Beispiel bietet erkennbare Details, ohne von Beschneidung oder Effekten abzuhängen.

Als Hintergrund zur Datei erklärt der SVG-Formatleitfaden den Unterschied zwischen Vektorformen und einer SVG-Hülle mit Bitmap.

Ein minimales Qt-6-Widgets-Beispiel

Erstelle main.cpp:

#include <QApplication>
#include <QSvgRenderer>
#include <QSvgWidget>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    if (argc != 2)
        return 1;
 
    QSvgWidget view;
    view.load(QString::fromLocal8Bit(argv[1]));
    if (!view.renderer()->isValid())
        return 2;
 
    view.renderer()->setAspectRatioMode(Qt::KeepAspectRatio);
    view.resize(400, 240);
    view.show();
    return app.exec();
}

Übergib den SVG-Dateinamen als Programmargument, beim Testen vorzugsweise als absoluten Pfad. Exitcode 1 bedeutet, dass dieses Beispiel nicht genau einen Dateinamen erhalten hat; 2 bedeutet, dass der Renderer kein gültiges Dokument gemeldet hat. Diese Codes sind Entscheidungen in diesem Beispiel, keine eigene Qt-Fehlercode-API.

isValid() prüft das geladene Dokument. Es ist keine visuelle Abnahmeprüfung. Die explizit angegebene Einstellung KeepAspectRatio fordert den Renderer auf, die Proportionen zu erhalten; die QSvgRenderer-Referenz dokumentiert Gültigkeitsprüfung und Seitenverhältnismodi.

Verwende diese CMakeLists.txt neben der Quelle:

cmake_minimum_required(VERSION 3.16)
project(LeafPreview LANGUAGES CXX)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
find_package(Qt6 REQUIRED COMPONENTS Widgets Svg SvgWidgets)
add_executable(leaf_preview main.cpp)
target_link_libraries(leaf_preview PRIVATE Qt6::Widgets Qt6::Svg Qt6::SvgWidgets)

Das Beispiel verknüpft Widgets für die Anwendung, SvgWidgets für das Anzeigewidget und Svg für die Rendereraufrufe. Qt führt die Svg-Komponente des Renderers separat von der SvgWidgets-Komponente auf.

Konfiguriere und baue es mit deinem installierten Qt-6-Entwicklungskit und starte dann leaf_preview mit dem Pfad zu leaf.svg. Dies ist ein dokumentiertes Quellbeispiel; wir haben es nicht in einer nativen Qt-Umgebung kompiliert oder ausgeführt. Teste den tatsächlichen Build und die Grafik auf deinem Zielsystem, bevor du es übernimmst.

Prüfe aktuelle Unterstützung statt Browsergleichheit anzunehmen

Modernes Qt SVG ist nicht allein auf die statischen SVG-Tiny-Funktionen beschränkt. Qt dokumentiert zusätzliche Elemente ab Qt 6.7, die standardmäßig eingelesen werden, mit einer Option zur Beschränkung auf Tiny-Funktionen. Die Referenz zu erweiterten Funktionen nennt unterstützte Ergänzungen und deren Grenzen.

Eine konkrete Grenze ist clipPath: Dieselbe Seite kennzeichnet es als nicht unterstützt. Eine Datei mit Beschneidung verdient deshalb eine Quellprüfung, auch wenn sie im Browser richtig aussieht. Ausgewählte Masken und Filter werden laut Dokumentation unterstützt, aber das belegt keine Unterstützung für jeden Effekt oder jede Exporteinstellung.

Wenn das einfache Blatt funktioniert, aber eine größere Illustration abweicht, erstelle eine Kopie und entferne jeweils eine verdächtige Funktion. Erwäge bei beschnittenen Grafiken, die gewünschte sichtbare Geometrie im Editor zu erzeugen, statt von der Beschneidungsoperation abzuhängen. Vergleiche die entstandene Silhouette mit dem Original, bevor du dein Original ersetzt.

Text benötigt eine eigene Prüfung. Wenn sich die Schrift verändert, folge dem Leitfaden zur SVG-Schriftfehlersuche. Schrift in Formen umzuwandeln ist eine Designabwägung; es sollte nicht die erste Reparatur für einen falschen Dateinamen oder ein fehlendes Modul sein.

Erkenne, wann deine Pipeline SVG in Pixel verwandelt

Angenommen, dein Code rendert das Blatt einmal in ein kleines QImage, erzeugt daraus eine Pixmap und vergrößert sie später. Die Vergrößerung wirkt auf das Rasterergebnis. Die SVG-Quelle ist nicht verschwunden, aber dieser spätere Anzeigeschritt fordert kein neues Rendering aus ihr an.

Der Rendering-Leitfaden von Qt unterscheidet das Zeichnen in ein Bild vom Zeichnen im Paint-Event eines Widgets. Wenn sich deine Anzeigegröße ändert, entscheide, wo das SVG erneut gerendert werden soll. Behandle ein zwischengespeichertes Bitmap nicht als Beleg dafür, dass die Quelle selbst nicht skalieren kann.

Derselbe Unterschied ist beim Vorbereiten eines SVG-Icon-Sets relevant. Halte die Quellgrenzen einheitlich und beurteile dann jedes Icon in seiner tatsächlichen Nutzungsgröße. Ein großes erkennbares Blatt kann bei kleiner Anzeige trotzdem seine Ader oder den getrennten Kreis verlieren.

Prüfe das Ergebnis, bevor du alles vereinfachst

Beginne mit der Datei, die du tatsächlich lädst, nicht mit einem anderen Export mit ähnlichem Namen. Bestätige, dass das einfache Beispiel erscheint, und vergleiche dann die Produktionsgrafik in der vorgesehenen Größe und nach einer Größenänderung.

Prüfe beim Blatt, dass der Kreis getrennt bleibt, die Ader sichtbar bleibt und die breite Zeichenfläche die Zeichnung nicht verzerrt. Das sind Abnahmeprüfungen für deinen eigenen Durchlauf, keine von uns berichteten Ergebnisse. Wenn die gesamte Ansicht leer ist, hilft die Checkliste für leere SVGs, unsichtbare Grafik und Zeichnungsgrenzen von der Anwendungseinrichtung zu unterscheiden.

Behalte Fotos oder texturierte Illustrationen als Rasterassets, wenn das zum Design passt. Die Wahl von SVG sollte eine Grafikanforderung lösen; sie belegt für sich keine kleineren Dateien, schnelleres Rendering oder identische Ausgabe über Engines hinweg.

Rekonstruiere ein Quelloriginal, wenn nur Raster übrig ist

Wenn das Icon nur noch als PNG oder JPG vorhanden ist, kann PerfectVectors Bild-zu-Vektor-Workflow vor der Qt-Übergabe bearbeitbare SVG-Grafiken vorbereiten. Prüfe nach der Konvertierung Silhouette, Zwischenräume und getrennte Details und teste dann dieses SVG über deinen gewählten Qt-Weg. Vektorisierung bereitet Geometrie vor; sie fügt keine Rendererfunktionen hinzu und verwandelt ein Anzeigewidget nicht in einen Pfadeditor.

Wenn du bereits ein sauberes Vektororiginal hast, passe diese Datei direkt an. Vereinfache eine Kopie nur, wenn eine bestimmte Funktion oder ein Detail bei kleiner Größe Aufmerksamkeit benötigt, und behalte die reichhaltigere Quelle für spätere Änderungen.

FAQ

Soll ich QSvgWidget oder QSvgRenderer verwenden? Verwende QSvgWidget zur SVG-Anzeige in einer Widgets-Oberfläche. Verwende QSvgRenderer, wenn du das Zeichnen auf ein gewähltes Ziel wie ein eigenes Widget oder Bild steuern musst.

Unterstützt aktuelles Qt nur SVG Tiny? Qt dokumentiert statische SVG-Tiny-Unterstützung plus ausgewählte Erweiterungen ab Qt 6.7. Prüfe die aktuelle Funktionsreferenz und deine konfigurierten Optionen, statt entweder reine Tiny-Unterstützung oder Browsergleichheit anzunehmen.

Warum kann ein SVG unscharf aussehen, nachdem ich es in eine Pixmap übernommen habe? Wenn du es zuerst in ein Rasterbild mit fester Größe gerendert hast, skaliert eine Vergrößerung dieses Ergebnisses Pixel. Prüfe das Renderziel und ob das SVG in der benötigten Größe erneut gerendert wird.

Beweist ein gültiger SVG-Ladevorgang, dass jedes Detail korrekt gerendert wurde? Nein. Eine Gültigkeitsprüfung ersetzt keine visuelle Prüfung. Vergleiche Grenzen, Proportionen, kleine Details und unterstützte Funktionen in der tatsächlichen Zielanwendung.

Quellen

1. Qt — SVG-Dateien rendern — Anzeigewidgets, Painter-Ziele und der Unterschied zwischen Widget-Rendering und Rasterzwischenstufen.
2. Qt — QSvgWidget-Klasse — Anzeigewidget, Rendererzugriff und SvgWidgets-Abhängigkeit.
3. Qt — QSvgRenderer-Klasse — Svg-Abhängigkeit, Dokumentgültigkeit und Seitenverhältniseinstellungen.
4. Qt — Erweiterte Funktionen — Moderne Erweiterungen und explizite Funktionsgrenzen, einschließlich nicht unterstützter Beschneidungspfade.

Beginne mit einer kleinen Datei und prüfe sie über deinen gewählten Qt-Weg. Wenn Rastergrafiken rekonstruiert werden müssen, bereite einen bearbeitbaren SVG-Kandidaten vor, vergleiche die Formen mit der Quelle und wiederhole die Prüfungen auf Anwendungsebene, bevor du dein Asset ersetzt.