Importer un SVG

Collez vos SVG dans PandaSuite et exploitez pleinement les bénéfices des fichiers vectoriels.

Le format SVG (Scalable Vector Graphics) est devenu un incontournable dans la conception d’interfaces pour une bonne raison : il permet de créer des éléments graphiques évolutifs, sans aucune perte de qualité, peu importe leur taille.

Dans PandaSuite, un SVG devient soit une forme dont vous pouvez changer la couleur directement dans le Studio, soit une image vectorielle qui reste nette mais dont la couleur ne peut pas être modifiée. Tout dépend de la façon dont le SVG est construit.

Comment PandaSuite interprète les SVG

Lorsque vous collez du code SVG dans PandaSuite, le Studio l’analyse pour déterminer s’il peut devenir un path modifiable ou s’il doit être conservé comme fichier SVG complet.

SVG à un seul path = path modifiable

Si le SVG contient un seul élément <path>, PandaSuite le convertit en objet path placé sur votre écran. Cela vous permet de :

• Changer sa couleur et ses autres propriétés graphiques directement dans le Studio.
• Le redimensionner sans perte de qualité.
• L’animer avec les fonctionnalités d’animation disponibles dans PandaSuite.

PandaSuite conserve la couleur de remplissage (fill) définie sur le path (ou sur la balise <svg>). Si aucune couleur de remplissage n’est définie, une couleur aléatoire est appliquée : il vous suffit ensuite de choisir la couleur souhaitée. Une icône au trait qui utilise un contour (stroke) conserve son contour et son épaisseur, avec un remplissage transparent.

Autres SVG = fichier SVG complet

Si le SVG contient plusieurs paths ou d’autres éléments (cercles, rectangles, polygones, dégradés, filtres…), PandaSuite le conserve comme fichier SVG complet et l’ajoute à vos Fichiers. Glissez-déposez-le sur votre écran pour l’utiliser.

Un SVG complet reste redimensionnable et net à toutes les tailles, mais vous ne pouvez pas changer sa couleur ni modifier ses formes dans le Studio.

Comment importer un SVG dans PandaSuite

Coller le code SVG

C’est la méthode à utiliser pour obtenir un path modifiable :

1. Trouvez une icône SVG, sur un site d’icônes ou dans votre outil de design.
2. Copiez le code SVG de l’icône.
3. Ouvrez votre projet dans PandaSuite Studio et sélectionnez l’écran.
4. Collez avec Ctrl+V (Windows) ou Cmd+V (macOS).

L’icône apparaît alors sur votre écran, sélectionnée et prête à être personnalisée. Si elle n’apparaît pas sur l’écran, elle a été importée comme SVG complet : vous la trouverez dans vos Fichiers.

Importer le fichier SVG

Copier un fichier .svg depuis l’explorateur de fichiers de votre ordinateur ne colle pas son contenu. Pour utiliser un fichier SVG, importez-le : cliquez sur Fichiers dans la barre du haut puis Importer vos fichiers. Glissez ensuite le SVG depuis vos Fichiers sur votre écran. Voir Importer des fichiers.

Un fichier SVG importé est conservé comme SVG complet. Pour obtenir un path modifiable, ouvrez le fichier dans un éditeur de texte ou dans votre outil de design, copiez son code et collez-le dans le Studio.

Des icônes SVG gratuites pour vos projets

Besoin d’icônes de navigation ? PandaSuite propose une collection d’icônes SVG de navigation gratuites : flèches, chevrons, menu, fermer, accueil, plein écran, etc. Chaque icône est dessinée avec un seul path : elle devient modifiable dès que vous la collez.

Cliquez sur Copier le SVG sur la page, collez-le dans le Studio, puis recolorez-la, redimensionnez-la et animez-la. Les icônes sont publiées sous licence CC0, libres pour un usage personnel ou commercial, sans attribution.

Pour d’autres sources d’icônes, consultez Icônes.

Dépannage (Adobe Illustrator)

Si le collage direct depuis Adobe Illustrator ne fonctionne pas, il est possible qu’Illustrator n’inclue pas les données SVG dans le presse-papiers par défaut.

Activez cette préférence dans Illustrator, puis copiez de nouveau :

• Windows : Edit > Preferences > Clipboard Handling, cochez Include SVG Code.
• macOS : Illustrator > Preferences > Clipboard Handling, cochez Include SVG Code.

Si cela ne fonctionne pas, exportez votre plan au format SVG puis importez-le dans PandaSuite :

1. Dans Illustrator : File > Export > Export As…, choisissez SVG, enregistrez.
2. Dans PandaSuite Studio : cliquez sur Fichiers dans la barre du haut puis Importer vos fichiers. Glissez ensuite le SVG depuis vos Fichiers sur votre écran. Voir Importer des fichiers.