Designer - SVG Code toolDesigner - Outil Code SVG

L’Outil Code SVG vous permet d’insérer du code SVG personnalisé dans votre conception. C’est idéal pour ajouter des graphiques vectoriels évolutifs créés dans des outils comme CorelDRAW, Illustrator, Inkscape ou Affinity Designer.

Comment exporter votre conception vectorielle en SVG

  1. Ouvrez votre design dans votre logiciel de création vectorielle et assurez-vous que ses dimensions correspondent au format de badge sélectionné dans Designer.
  2. Cliquez sur Exporter sous et sélectionnez SVG comme format de fichier.
  3. Dans les paramètres d’exportation, réglez Type de police à Convertir en contour.
  4. Cliquez sur Afficher le code et copiez le code SVG généré.
  5. Collez le code dans le champ Contenu (SVG) dans IDpack.
  6. Vous pouvez également enregistrer le fichier SVG, l’ouvrir dans un éditeur de texte, copier le code et le coller dans le champ Contenu (SVG).
Export as SVG

Exemple de code SVG

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153.28 243.96"> <defs> <style> .cls-1 { fill: #c52928; } .cls-2 { fill: #facdd2; } .cls-3 { fill: #7d2225; } .cls-3, .cls-4 { mix-blend-mode: screen; opacity: .5; } .cls-5 { isolation: isolate; } .cls-4 { fill: #b73236; } </style> </defs> <g class="cls-5"> <g id="Layer_1"> <polygon class="cls-2" points="153.28 0 153.28 47.59 22.63 103.18 0 111.67 0 0 153.28 0" /> <polygon class="cls-1" points="153.28 0 28.44 51.53 28.44 215.96 0 243.96 0 0 153.28 0" /> <polygon class="cls-4" points="28.44 51.53 0 77.9 0 23.09 28.44 51.53" /> <polygon class="cls-3" points="28.44 106.34 0 132.71 0 77.9 28.44 106.34" /> <polygon class="cls-4" points="28.44 161.15 0 187.52 0 132.71 28.44 161.15" /> <polygon class="cls-4" points="28.44 215.96 0 243.96 0 187.52 28.44 215.96" /> </g> </g> </svg>
SVG badge example

Position

Les propriétés Position définissent l’emplacement et la taille d’un élément dans la conception. L’ajustement de ces valeurs permet un contrôle précis de la position du SVG et de son espace occupé.

  • Gauche (X) – Détermine la position horizontale de l’élément, mesurée à partir du bord gauche du design.
  • Haut (Y) – Détermine la position verticale de l’élément, mesurée à partir du bord supérieur du design.
  • Largeur – Définit la dimension horizontale du SVG.
  • Hauteur – Définit la dimension verticale du SVG.

L’ajustement de ces propriétés permet de bien aligner et dimensionner le SVG dans la conception.

Propriétés

  • Visible

    Contrôle l’affichage du SVG dans l’aperçu du badge et à l’impression. Lorsque décoché, le SVG reste dans le design mais n’est pas imprimé.

  • Contenu (SVG)

    Définit le code SVG affiché comme graphique vectoriel. Collez du code SVG valide directement dans ce champ.

  • Opacité

    Ajustez l’opacité du SVG selon les niveaux prédéfinis : Aucune, 25 %, 50 %, 75 %, ou 90 %.