L’essentiel en bref
- L’export SVG de Gradiently garde les mots comme du vrai texte dans leurs propres polices, embarquées dans le fichier, et garde les formes, icônes, graphiques et tableaux en vectoriel.
- Dans un SVG, le Mark et les photos sont des images : le fichier se redimensionne parfaitement pour le texte et les formes, mais pas à l’infini pour le fond.
- Un SVG contient une seule page : un carrousel ou une présentation s’exporte en un SVG par page choisie.
- Le fond transparent n’exporte que vos éléments en PNG, sans le Mark, prêts à être posés sur une autre image ou couleur.
- Les exports SVG et PNG transparent font partie de Pro.
Sur cette page
Pour exporter en SVG depuis Gradiently, ouvrez un design dans le Studio, choisissez Exporter puis SVG. Les mots restent des mots, dans leurs propres polices embarquées dans le fichier ; les formes, icônes, graphiques et tableaux restent vectoriels ; le Mark et les photos y entrent sous forme d’images. Pour un PNG transparent, choisissez PNG et activez Fond transparent : vous obtenez uniquement vos éléments sur un fond transparent, sans le Mark. Les deux font partie de Pro.
SVG, PNG ou PNG transparent
À utiliser pour
À utiliser pour
Ce que vous obtenez
À utiliser pour
Le compromis général entre les deux formats est traité dans SVG ou PNG. Ce guide porte sur ce que Gradiently met dans chaque fichier.
Ce qui reste vectoriel dans un export SVG
Vectoriel : net à toute taille
- Les mots, en vrai texte sélectionnable et modifiable
- Les polices, embarquées dans le fichier
- Les formes et les lignes
- Les icônes
- Les graphiques et les tableaux
Images dans le SVG
- Le Mark, le fond vivant
- Les photos que vous avez ajoutées
- Toute police dont la licence interdit l’incorporation
Un SVG est donc parfait pour un titre qui doit rester net sur un écran 4K, ou une mise en page qu’un développeur va intégrer dans une page, et moins utile si vous espérez agrandir le fond à la taille d’un panneau publicitaire. Le Mark est rendu en image à la taille du design ; pour un fond plus grand, exportez plutôt un PNG plus grand. Un Mark est un rendu vivant et non un ensemble fixe de formes vectorielles, c’est pourquoi il ne peut pas devenir un tracé.
Comment exporter un SVG
- 1
Choisissez la page
Un SVG contient une seule page. Sur un carrousel ou une présentation, choisissez la page dans Exporter ; répétez pour les autres.
- 2
Choisissez SVG
Ouvrez Exporter et choisissez SVG, décrit comme redimensionnable, le texte reste du texte. L’aperçu indique la taille de la page.
- 3
Téléchargez
Choisissez Télécharger SVG. Le fichier s’enregistre là où votre navigateur enregistre les téléchargements.
- 4
Utilisez-le sur le web
Placez-le avec une balise
imgpour un visuel fixe, ou intégrez-le directement dans le HTML si vous voulez styliser le texte en CSS.
<!-- As an image: simplest, cached, text is not selectable -->
<img src="/images/summer-launch.svg" width="1200" height="630" alt="Summer launch: new colours from 1 June">
<!-- Inline: text is real, selectable and readable by search engines -->
<div class="hero-art">
<!-- paste the contents of summer-launch.svg here -->
</div>Un SVG s’ouvre aussi dans des outils de design comme Figma et Illustrator, qui lisent le texte et les formes vectorielles comme des calques modifiables. C’est donc le bon fichier à transmettre à quelqu’un qui doit adapter une mise en page à un format que Gradiently ne couvre pas, comme une enseigne imprimée avec son propre gabarit, ou à un développeur qui construit une section de page à partir de votre design. Envoyez le PNG avec, comme référence visuelle, pour qu’il voie exactement à quoi doit ressembler le Mark.
Comment exporter un PNG transparent
Choisissez PNG dans Exporter et activez Fond transparent. Tout ce que vous avez placé, mots, logo, formes, photos, reste ; le Mark est retiré, et l’espace autour de vos éléments devient transparent. Choisissez une taille jusqu’en 4K. Un lettrage, un logo et un slogan exportés ainsi peuvent se poser sur une photo produit, une vidéo dans un autre éditeur ou une diapositive colorée.
Le design complet : le logotype sur son Mark, à publier tel quel.
Exportés avec Fond transparent, le logotype et le slogan voyagent seuls et peuvent être posés tels quels sur un autre fond.
- Vérifiez l’encre par rapport à sa destination. Des mots clairs exportés pour un Mark sombre disparaîtront sur une page blanche. Passez à une encre foncée avant d’exporter si la destination est claire.
- Ajustez la page au contenu. Un PNG transparent garde la taille complète de la page. Réduisez d’abord la page au plus près de vos éléments si vous voulez un fichier serré.
- Gardez les deux versions du logo. Exportez-en une pour les fonds sombres et une pour les fonds clairs, comme le fait un kit de marque. Un logo sur un fond dégradé explique pourquoi.
- Utilisez le PNG, pas le JPEG. Le JPEG ne gère pas la transparence ; un design transparent enregistré en JPEG reçoit un fond uni.
Placer un PNG transparent sur le web
Un PNG transparent se superpose proprement à n’importe quel fond CSS, ce qui est pratique quand les mots sont fixes mais que le fond change selon la section ou le thème. Empilez-le avec un dégradé derrière et votre visuel passe par-dessus.
.launch-banner {
aspect-ratio: 1200 / 600;
background:
url("/images/launch-words.png") center / contain no-repeat,
linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%);
}linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)Pour le cas inverse, un dégradé qui s’estompe vers la transparence en CSS, voyez le dégradé transparent en CSS. Et pour avoir tous les formats au même endroit, exporter ses designs couvre ensemble PNG, JPEG, PDF, vidéo et GIF.
Les questions qu’on nous pose
Comment exporter un SVG depuis Gradiently ?
Ouvrez le design, choisissez Exporter, puis SVG, et téléchargez. Un SVG contient une seule page : sur un design de plusieurs pages, choisissez d’abord la page.
L’export SVG garde-t-il le texte modifiable ?
Oui. Les mots restent du vrai texte, avec leurs polices embarquées dans le fichier, sauf si la licence d’une police interdit l’incorporation : ce texte est alors rendu en pixels.
Le fond en dégradé est-il vectoriel dans un export SVG ?
Non. Le Mark est un rendu vivant, il est donc inclus sous forme d’image dans le SVG. Les formes, icônes, graphiques, tableaux et le texte sont vectoriels.
Comment exporter un PNG avec un fond transparent ?
Choisissez PNG dans Exporter et activez Fond transparent. Vos éléments sont conservés et le Mark est retiré, sur un fond transparent.
Puis-je exporter en SVG avec l’offre gratuite ?
Non. Les exports gratuits sont en PNG ou JPEG en 720p avec un petit filigrane ; SVG, PDF et PNG transparent font partie de Pro.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil