Quelles sont les options pour optimiser le SVG ?

Question

J'ai plusieurs SVG, dont certains sont assez volumineux (11 Mo), et ils ont été créés à partir d'un PDF à l'aide de l'application suivante pdf2svg .

Le problème est que le SVG est trop gros, prend beaucoup de temps à s'ouvrir et est inutilement complexe. Il contient principalement du texte et quelques images (pensez à un journal), et le texte est divisé en petits morceaux de caractères, même pas des mots.

J'ai besoin de l'optimiser, d'abord pour réduire la taille, et aussi pour réduire le nombre d'éléments afin qu'il se charge plus rapidement. La seule chose à laquelle j'ai pensé jusqu'à présent est de regarder les caractères qui se trouvent sur une ligne, et de les joindre en un seul <tspan> .

Cela devrait réduire la quantité d'éléments de texte de manière assez significative, car il semble qu'il s'agisse principalement de groupes de 1 à 5 lettres.

Mais je cherche d'autres choses que je peux faire au SVG pour réduire la taille. Il y a aussi une police principale, qui est utilisée pour environ 95% du texte, mais tel qu'il est actuellement, tout le texte est défini comme des glyphes (formes rendues).

Est-il possible d'intégrer simplement la police, de sorte que le texte soit rendu en tant que texte, et non en tant que forme ?

De même, si vous connaissez une meilleure bibliothèque pour convertir des PDF en SVG, j'apprécierais toute contribution. La seule exigence est que la sortie SVG ait exactement le même aspect que le PDF.

Je tiens également à souligner que la vitesse n'est pas vraiment importante. Peu importe le temps que prend la conversion, tant qu'elle produit le résultat souhaité.

Answer 1

SVG-Cleaner semble fonctionner parfaitement : beaucoup plus rapide que les autres, meilleure compression, robuste dans mes tests, traitement des dossiers par lots, et hey ! un installateur Windows pour nous les paresseux !

Mon essai : Taille du fichier original : 241 Ko, après suppression des références par InkScape : 149K, nettoyé avec l'outil : 38 KB, nettoyé et compressé : 5 KB (extension de fichier .sgvz).

J'ai essayé d'ouvrir le dernier, m'attendant à un dessin vide... Mais mes graphiques étaient toujours là, intacts !

Téléchargez-le ici (Windows, Ubuntu, ou Source)

Answer 2

J'ai récemment commencé à faire un programme Python pour optimiser les SVGs, que vous pouvez trouver à l'adresse suivante : https://github.com/petercollingridge/SVG-Optimiser

Il existe une version en ligne très préliminaire sur le site : http://petercollingridge.appspot.com/

Pour de plus amples informations, veuillez consulter le site http://www.petercollingridge.co.uk/blog/svg-optimiser

Il est loin d'être complet et probablement très bogué, mais il traite certains des problèmes mentionnés par Chasbeen, comme la suppression des attributs de précision et de style par défaut inutiles. Il peut également supprimer les attributs et les espaces de noms inutiles si vous savez ce que vous recherchez, et convertit les styles en CSS, ce qui permet de voir plus facilement comment ils peuvent être améliorés.

Je ne comprends pas vraiment ce que vous voulez dire par "intégrer des polices". Si vous collez un exemple de fragment du SVG montrant les gyphes et les éléments à caractères multiples, je pourrais peut-être inclure une méthode pour les combiner.

Answer 3

Je peux recommander Décapage car je l'ai moi-même beaucoup utilisé pour éliminer les éléments inutiles des fichiers SVG, ce qui est une de mes passions.

Un exemple de ligne de commande scour qui pourrait vous servir (et à partir duquel j'ai tendance à commencer) :

scour --enable-viewboxing --create-groups --shorten-ids --enable-id-stripping --enable-comment-stripping --disable-embed-rasters --remove-metadata --strip-xml-prolog -p 9 < old.svg > new.svg

Veillez à comparer l'ancienne et la nouvelle version pour vous assurer que rien n'a été endommagé et essayez d'abaisser la valeur de l'ancien et du nouveau modèle. -p la précision décimale (la valeur par défaut est 5 si vous n'en donnez pas) ; à un certain niveau, cela commence probablement à déformer les choses de manière assez grave, mais une ou deux décimales de plus devraient être bonnes.

Si vous souhaitez adopter une approche plus manuelle, il existe de nombreuses astuces du métier rassemblées dans le site Changements apportés au défi Kilobyte SVG qui sont conçus comme une sorte de lieu d'apprentissage et d'enseignement combiné pour ce genre de choses.

Oui, il est possible d'intégrer une police dans le fichier SVG ou de lier une police externe, comme le montre l'exemple de Mike Bostock sur le site Web de la Commission européenne. Logo de WebPlatform.org ( La version sans enveloppe html ici ).

Il est bien sûr beaucoup plus facile d'accomplir cela si vous avez une connaissance détaillée des polices utilisées que si vous prenez un pdf arbitraire et le convertissez ; je ne connais aucun outil qui crée une police sans nom à partir des glyphes intégrés dans le pdf original sans que vous fassiez vous-même une grande partie (ou la totalité) de ce travail.

En outre, il existe une liste croissante d'outils d'optimisation SVG dans le domaine de la santé. Défi Kilobyte SVG README de la section "Outils".

Answer 4

https://github.com/svg/svgo

sudo npm install -g svgo

pour optimiser tous les svgs dans le répertoire courant :

svgo -f .

Si vous ne disposez pas de npm, vous pouvez l'installer sur Ubuntu comme suit :

sudo apt-get update && sudo apt-get install nodejs-legacy npm

Answer 5

Je pense que votre SVG converti est probablement très gonflé par rapport à ce qu'il pourrait être. Je ne suis pas sûr qu'Inkscape le prenne ! Il y a des options de menu telles que "Convertir en texte" mais elles ne fonctionnent pas nécessairement.

Vous pouvez effectuer une recherche et un remplacement sur votre fichier pour supprimer les références aux valeurs d'attributs SVG par défaut, comme stroke:#000000 ; largeur de trait:1px ; stroke-linecap:butt ; stroke-linejoin:miter ; stroke-opacity:1 ; Beaucoup d'entre eux sont par défaut de toute façon, alors cherchez et remplacez sans rien faire.

Il est également étonnant de voir comment vous pouvez réduire les précisions inutiles. Lors de la conversion de ce fichier particulier, vous pourriez trouver une décimale se terminant par .0000001 ou .99999675. Toutes ces répétitions peuvent également être supprimées/réduites.