Quelles sont les options pour optimiser SVG?
J'ai plusieurs SVG, dont certains assez volumineux (11 Mo) et ils sont créés à partir d'un PDF à l'aide de pdf2svg .
Le problème est que le SVG est trop volumineux, prend beaucoup de temps à s’ouvrir et est inutilement complexe. Il contient principalement du texte et des images (pense le journal), et le texte est divisé en petits morceaux de caractères, pas même de mots.
Je dois l’optimiser, tout d’abord pour réduire la taille, ainsi que pour réduire le nombre d’éléments permettant de le charger plus rapidement. La seule chose à laquelle j’ai pensé jusqu’à présent est de regarder les caractères qui se trouvent sur une seule ligne et de les joindre dans un seul <tspan>.
Cela devrait permettre de réduire considérablement le nombre d'éléments de texte, car il semble s'agir principalement de groupes de 1 à 5 lettres.
Mais je cherche plus de choses que je puisse faire au SVG pour réduire la taille. Il existe également une police principale, utilisée pour environ 95% du texte, mais dans l’état actuel, tout le texte est défini en tant que glyphes (formes rendues).
Est-il possible d'incorporer simplement la police afin que le texte soit rendu sous forme de texte et non sous forme de forme?
Aussi, si vous connaissez une meilleure bibliothèque pour convertir des PDF en SVG, je vous serais reconnaissant de votre participation. La seule exigence est que la sortie SVG ait exactement le même aspect que le PDF.
J'aimerais aussi noter que la vitesse n'est pas vraiment importante. Peu importe la durée de la conversion, dans la mesure où elle produit le résultat souhaité.
SVG-Cleaner semble fonctionner parfaitement: beaucoup plus rapide que d’autres, une meilleure compression, des tests robustes, le traitement des dossiers de lot et hé! un installateur de fenêtres pour nous les paresseux!
Mon essai: Taille du fichier d'origine: 241 Ko, après la suppression de références InkScape: 149 Ko, nettoyé à l'aide de l'outil: 38 Ko, nettoyé et compressé: 5 Ko (extension de fichier .sgvz).
J'ai essayé d'ouvrir le dernier en espérant un dessin vierge ... Mais mes graphiques étaient toujours là!
Téléchargez-le ici (Windows, Ubuntu ou Source)
Je peux recommander Scour car je l'ai beaucoup utilisé moi-même pour nettoyer les fichiers SVG inutiles, ce qui est pour moi un passe-temps.
Voici un exemple de ligne de commande qui pourrait vous servir (et sur laquelle j'ai tendance à partir):
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
Assurez-vous de comparer l'ancien avec le nouveau pour vous assurer qu'il n'a rien détruit et essayez de réduire la précision décimale -p (la valeur par défaut est 5 si vous n'en donnez pas un); à un certain niveau, cela commence probablement à déformer les choses, mais une ou deux décimales plus haut devraient bien paraître.
Si vous souhaitez adopter une approche plus manuelle, de nombreux trucs du métier ont été rassemblés dans les changesets du Kilobyte SVG Challenge , qui sont conçus comme une sorte d’espace combiné d’enseignement et d’enseignement pour ce genre de choses.
Oui, vous pouvez incorporer une police dans le fichier SVG ou lier une police externe, comme le montre la prise de Mike Bostock sur le logo WebPlatform.org ( une version non-html ici ).
Il est bien entendu beaucoup plus facile de le faire si vous avez une connaissance détaillée des polices utilisées que si vous choisissez un fichier PDF arbitraire et le convertissez; Je ne connais aucun outil permettant de créer une police sans nom à partir des glyphes incorporés dans le fichier PDF d'origine sans que vous n'ayez effectué vous-même la plupart (ou la totalité) des tâches.
En outre, il existe une liste croissante d'outils d'optimisation SVG dans la section Outils de Kilobyte SVG Challenge README .
J'ai récemment commencé à créer un programme Python pour optimiser les SVG que vous pouvez trouver à l'adresse suivante: https://github.com/petercollingridge/SVG-Optimiser
Il existe une version en ligne très préliminaire à l'adresse: http://petercollingridge.appspot.com/
Avec plus d’informations sur: http://www.petercollingridge.co.uk/blog/svg-optimiser
C’est loin d’être complet et probablement très bogué, mais il traite de certaines des questions mentionnées par Chasbeen, telles que la suppression de la précision inutile et des attributs de style par défaut. 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 pourraient être améliorés.
Je ne comprends pas vraiment ce que vous entendez par l’incorporation de polices. Si vous collez un exemple de fragment du fichier SVG contenant les gyphes et plusieurs éléments de caractère, je pourrais peut-être inclure une méthode pour les combiner.
Sudo npm install -g svgo
pour optimiser tous les svgs dans le répertoire actuel:
svgo -f .
Si vous n'avez pas npm, vous pouvez l'installer sur Ubuntu comme ceci:
Sudo apt-get update && Sudo apt-get install nodejs-legacy npm
Je pense que votre SVG converti est probablement très gonflé de ce qu'il pourrait être. Je ne sais pas si Inkscape le prendra! Il existe des options de menu telles que "Convertir en texte", mais elles ne fonctionnent pas nécessairement.
Vous pouvez rechercher et remplacer sur votre fichier pour supprimer les références aux valeurs d'attribut SVG par défaut, telles que .. Stroke: # 000000; Stroke-width: 1px; Stroke-linecap: butt; stroke-linejoin: mitre; stroke-opacity: 1; Beaucoup d'entre eux sont par défaut de toute façon, alors recherchez et remplacez-les par rien.
C'est aussi incroyable de voir comment vous pouvez réduire la précision inutile. Lors de votre conversion pour ce fichier particulier, vous pourriez bien trouver une fin décimale .0000001 ou .99999675. Toutes ces répétitions peuvent également être supprimées/réduites.
En utilisant la bibliothèque python feedparser, qui inclut sanitization SVG , j’ai écrit cette fonction qui encombrerait svg svg dans un seul élément RSS afin de l’analyser.
import feedparser
def sanitize_svg(svg):
feed = """<?xml version="1.0" encoding="UTF-8" ?><rss><channel><item><description>""" + svg + """</description></item></channel></rss>"""
parsed = feedparser.parse(feed)
return parsed.entries[0].description.encode('utf-8')
Bien que conçu pour la liste blanche des éléments avec la sécurité à l'esprit, il réduit également légèrement la taille de svg.
Peut-être que vous pouvez utiliser un service Web gratuit pour cela.
Essayez ce site: https://online-converting.com/svg-optimizer/