Puis-je convertir du texte SVG en chemin mais réutiliser des glyphes?

14

J'ai un SVG avec beaucoup de texte dessus. C'est une carte de parking avec des numéros d'espace écrits dessus. J'afficher dans un navigateur Web et grâce à un merveilleux petit bug dans Firefox , le navigateur affiche le texte de manière incorrecte. Huer.

J'ai donc converti le texte en chemins. Nous parlons jusqu'à 4000 étiquettes distinctes. Peut-être que 15 000 nouvelles formes sont maintenant des vecteurs. C'est 4 Mo. Normalement, vous pourriez affirmer que cela se prêterait à la compression, mais je dois intégrer ce SVG dans le code HTML . J'ajoute des modifications CSS dynamiquement et c'est la seule façon d'avoir une prise en charge multi-navigateurs. Donc, de toute façon, la sortie brute - même récurée - de ceci est trop grande pour être utile.

Ce qui me frappe ici, c'est que tous ces numéros d'espace partagent des glyphes communs. De zéro à neuf. Pourquoi est-ce que j'inclus une définition de forme pour chaque instance de chaque nombre? Puis-je les dédoublonner?

J'utilise Inkscape mais je suis ouvert aux suggestions.

inkscape svg

— Oli
source

Avez-vous des chances de partager le fichier SVG afin que nous puissions l'expérimenter?

— JohnB

1

Quel est exactement le bug (capture d'écran), et comment l'exportez-vous et le chargez-vous dans un navigateur? Il y a de fortes chances que vous puissiez le corriger avec juste un style CSS, ou un petit script sur la page pour corriger / remplacer les éléments de texte. S'il s'agit d'un affichage de carte dynamique, vous souhaiterez peut-être le transformer en une carte réelle - la plupart des bibliothèques de cartographie de navigateur (et de nombreuses bibliothèques basées sur des données) prennent en charge l'étiquetage.

— brichins

1

Désolé, le SVG n'est pas le mien à partager (il appartient à un client) mais le bug est connu . Cela signifie essentiellement que les polices dans le SVG ne seront pas réduites au-delà d'un point ... Ce qui est un problème grave si vous zoomez complètement sur une carte avec des milliers de places de stationnement numérotées. Ils devraient être (par exemple) ~ 0,08 pt et ils sont en fait 13 pt.

— Oli

1

Vous avez le mauvais numéro de bogue, vous cherchez en fait celui-ci

— Robert Longson

Vous voudrez peut-être tester cela sur un sous-ensemble, mais pouvez- path|simplifyvous vous aider du tout? Un "s" en minuscule se convertit en un chemin de 28 points, le simplifie à 17, et en superposant les versions simplifiées et non simplifiées, même zoomé pour qu'un "s" remplisse l'écran, il n'y a aucune différence.

— Chris H

6

L' <use>élément vous permet de réutiliser des objets définis ailleurs dans le document. Par exemple, vous pouvez définir chaque glyphe comme un <symbol>, puis les réutiliser plusieurs fois. Voici un article agréable à ce sujet: Structuration, regroupement et en SVG Referencing - Le <g>, <use>, <defs>et <symbol>éléments .

Je ne sais pas comment faire cela directement dans Inkscape, cependant - surtout pas pour un tas de texte que vous avez déjà comme texte. Vous devrez peut-être écrire un script pour post-traiter le SVG et trouver tous les chemins qui peuvent être réutilisés.

— Rahul
source

C'est <use>ce que je pensais quand j'ai demandé cela, le script est le comment. Il semble stupide qu'il n'y ait rien pour dédoublonner un balisage presque identique.

— Oli

@Oli, il n'y avait même rien pour dédoublonner un balisage identique ; J'ai dû écrire le mien (et par identique, je veux dire l'octet; je les ai hachés et comparé les hachages)

— Chris H

J'ai réfléchi pendant le déjeuner et j'ai l'impression qu'un script (python) dans inkscape serait la voie à suivre. Le script commencerait par le texte en tant que texte et le remplacerait par des références aux <symbol>s (ou il semble que vous pourriez utiliser <def>vos glyphes texte-chemin

— Chris H

4

Certaines options de compression sont disponibles et offriront divers degrés de réussite. Pour les tester, j'ai créé un fichier d'illustration qui ne contenait que beaucoup de texte répété. Non développé, la taille du fichier est de 13,8 Ko. Élargi, la taille du fichier est de 1,42 MB .

Bonne option: utilisez SVGZ - 46,5 Ko

L'enregistrement de l'illustration développée au format SVGZ m'a donné un fichier de sortie de 46,5 Ko, ce qui est nettement plus petit que le SVG standard. Notez cependant que le support peut varier .

Meilleure option: compresser avec affouillement - 21,1 Ko

Scour est un outil qui nettoiera et optimisera votre fichier SVG pour vous. À l'aide de la commande "compression maximale" de scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, l'illustration développée a été réduite à 21,1 Ko. Pas loin de la taille de fichier non développée d'origine!

— JohnB
source

3

Le récurage ne se comprime pas, il supprime simplement les déchets et bien qu'il fasse beaucoup de bien pour moi (compte tenu du grand nombre d'objets), mon "4 Mo" était post-récurage. Le contenu compressé serait formidable mais - et j'aurais dû le mentionner plus tôt - je dois intégrer le SVG pour les problèmes de ciblage du navigateur (et également les exigences de manipulation frontale). Je sais, je sais, c'est douloureux mais croyez-moi quand je dis que ça me fait plus mal en ce moment D:

— Oli

J'aurais dû dire que la partie à récurer de scourne se comprime pas. Il peut également lancer le fichier via gzip pour vous, mais l'ID et les éléments de minification des espaces blancs sont son principal rôle.

— Oli

@Oli à droite, d'où mon choix judicieux du mot "optimiser" :) C'est une déception que votre fichier soit déjà décapé cependant ... ack!

— JohnB

Je me suis un peu amusé dans Illustrator; sa sortie SVG respecte les symboles. Voici un petit exemple . Cela demanderait beaucoup d'efforts, mais vous pourriez peut-être créer un script Illustrator qui divisera votre texte en caractères individuels et les remplacera par des symboles. Le plus gros obstacle que je vois serait la rotation. Si tout le texte est parallèle à l'axe X, cela ne semble pas difficile, mais traiter le texte sous un angle peut être un défi. Bien sûr, tout cela n'est pas très utile si vous n'avez pas Illustrator disponible

— JohnB

3

Il s'agit d'une solution dans le navigateur ou sur le serveur

Il existe de nombreuses façons d'optimiser les fichiers SVG. On dirait que vous en avez déjà fait pas mal.

Quelques ressources que j'ai trouvées très utiles sont un article css-tricks qui se concentre sur des détails très spécifiques. Et plus précisément, l'outil qu'il utilise SVGO .

Si vous avez de nombreux chemins répétés, j'envisagerais d'utiliser javascript pour créer les formes dynamiquement. Il y a un exemple ici . Une direction serait d'avoir une fonction définie pour chaque glyphe, et d'avoir simplement chaque chemin dans l'élément svg créé par une demande pour cette fonction. Ou prenez une chaîne complète et / ou un tableau d'arguments pour créer votre svg en ligne. Ceci, bien sûr, s'attend à ce que vos chemins soient plus longs que la longueur du code requis pour demander ladite fonction (hypothèse assez facile).

— Luc
source

1

Bien que cette réponse présente plusieurs solutions possibles, SVGO semble le plus intéressant. Il pourrait également être exécuté sur un fichier .svg pour l'optimiser. Cependant, il ne semble pas actuellement faire de déduplication de chemin. Si le demandeur finit par faire des scripts personnalisés, le faire comme une amélioration de SVGO pourrait être une bonne idée.

— jpa

La déduplication @jpa avant (ou pendant) la conversion en chemins serait certainement la voie à suivre. Remplacer toutes les instances du caractère de texte "1" par <use xlink:href="#digit_one">où digit_oneest un chemin

— Chris H

@ChrisH Je ne vois pas pourquoi on ne pourrait pas dédoubler aussi bien après. Normalisez simplement tous les chemins vers l'origine au point de départ, prenez le hachage, utilisez-le pour trouver si le chemin s'est déjà produit. Bien sûr, pas aussi élégant, mais devrait fonctionner et pourrait être plus facile à mettre en œuvre que d'avoir à réimplémenter / comprendre toute la logique de mise en page du texte.

— jpa

@jpa vous pourriez, mais si la normalisation de l'origine introduisait des erreurs d'arrondi, le hachage ne correspondrait pas. Le script auquel je pense appellerait text-to-path d'inkscape pour présenter les chemins des caractères, puis les remplacer par des références à un ensemble de maîtres.

— Chris H

@jpa et les erreurs d'arrondi sont réelles. Sur un exemple de jouet, la première courbe quadratique d'un zéro diffère de 1 à la sixième décimale - assez pour gâcher le hachage

— Chris H

2

Voici à un très haut niveau ce que votre script doit faire. N'hésitez pas à utiliser votre langue et votre environnement préférés, ce n'est qu'un point de départ pour une logique qui devrait vous donner ce que vous recherchez.

Parcourez tous les éléments de texte dans le xml du SVG et pour ceux qui ont du texte numérique (les espaces de stationnement, vous ne spécifiez pas s'il y a plus de texte dans votre svg), changez l'id créé automatiquement par Inkscape en une chaîne avec ce parking numéro du spot. Inkscape n'a besoin que d'ID uniques, il génère des ID non descriptifs mais respectera et ne modifiera pas les ID créés par d'autres logiciels ou créés ou modifiés manuellement par l'utilisateur.
Dans un tableau, enregistrez les coordonnées x et y de l'élément de texte de chaque place de stationnement.
Que ce soit dans Inkscape ou par script, convertissez tout le texte de la place de stationnement en chemins.
Pour les chiffres 0 à 9, ajoutez au fichier SVG une <defs>section appropriée définissant les informations de chemin pour chaque chiffre.
Parcourez toutes les <g>places de stationnement et remplacez-les par un<use xlink:href="#digit" x=x y=y />
Profit

Je peux prévoir certaines complications auxquelles vous devrez faire face, et bonne chance avec celles-ci.

La boucle devra diviser la chaîne de places de stationnement avec 2 chiffres ou plus et l'espacement approprié entre le premier chiffre et les chiffres suivants peut être délicat; cela dépendra fortement des polices que vous utilisez.
Vous ne spécifiez pas dans quelle orientation les places de stationnement sont ou si elles sont même sur des configurations incurvées. En raison des décalages manuels x, y pour les nombres à 2 chiffres et plus, vous pourriez avoir besoin d'une logique supplémentaire pour déterminer `` l'orientation '' d'une place de stationnement et comment espacer correctement les différents chemins des chiffres individuels à partir du premier.

J'espère que cela t'aides. Bonne chance.

— botwhytho
source