SVG dans Qt : choisis le rendu, puis vérifie le fichier

Pour un SVG dans une application Qt Widgets, commence par QSvgWidget si tu souhaites afficher un dessin. Utilise QSvgRenderer si tu dois peindre ce dessin sur une cible choisie. Cette distinction compte : peindre une fois dans un QImage de taille fixe donne des pixels à afficher, tandis que conserver le SVG permet d’en refaire le rendu à une autre taille. Le guide de rendu Qt décrit les deux méthodes.

Choisis d’abord la méthode, puis vérifie l’illustration. Un aperçu dans un navigateur peut montrer ton design souhaité, mais ne prouve pas que Qt prend en charge toutes les fonctions du fichier.

Choisis une méthode d’affichage avant de modifier le SVG

Qt décrit QSvgWidget comme un widget d’affichage SVG et expose son moteur de rendu via renderer(). Ce widget appartient à SvgWidgets ; sa dépendance CMake est Qt6::SvgWidgets. La référence de classe est plus utile ici qu’un ancien exemple ajoutant seulement le module SVG général.

Afficher un SVG ne crée pas un éditeur d’illustration. Conserve un original source distinct si quelqu’un doit déplacer une feuille, remodeler un angle ou recolorer un détail détaché.

Essaie une petite source avant l’illustration complète

Enregistre ce dessin original sous leaf.svg. Il utilise une feuille remplie, une nervure claire et un cercle corail séparé :

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

La zone de dessin large est volontaire. Si la feuille devient haute et étroite, examine la gestion des proportions avant de modifier ses courbes. Si le cercle disparaît, vérifie les limites visibles et compare le fichier chargé à la source. Ce petit exemple fournit des détails reconnaissables sans dépendre d’un découpage ou d’effets.

Pour comprendre le fichier lui-même, le guide du format SVG explique la différence entre des formes vectorielles et une enveloppe SVG contenant une image matricielle.

Un exemple minimal Qt 6 Widgets

Crée 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();
}

Transmets le nom du fichier SVG comme argument du programme, de préférence un chemin absolu pendant les tests. Le code de sortie 1 signifie que cet exemple n’a pas reçu exactement un nom de fichier ; 2 signifie que le moteur n’a pas signalé un document valide. Ces codes sont des choix de cet exemple, pas l’API de codes d’erreur propre à Qt.

isValid() vérifie le document chargé. Ce n’est pas un test d’approbation visuelle. Le réglage explicite KeepAspectRatio demande au moteur de conserver les proportions ; la référence QSvgRenderer décrit la vérification de validité et les modes de proportions.

Utilise ce CMakeLists.txt à côté de la source :

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)

L’exemple lie Widgets pour l’application, SvgWidgets pour le widget d’affichage et Svg pour les appels à son moteur de rendu. Qt liste le composant Svg du moteur séparément du composant SvgWidgets.

Configure et compile avec ton kit de développement Qt 6 installé, puis exécute leaf_preview avec le chemin de leaf.svg. C’est un exemple source documenté ; nous ne l’avons pas compilé ni exécuté dans un environnement Qt natif. Teste la compilation et l’illustration réelles sur ton système cible avant de l’adopter.

Vérifie la prise en charge actuelle sans supposer l’équivalence avec un navigateur

Qt SVG moderne ne se limite pas aux seules fonctions statiques SVG Tiny. Qt décrit des éléments supplémentaires depuis Qt 6.7, analysés par défaut, avec une option limitant l’analyse aux fonctions Tiny. Sa référence des fonctions étendues liste les ajouts pris en charge et leurs limites.

Une limite concrète est clipPath : la même page l’indique comme non pris en charge. Un fichier dépendant du découpage mérite donc un examen source même s’il paraît correct dans un navigateur. Certains masques et filtres disposent d’une prise en charge documentée, mais cela ne prouve pas celle de tous les effets ou réglages d’export.

Si la feuille simple fonctionne mais qu’une grande illustration diffère, crée une copie et retire une fonction suspecte à la fois. Pour une illustration découpée, envisage de produire la géométrie visible souhaitée dans un éditeur plutôt que de dépendre de l’opération de découpage. Compare la silhouette obtenue à l’original avant de remplacer ton fichier maître.

Le texte nécessite sa propre vérification. Si le lettrage change, suis le guide de résolution des problèmes de polices SVG. Transformer le texte en formes est un compromis de design ; ce ne doit pas être la première réparation d’un nom de fichier incorrect ou d’un module manquant.

Repère quand ton processus transforme le SVG en pixels

Supposons que ton code rende la feuille une fois dans un petit QImage, crée un pixmap à partir de cette image, puis agrandisse ce pixmap. L’agrandissement agit sur le résultat matriciel. La source SVG n’a pas disparu, mais cette opération d’affichage ne lui demande plus un nouveau rendu.

Le guide de rendu Qt distingue la peinture dans une image de celle dans l’événement de peinture d’un widget. Si ton affichage change de taille, décide où le SVG doit être rendu à nouveau. Évite de considérer une image matricielle en cache comme preuve que la source elle-même ne peut pas changer d’échelle.

La même distinction compte pour préparer un jeu d’icônes SVG. Conserve des limites sources cohérentes, puis juge chaque icône à sa taille d’utilisation réelle. Une grande feuille reconnaissable peut encore perdre sa nervure ou son cercle détaché quand l’affichage est petit.

Examine le résultat avant de tout simplifier

Commence par le fichier réellement chargé, pas un autre export au nom proche. Confirme l’affichage de l’exemple simple, puis compare l’illustration de production à la taille prévue et après redimensionnement.

Pour la feuille, vérifie que le cercle reste séparé, que la nervure reste visible et que la zone de dessin large n’étire pas le dessin. Ce sont des vérifications d’acceptation pour ta propre exécution, pas des résultats rapportés de la nôtre. Si tout l’affichage est vide, la liste de vérification des SVG vides aide à distinguer illustration invisible et limites de dessin de la configuration de l’application.

Garde les photos ou illustrations texturées sous forme matricielle si cela convient au design. Choisir SVG doit répondre à un besoin d’illustration ; cela ne prouve pas à lui seul des fichiers plus petits, un rendu plus rapide ou une sortie identique entre moteurs.

Reconstruis un original source s’il ne reste qu’une image matricielle

Si l’icône ne subsiste qu’en PNG ou JPG, le processus d’image en vecteur PerfectVector peut aider à préparer une illustration SVG modifiable avant livraison à Qt. Examine la silhouette, les espaces et les détails détachés après conversion, puis teste ce SVG avec la méthode Qt choisie. La vectorisation prépare la géométrie ; elle n’ajoute pas de fonctions au moteur de rendu et ne transforme pas un widget d’affichage en éditeur de tracés.

Si tu possèdes déjà un original vectoriel propre, ajuste directement ce fichier. Simplifie une copie uniquement si une fonction précise ou un détail à petite taille nécessite une intervention, et garde la source plus riche pour les futures modifications.

FAQ

Dois-je utiliser QSvgWidget ou QSvgRenderer ? Utilise QSvgWidget pour afficher un SVG dans une interface Widgets. Utilise QSvgRenderer si tu dois contrôler la peinture sur une cible choisie, comme un widget personnalisé ou une image.

Qt actuel prend-il en charge uniquement SVG Tiny ? Qt décrit une prise en charge statique SVG Tiny et certaines extensions introduites dans Qt 6.7. Vérifie la référence actuelle des fonctions et tes options configurées plutôt que de supposer une prise en charge Tiny seule ou l’équivalence avec un navigateur.

Pourquoi un SVG peut-il paraître flou après placement dans un pixmap ? Si tu l’as d’abord rendu dans une image matricielle de taille fixe, agrandir ce résultat redimensionne les pixels. Réexamine la cible de rendu et vérifie si le SVG est rendu à nouveau à la taille requise.

Un chargement SVG valide prouve-t-il que tous les détails sont correctement affichés ? Non. Une vérification de validité ne remplace pas l’examen visuel. Compare les limites, proportions, petits détails et fonctions prises en charge dans l’application cible réelle.

Sources

1. Qt — rendu des fichiers SVG — Widgets d’affichage, cibles de l’objet de dessin et distinction entre rendu dans un widget et intermédiaires matriciels.
2. Qt — classe QSvgWidget — Widget d’affichage, accès au moteur et dépendance SvgWidgets.
3. Qt — classe QSvgRenderer — Dépendance Svg, validité du document et réglages de proportions.
4. Qt — fonctions étendues — Extensions modernes et limites explicites, dont les chemins de découpage non pris en charge.

Commence par un petit fichier et examine-le avec la méthode Qt choisie. Si une illustration matricielle doit être reconstruite, prépare un candidat SVG modifiable, vérifie les formes par rapport à la source et répète les vérifications dans l’application avant de remplacer ta ressource.