Rogner un SVG

À propos du rognage d'un SVG

Un SVG n'est pas une image avec une bordure. C'est un dessin plus une viewBox — quatre nombres qui disent quelle partie de l'espace de coordonnées le fichier montre.

La marge vient de ces quatre nombres. Une icône exportée en 512 × 512 avec la forme au milieu a du vide de tous les côtés, et aucun redimensionnement ne l'enlève : réduisez le fichier et vous réduisez la marge avec le dessin. Le logo flotte toujours au milieu de sa propre boîte, et refuse toujours de s'aligner avec le texte à côté.

Cet outil change la viewBox et rien d'autre. Il détermine où le dessin commence et finit réellement, resserre la boîte pour qu'elle colle, et vous rend un SVG — les mêmes chemins, les mêmes dégradés, les mêmes groupes, dans une boîte à leur taille.

Il regarde l'image, pas le code

La façon évidente de trouver les bords d'un SVG est de demander au navigateur la boîte englobante de toutes les formes. Cette façon-là se trompe dans deux cas très ordinaires, et ce sont précisément ces deux cas qui amènent les gens à chercher un tel outil :

• Un rectangle blanc de fond. C'est une forme, donc elle compte, donc la boîte englobante fait toute la toile et rien n'est rogné.
• Le flou et les ombres portées. Un filtre peint bien au-delà de la forme qui l'a produit, donc une boîte géométrique coupe le bord doux.

Alors cet outil dessine d'abord le SVG, puis regarde le résultat, comme le fait votre œil. Un rectangle blanc se lit comme du vide. Une ombre portée se lit comme du contenu et elle est gardée. Ce que vous voyez est ce qui est mesuré.

Transparent ou blanc

• Transparent ou blanc *(le choix habituel)* — tout ce que vous appelleriez « blanc » s'en va : les pixels totalement transparents comme les pixels blancs. C'est ce qu'il faut pour une icône exportée sur un plan de travail blanc, ou un logo posé sur une plaque blanche.
• Transparent seulement — le blanc est traité comme faisant partie du dessin. À utiliser quand le blanc est vraiment le design : un logotype blanc, un fond blanc qui doit rester, ou un visuel destiné à une page sombre.

La tolérance décide de ce qui est assez proche du vide pour compter comme vide. Les exports sont rarement purs : un fond peut être #fefefe, un bord très légèrement transparent. Augmentez la tolérance si rien n'a été rogné ; baissez-la si une partie pâle du dessin a été coupée.

La marge

Marge à laisser remet une quantité choisie d'espace sur les quatre côtés, mesurée dans les unités du SVG — les mêmes nombres que ceux de la viewBox.

Zéro donne la boîte la plus serrée possible, ce que vous voulez pour une icône dans un bouton ou un logo dans une grille, où c'est la mise en page qui doit décider des espacements. Une petite marge vaut le coup quand le dessin a un contour qu'un rognage serré rognerait, ou quand le fichier part quelque part où il sera recadré de nouveau.

La largeur et la hauteur suivent

Si le SVG avait des attributs width et height, ils sont mis à l'échelle du même facteur que la boîte, dans l'unité où ils étaient écrits. Un dessin de 40 mm de large dans une toile de 100 mm ressort à 40 mm de large.

C'est important : le dessin ne change pas de taille quand vous le rognez. Seul l'espace vide autour disparaît. Un SVG sans width ni height reste sans eux, et continue donc de s'adapter à ce dans quoi on le place.

Rien n'est envoyé

Le fichier est lu, dessiné et réécrit dans votre navigateur. Il n'atteint jamais un serveur, ce qui est tout l'enjeu quand le fichier est un logo non publié, la marque d'un client ou un visuel sous accord de confidentialité.

Cela veut dire aussi : aucune attente d'envoi, aucune limite de taille, et l'outil fonctionne hors ligne une fois la page chargée.

À quoi cela sert

• Une icône exportée avec un plan de travail fixe qui refuse de s'aligner dans un bouton
• Un logo posé sur une plaque blanche qui doit aller sur un en-tête coloré
• Un visuel venu de Figma, Illustrator ou Inkscape avec toute la toile autour
• Un SVG destiné à une planche de sprites ou une police d'icônes, où chaque glyphe a besoin d'une boîte serrée
• Un dessin pour une découpeuse ou un laser, où la boîte du fichier, c'est la matière
• Aligner un jeu d'icônes, en rognant chacune sur son propre contenu

Bon à savoir

• Le rognage est mesuré sur un rendu, sa précision est donc d'environ un pixel rendu — la boîte est élargie d'un cheveu pour être sûr de ne rien raser
• Ce qui était dessiné hors de la viewBox d'origine était déjà invisible, et le reste
• Le texte vivant est mesuré avec les polices de votre navigateur ; convertissez-le en chemins d'abord si l'ajustement doit être exact
• Un <image> ou une référence pointant vers un autre fichier ne peut pas être dessiné ici, et n'est donc pas compté
• Les commentaires, les <defs>, les métadonnées et les id survivent tous — c'est un recadrage, pas un nettoyage
• Pour rogner un bitmap à la place, utilisez Rogner une image, qui supprime aussi les marges automatiquement
• Pour transformer ensuite le résultat en PNG, utilisez SVG en PNG

Comment l'utiliser

• Cliquez sur Cliquez pour envoyer, ou déposez votre SVG sur la zone
• Le rognage est calculé aussitôt — le cadre en pointillés à gauche montre ce qui est gardé
• Laissez Transparent ou blanc, sauf si le blanc fait partie du design
• Augmentez la tolérance si rien n'a été rogné, baissez-la si quelque chose de pâle a été coupé
• Réglez une marge si vous voulez de l'espace sur les quatre côtés
• Appuyez sur Télécharger le SVG, ou sur Copier le code SVG pour le coller directement dans une page

Outils liés

• Rogner une image — le même travail pour le PNG et le JPG
• SVG en PNG — transformer le SVG rogné en bitmap
• SVG en JPG — un SVG en image plate
• Image en SVG — vectoriser un logo ou une icône
• Générateur de favicône — faire du résultat une icône de site
• Redimensionner une image — redimensionner un bitmap à la place