Kann ich SVG-Text in Pfad konvertieren, aber Glyphen wiederverwenden?

14

Ich habe eine SVG mit einer Menge Text. Es ist eine Parkplatzkarte mit Platznummern. Ich zeige dies in einem Webbrowser an und dank eines wunderbaren kleinen Fehlers in Firefox gibt der Browser den Text falsch wieder. Boo.

Also habe ich den Text in Pfade umgewandelt. Wir sprechen von bis zu 4000 verschiedenen Etiketten. Vielleicht 15.000 neue Formen, jetzt sind sie Vektoren. Es ist 4 MB. Normalerweise könnte man behaupten, dass dies zu einer Komprimierung führen würde, aber ich muss diese SVG in den HTML-Code einbinden . Ich füge CSS-Änderungen dynamisch hinzu und nur so habe ich die Möglichkeit, browserübergreifende Unterstützung zu erhalten. Auf jeden Fall ist die rohe Ausgabe - auch wenn sie gereinigt wurde - zu groß, um nützlich zu sein.

Was mir hier auffällt, ist, dass all diese Leerzeichen gemeinsame Glyphen haben. Null bis neun. Warum füge ich eine Formdefinition für jede Instanz jeder Zahl hinzu? Kann ich diese duplizieren?

Ich benutze Inkscape, bin aber offen für Vorschläge.

inkscape svg Oli
quelle
Gibt es eine Chance, dass Sie die SVG-Datei freigeben, damit wir damit experimentieren können?
JohnB
1
Was genau ist der Fehler (Screenshot) und wie exportieren und laden Sie ihn in einen Browser? Es besteht eine gute Chance, dass Sie es mit etwas CSS-Stil oder einem kleinen Skript auf der Seite korrigieren können, um die Textelemente zu korrigieren / zu ersetzen. Wenn es sich um eine dynamische Kartenanzeige handelt, möchten Sie sie möglicherweise in eine tatsächliche Karte umwandeln. Die meisten Browser-Zuordnungsbibliotheken (und viele datenbasierte Bibliotheken) unterstützen die Beschriftung hervorragend.
Brichins
1
Entschuldigung, die SVG kann nicht von mir geteilt werden (sie gehört einem Client), aber der Fehler ist bekannt . Dies bedeutet im Wesentlichen, dass die Schriftarten in der SVG-Datei nicht über einen bestimmten Punkt hinaus verkleinert werden. Dies ist ein ernstes Problem, wenn Sie auf einer Karte mit Tausenden von nummerierten Parkplätzen ganz herausgezoomt sind. Sie sollten (zB) ~ 0.08pt sein und sie sind tatsächlich 13pt.
Oli
1
Sie haben die falsche Fehlernummer, Sie suchen tatsächlich nach dieser
Robert Longson
Möglicherweise möchten Sie dies an einer Teilmenge testen, können path|simplifyIhnen aber überhaupt helfen? Ein "s" in Kleinbuchstaben wird in einen Pfad mit 28 Punkten umgewandelt, vereinfacht auf 17 Punkte und überlagert die vereinfachten und nicht vereinfachten Versionen, die sogar gezoomt wurden, so dass ein "s" den Bildschirm ausfüllt, es gibt keinen Unterschied.
Chris H

Antworten:

6

Mit dem <use>Element können Sie an anderer Stelle im Dokument definierte Objekte wiederverwenden. Sie können beispielsweise jedes Symbol als definieren <symbol>und es dann mehrmals wiederverwenden. Hier ist ein schöner Artikel über sie: Strukturierung, Gruppieren und Referenzierung in SVG - Die <g>, <use>, <defs>und <symbol>Elemente .

Ich weiß allerdings nicht, wie ich das direkt in Inkscape machen soll - vor allem nicht für eine Menge Text, die Sie bereits als Text haben. Möglicherweise müssen Sie ein Skript schreiben, um die SVG nachzubearbeiten und alle Pfade zu finden, die wiederverwendet werden können.

Rahul
quelle
Das <use>war es, woran ich dachte, als ich danach fragte, das Skripting ist das Wie. Scheint albern, dass es da draußen nichts gibt, um nahezu identische Markups zu de-duplizieren.
Oli
@Oli es gab nichts, was identisches Markup hätte entlarven können ; Ich musste meine eigene schreiben (und damit meine ich das Byte; ich habe sie gehasht und Hashes verglichen)
Chris H
Ich habe über das Mittagessen nachgedacht und es kommt mir vor, als wäre ein (Python-) Skript in inkscape der richtige Weg. Das Skript würde mit dem Text als Text beginnen, und ersetzen sie durch Verweise auf die <symbol>s (oder es sieht aus wie könnten Sie <def>Ihren Text-to-Pfad Glyphen
Chris H
4

Es sind einige Komprimierungsoptionen verfügbar, die unterschiedliche Erfolgsgrade bieten. Um sie zu testen, habe ich eine Grafikdatei erstellt, die nur viele wiederholte Texte enthält. Ohne Erweiterung beträgt die Dateigröße 13,8 KB. Erweitert beträgt die Dateigröße 1,42 MB .

Gute Option: Verwenden Sie SVGZ - 46,5 KB

Durch das Speichern des erweiterten Bildmaterials als SVGZ erhielt ich eine Ausgabedatei von 46,5 KB, die erheblich kleiner ist als die Standard-SVG-Datei. Beachten Sie jedoch, dass die Unterstützung variieren kann .

Bessere Option: Mit Scour komprimieren - 21,1 KB

Scour ist ein Tool, das Ihre SVG-Datei für Sie bereinigt und optimiert. Mit dem Befehl "Maximale Komprimierung" von scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=nonewurde das erweiterte Bildmaterial auf 21,1 KB reduziert. Nicht weit von der ursprünglichen, nicht erweiterten Dateigröße entfernt!

JohnB
quelle
3
Scheuern komprimiert nicht, es entfernt nur Müll und obwohl es mir (angesichts der großen Anzahl von Objekten) ziemlich gut tut , waren meine "4 MB" nach dem Scheuern. Komprimierte Inhalte wären großartig, aber - und das hätte ich früher erwähnen sollen - ich muss die SVG-Datei für Browser-Targeting-Probleme (und auch für Manipulationsanforderungen im Frontend) einbinden. Ich weiß, ich weiß, es tut weh, aber glaub mir, wenn ich sage, es tut mir im Moment mehr weh. D:
Oli
Ich hätte sagen sollen, der scheuernde Teil von scourkomprimiert nicht. Es kann auch die Datei durch gzip für Sie werfen aber die ID und Leerzeichen minification Zeug ist sein Haupt Gig.
Oli
@Oli richtig, daher meine sorgfältige Auswahl des Wortes "optimieren" :) Das ist ein Blödsinn, dass Ihre Datei jedoch bereits gescourt ist ... ack!
JohnB
Ich habe ein bisschen in Illustrator rumgespielt. Die SVG-Ausgabe berücksichtigt Symbole. Hier ist ein kurzes Beispiel . Es wäre ein ziemlicher Aufwand, aber möglicherweise können Sie ein Illustrator-Skript erstellen, das Ihren Text in einzelne Zeichen aufteilt und durch Symbole ersetzt. Die größte Hürde, die ich sehe, ist die Rotation. Wenn der gesamte Text parallel zur X-Achse verläuft, scheint dies nicht schwierig zu sein, der Umgang mit Text in einem bestimmten Winkel kann jedoch eine Herausforderung darstellen. Natürlich ist das alles nicht sehr hilfreich, wenn Illustrator nicht verfügbar ist
JohnB
3

Dies ist eine In-Browser- oder On-Server-Lösung

Es gibt viele verschiedene Möglichkeiten, um SVG-Dateien zu optimieren. Klingt so, als hättest du schon einiges getan.

Ein paar Ressourcen, die ich als sehr nützlich empfunden habe, sind CSS-Tricks , die sich auf sehr spezifische Details konzentrieren. Und speziell das Tool, das SVGO verwendet .

Wenn Sie viele, wiederholte Pfade haben, würde ich in Betracht ziehen, Javascript zu verwenden, um die Formen dynamisch zu erstellen. Es ist ein Beispiel hier . Eine Richtung wäre, eine definierte Funktion für jede Glyphe zu haben und einfach jeden Pfad innerhalb des SVG-Elements durch eine Anfrage für diese Funktion zu erzeugen. Oder nehmen Sie eine vollständige Zeichenfolge und / oder ein Array von Argumenten, um Ihre Inline-Svg zu erstellen. Dies setzt natürlich voraus, dass Ihre Pfade länger sind als der Code, der zum Anfordern dieser Funktion erforderlich ist (ziemlich einfache Annahme).

Luke
quelle
1
Während diese Antwort mehrere mögliche Lösungen darstellt, scheint SVGO am interessantesten zu sein. Es könnte auch in einer .svg-Datei ausgeführt werden, um es zu optimieren. Derzeit scheint es jedoch keine Pfad-Deduplizierung zu geben. Wenn der Fragesteller trotzdem ein benutzerdefiniertes Skript erstellt, ist es möglicherweise eine gute Idee, dies als Erweiterung von SVGO zu tun.
jpa
@jpa Deduplizieren vor (oder während) der Konvertierung in Pfade wäre sicherlich der richtige Weg. Ersetzen Sie alle Instanzen des Textzeichens "1" durch " <use xlink:href="#digit_one">where digit_oneis a path"
Chris H,
@ ChrisH Ich kann nicht verstehen, warum man hinterher nicht so gut abrechnen konnte. Normalisieren Sie einfach alle Pfade zum Ursprung am Startpunkt, nehmen Sie einen Hash und verwenden Sie diesen, um herauszufinden, ob der Pfad bereits aufgetreten ist. Sicher, nicht so elegant, aber sollte funktionieren und könnte einfacher zu implementieren sein, als die gesamte Textlayoutlogik neu zu implementieren / herauszufinden.
JPA
@jpa Sie könnten, aber wenn das Normalisieren des Ursprungs Rundungsfehler einführt, würde der Hash nicht übereinstimmen. Das Skript, an das ich denke, würde inkscape Text-to-Path aufrufen, um die Zeichenpfade darzustellen, sie dann aber durch Verweise auf eine Reihe von Mastern ersetzen.
Chris H
@jpa und die Rundungsfehler sind real. Auf einem Spielzeug Beispiel die erste quadratische Kurve eines Null unterscheidet sich um 1 in der sechsten Dezimalstelle - genug zuzuschrauben hashing
Chris H
2

Hier ist auf einem sehr hohen Niveau, was Ihr Skript tun sollte. Fühlen Sie sich frei, Ihre bevorzugte Sprache und Umgebung zu verwenden. Dies ist nur ein Ausgangspunkt für eine Logik, die Ihnen das geben sollte, wonach Sie suchen.

  • Durchlaufen Sie alle Textelemente in der SVG-XML und ändern Sie für diejenigen mit numerischem Text (die Parkplätze, die Sie nicht angeben, wenn Ihre Svg mehr Text enthält) die von Inkscape automatisch erstellte ID in eine Zeichenfolge mit diesem Parkplatz Nummer des Spots. Inkscape benötigt nur eindeutige IDs. Es generiert nicht beschreibende IDs. IDs, die von anderer Software erstellt oder vom Benutzer manuell erstellt oder geändert wurden, werden jedoch nicht berücksichtigt und geändert.
  • Speichern Sie in einer Tabelle die x & y-Koordinaten des Textelements jedes Parkplatzes.
  • Konvertieren Sie in Inkscape oder per Skript den gesamten Parkplatztext in Pfade.
  • Für Ziffern 0-9 Append zu der SVG - Datei ein entsprechender <defs>Abschnitt definiert , die Pfadinformationen für jede Ziffer.
  • Durchlaufen Sie alle <g>s der Parkplätze und ersetzen Sie sie durch a<use xlink:href="#digit" x=x y=y />
  • Profitieren

Ich kann einige Komplikationen vorhersehen, mit denen Sie fertig werden müssen, und viel Glück damit.

  • Die Schleife muss die Reihe der Parklücken mit 2 oder mehr Ziffern aufteilen, und der entsprechende Abstand zwischen der ersten Ziffer und den nachfolgenden Ziffern kann schwierig sein. Dies hängt stark von den verwendeten Schriftarten ab.
  • Sie geben nicht an, in welcher Ausrichtung sich die Parkplätze befinden oder ob sie sich sogar in einer Kurve befinden. Aufgrund der manuellen x, y-Offsets für zweistellige Zahlen und mehr benötigen Sie möglicherweise zusätzliche Logik, um die Ausrichtung eines Parkplatzes zu ermitteln und die unterschiedlichen Pfade der einzelnen Ziffern vom ersten korrekt zu trennen.

Hoffe das hilft. Viel Glück.

Botwhytho
quelle