Graphiques vectoriels dans Webflow : SVG intégré ou image et LCP

L’autre jour, j’ai eu un problème de LCP dans Google PageSpeed, et le coupable était un SVG. Impossible de comprendre pourquoi, j’ai essayé plein de choses, sans vouloir vexer personne, la documentation de PageSpeed est parfois carrément inutile. Au final, j’ai opté pour un WebP, mais je m’égare : toute cette enquête m’a entraîné dans le terrier du SVG, et je me suis dit qu’un article sur ce que j’avais lu serait plus sympa, d’autant qu’on n’a jamais abordé les SVG, alors voilà, un article sur les graphiques vectoriels et Webflow, je suppose. (Pour info, c’étaient les dimensions physiques du SVG qui posaient problème, mais ça, c’est un autre terrier Google PageSpeed.)

Qu’est-ce qu’une image vectorielle ?

Les graphiques vectoriels sont définis par des tracés, composés de points reliés par des lignes et des courbes pour former des polygones et d’autres formes. En gros, des formes définies sur un plan cartésien. Contrairement aux graphiques matriciels, qui reposent sur des pixels, les images vectorielles s’agrandissent à n’importe quelle taille sans perte de qualité. Elles sont donc idéales pour les logos, les icônes et tous les visuels où la netteté et la flexibilité sont essentielles. Ce qui veut dire, en retour, qu’elles excellent pour les formes simples, mais qu’elles s’essoufflent dès qu’elles deviennent très complexes.

L’évolution des graphiques vectoriels

Les graphiques vectoriels remontent aux débuts de l’infographie, à l’époque où le stockage et l’efficacité primaient sur tout. Avec l’avènement de l’informatique personnelle, des applications vectorielles comme Adobe Illustrator et CorelDRAW ont propulsé ces graphiques au premier plan du design, révolutionnant notre manière de créer et d’interagir avec les images numériques.

L’introduction du SVG (Scalable Vector Graphics) à la fin des années 1990 a marqué une étape importante : les SVG sont des fichiers basés sur XML, qu’on peut créer et modifier avec n’importe quel éditeur de texte et manipuler avec CSS et JavaScript.

Intégrer des SVG dans Webflow

Revenons donc à ce qui nous intéresse le plus, nous les designers Webflow : on peut facilement ajouter des vecteurs de deux manières principales, avec des embeds, c’est-à-dire en intégrant le code directement dans un embed Webflow, ou en les ajoutant comme images. Chacune a ses avantages et ses inconvénients.

Intégrer directement le code SVG

Intégrer le code SVG directement dans votre HTML peut améliorer les temps de chargement et réduire les requêtes HTTP, ce qui est crucial pour des pages plus rapides. Cette approche est particulièrement utile pour les graphiques simples qui font partie intégrante du design du site, car ils s'adaptent proprement à tous les appareils.

Évidemment, les vecteurs plus complexes posent problème ici, car le HTML peut devenir énorme. Il y a aussi d’autres éléments à prendre en compte : où se place-t-il dans le document, combien de fois le vecteur est-il utilisé sur la page et sur l’ensemble du site (une image SVG peut être préférable pour la mise en cache), y a-t-il des interactions, parce qu’on peut faire des trucs sympas avec des SVG intégrés, des variables et les interactions Webflow.

Utiliser des fichiers SVG externes

Les fichiers SVG externes conviennent bien aux graphiques complexes ou mis à jour fréquemment. En référençant des fichiers externes, vous pouvez profiter du cache du navigateur pour accélérer le chargement lors des visites suivantes. En revanche, cette méthode ajoute des requêtes HTTP, il faut donc l'utiliser avec discernement.

C’est toujours un dilemme, que ce soit pour les SVG externes ou les embeds, et pour un site le plus optimisé possible, il faut simplement trancher au fil de la construction, en se servant du design comme guide.

Les SVG et la performance web

Impact sur la vitesse de page

Les SVG peuvent influencer sensiblement la performance web. Grâce à leur petite taille et à leur capacité à s'adapter à toutes les dimensions, ils se chargent souvent plus vite que les images matricielles. Cependant, la méthode d'intégration (intégré ou externe) joue aussi un rôle dans leur impact sur la performance.

Largest Contentful Paint (LCP)

Les SVG peuvent améliorer le LCP, une métrique essentielle des Core Web Vitals de Google. En optimisant leur chargement (par exemple en donnant la priorité au contenu visible sans défilement), vous pouvez améliorer la performance perçue et l’expérience utilisateur.

Une chose à savoir : un SVG intégré (inline) n’est jamais retenu comme élément LCP, seul un SVG chargé comme image peut l’être. Donc si un SVG apparaît un jour comme élément LCP dans PageSpeed, c’est qu’il est externe.

Techniques d’optimisation avancées

Minimiser le code SVG : utilisez des outils comme SVGOMG pour supprimer les données superflues des fichiers SVG et réduire leur taille. Je ne le répéterai jamais assez, utilisez SVGOMG. Vos SVG deviennent minuscules, et vous pouvez coller le code SVG directement dans le site puis le recopier, alors je copie chaque SVG/vecteur depuis Figma en SVG et je le colle directement dans SVGOMG, puis je sauvegarde le SVG ou je le recopie si je compte l’intégrer. Ce site a été une révélation. C’est un workflow simple pour un petit studio Webflow comme le nôtre, mais il nous apporte ce petit surplus de performance une fois le tout additionné.
Animation efficace : quand vous animez des SVG, utilisez les animations CSS ou JavaScript avec parcimonie pour éviter les charges de calcul lourdes qui pèsent sur des métriques comme le LCP.
HTTP/2 pour les fichiers externes : tirez parti des capacités de HTTP/2 pour charger les SVG en parallèle plus rapidement et améliorer les temps de chargement initiaux. (Cloudflare est top pour ça, et notre guide Cloudflare 2026 en est la version plus récente)
Complexité : un WebP peut être une meilleure alternative, même en 2X avec transparence, que des SVG extrêmement complexes.

Utiliser les variables Webflow pour animer dynamiquement les SVG

L’arrivée des variables CSS dans Webflow ouvre des possibilités dynamiques pour animer les SVG directement intégrés à votre HTML. Cette méthode permet de modifier des propriétés comme la couleur, la taille et le trait de manière dynamique, selon les interactions de l’utilisateur ou d’autres conditions définies dans Webflow. Les interactions Webflow avec GSAP peuvent désormais aussi animer directement les variables, grâce à une action Animate variable qui anime en douceur les variables de couleur, de taille, de pourcentage et de nombre, ce qui vous permet de piloter un SVG intégré depuis une interaction sans écrire une ligne de JavaScript. Pour bien régler le timing, notre guide visuel des fonctions d’accélération dans Webflow vous aidera, et pour en savoir plus sur notre façon de concevoir le mouvement en général, lisez notre article sur les animations dynamiques dans Webflow.

Animer des SVG avec les variables Webflow :

Changements de couleur et d’opacité : définissez des variables CSS pour la couleur et utilisez-les dans le code SVG. Ajustez ces variables selon la position de défilement ou d’autres déclencheurs dans Webflow pour créer des effets interactifs engageants.
Ajustements de taille : utilisez des variables CSS pour modifier dynamiquement la largeur, la hauteur ou d’autres dimensions des éléments SVG. Les éléments peuvent ainsi grandir ou rétrécir en réponse aux interactions de l’utilisateur.
Complexité et performance : même si les variables CSS offrent de puissants moyens d’animer et d’ajuster les SVG, gardez un œil sur la complexité des SVG utilisés. Les SVG complexes, avec de nombreux tracés et des effets détaillés, peuvent allonger sensiblement les temps de chargement et nuire à la performance.

Quand intégrer un SVG et quand utiliser un fichier externe

Les SVG intégrés conviennent le mieux pour :

Les petites icônes et graphiques simples qui gagnent à être stylés et manipulés directement dans le HTML ou le CSS.
Les designs qui demandent une manipulation dynamique selon les interactions ou des conditions en temps réel.

Les fichiers SVG externes sont préférables pour :

Les graphiques grands et complexes utilisés sur plusieurs pages du site, qui profitent de la mise en cache du navigateur.
Les graphiques qui n’ont pas besoin d’être manipulés dynamiquement ou qui sont rarement mis à jour.

En comprenant ces nuances et en exploitant les puissantes capacités de design de Webflow, vous pouvez optimiser l’usage et la performance des SVG dans vos projets, pour un site rapide, engageant et visuellement séduisant.

Bref, rien qui change le monde, mais bon à savoir, et ça pourrait bien vous donner un petit coup de pouce. Pour info, Cloudflare est une bonne option ici : il ne redimensionne ni ne convertit un SVG comme il le fait pour un JPEG ou un PNG, mais il peut le mettre en cache près de l’utilisateur et le compresser, alors jetez un œil à cet autre article de chez nous.

Graphiques vectoriels dans Webflow : réponses rapides

Qu’est-ce qu’un graphique vectoriel ?

Les graphiques vectoriels sont des images définies par des mathématiques plutôt que par des pixels : des tracés composés de points, de lignes et de courbes. Grâce à cela, ils s’agrandissent à n’importe quelle taille sans perdre en qualité, ce qui les rend idéaux pour les logos et les icônes, et peu adaptés aux images très complexes, proches de la photo.

Vaut-il mieux intégrer un SVG ou l’utiliser comme image dans Webflow ?

Ça dépend du graphique. Intégrez les petites icônes simples et tout ce que vous voulez styler ou animer avec du CSS, des variables ou des interactions. Utilisez un fichier SVG externe pour les graphiques plus grands ou complexes qui reviennent sur de nombreuses pages, puisque le navigateur peut mettre le fichier en cache.

Un SVG peut-il causer un problème de LCP dans Webflow ?

Oui, mais uniquement pour un SVG externe. Un SVG intégré (inline) n’est jamais retenu comme élément LCP, seul un SVG chargé comme image peut l’être. Dans mon cas, les dimensions physiques du SVG étaient en cause, et un WebP a réglé le problème. Les SVG très complexes peuvent aussi alourdir la page ou prendre plus de temps à analyser, donc si un SVG apparaît comme élément LCP, testez-le face à un WebP.

Comment alléger un SVG avant de l’ajouter à Webflow ?

Passez-le dans SVGOMG pour supprimer les données superflues, puis sauvegardez le fichier ou copiez le code et collez-le dans un embed.

Cloudflare optimise-t-il les SVG ?

Pas comme il optimise les images JPEG ou PNG, puisqu’il ne redimensionne ni ne convertit les SVG, mais il les met en cache près de l’utilisateur et les compresse. Notre guide Cloudflare 2026 détaille la configuration.