Comment compresser des fichiers SVG.

Ouvrez le compresseur SVG et choisissez un fichier SVG ou essayez un exemple. L'exemple est svg-compressor.svg, une marque d'orbite de 985 octets avec un viewBox de 512 × 512, un remplissage en dégradé, un titre et une description. Utilisez Coller SVG lorsque le balisage est déjà dans un éditeur ou le presse-papiers.

L'outil accepte jusqu'à 20 fichiers de 2 Mo chacun. Il analyse un document SVG complet et supprime les déclarations de document SVG standard sans charger de fichiers externes. Le XML mal formé, les déclarations d'entités personnalisées et les sous-ensembles de documents internes sont rejetés. Les fichiers très complexes peuvent également atteindre la limite d'éléments ou de temps de traitement.

Ce flux de travail produit des illustrations vectorielles statiques. Les scripts, les gestionnaires d'événements, les ressources externes, l'animation et les images matricielles intégrées sont supprimés. L'aperçu Original est déjà assaini, il ne doit donc pas être interprété comme un rendu sans restriction de chaque fonctionnalité du fichier source.

Les deux panneaux d'aperçu montrent l'original assaini et le résultat optimisé. Les tailles à côté de Original et Optimisé ainsi que le résumé en octets comparent le fichier source avec la sortie finale. Il signale une augmentation lorsque l'optimisation rend un fichier particulier plus volumineux au lieu de promettre une réduction à chaque fois.

Ouvrez les Paramètres et réglez la Précision décimale sur 2 pour l'exemple. La précision varie de 1 à 5 et commence à 3. Des valeurs plus faibles peuvent simplifier la géométrie numérique mais peuvent déplacer des courbes fines, de petits espaces ou des bords alignés. Augmentez-la lorsque l'aperçu perd des détails importants.

Cet exemple utilise une géométrie simple, donc la précision 2 conserve sa forme reconnaissable. D'autres SVG avec des coordonnées décimales complexes peuvent changer davantage. Afficher le balisage SVG optimisé expose le texte réel qui sera téléchargé ; ce n'est pas une représentation distincte de l'original.

Laissez l'option Conserver les titres et descriptions accessibles activée pour l'exemple traité. Cela conserve le titre et la description SVG tout en supprimant les métadonnées d'éditeur redondantes et en simplifiant le balisage éligible. Ce sont des types d'informations différents qui ne doivent pas être traités comme interchangeables.

L'option Raccourcir les identifiants internes est activée par défaut. L'optimiseur met à jour les références dans le SVG, mais des CSS externes ou JavaScript peuvent toujours dépendre des identifiants originaux. Désactivez cette option lorsque le fichier fait partie d'une application plus large qui nomme ses éléments, et testez le SVG final dans ce contexte.

Laissez les options Dimensions réactives et Balisage de sortie lisible désactivées pour l'exemple. Les dimensions réactives suppriment la largeur et la hauteur fixes lorsque le viewBox de coordonnées peut fournir un dimensionnement évolutif. La sortie lisible ajoute une indentation et est utile pour la maintenance, mais peut augmenter la taille du texte.

Sélectionnez Démarrer, puis Télécharger. La sortie traitée est de 635 octets par rapport à la source de 985 octets : une réduction de 35.5%. Son titre et sa description demeurent, et la comparaison affichée est rendue à partir de la source authentique et du SVG téléchargé.

L'article rend les deux vecteurs à 1,024 pixels pour une illustration nette du résultat ; leur taille de coordonnée logique reste 512 × 512. Un aperçu plus grand n'ajoute pas de contenu matriciel au SVG enregistré. Examinez le vecteur réel dans votre page de destination avant de remplacer un actif de production existant.

Un fichier se télécharge sous le nom SVG avec son nom de base original. Un lot se télécharge sous forme de ZIP, avec des suffixes numérotés pour les noms de fichiers en double. Le traitement a lieu dans le navigateur. Conservez la source originale si vous souhaitez essayer différents paramètres d'optimisation plus tard.