Czy mogę przekonwertować tekst SVG na ścieżkę, ale ponownie użyć glifów?

Mam plik SVG z dużą ilością tekstu. To mapa parkingu z wypisanymi na niej numerami spacji. Wyświetlam to w przeglądarce internetowej, a dzięki cudownym drobnym błędom w przeglądarce Firefox niepoprawnie renderuje tekst. Gwizd.

Więc przekonwertowałem tekst na ścieżki. Mówimy o do 4000 oddzielnych etykiet. Może teraz 15 000 nowych kształtów to teraz wektory. To 4 MB. Normalnie możesz argumentować, że to nadałoby się do kompresji, ale ja muszę wstawić SVG do HTML . Dodaję zmiany CSS dynamicznie i tylko w ten sposób mam szansę na obsługę wielu przeglądarek. Tak czy inaczej, surowa - nawet przeszukana - wydajność tego jest zbyt duża, aby była użyteczna.

Uderza mnie to, że wszystkie te liczby kosmiczne mają wspólne glify. Od zera do dziewięciu. Dlaczego dołączam definicję kształtu dla każdego wystąpienia każdej liczby? Czy mogę je zduplikować?

Korzystam z Inkscape, ale jestem otwarty na sugestie.

Ten <use>element umożliwia ponowne użycie obiektów zdefiniowanych w innym miejscu w dokumencie. Na przykład możesz zdefiniować każdy glif jako a, <symbol>a następnie użyć go wiele razy. Oto ciekawy artykuł o tym: strukturyzacji, grupowanie i odniesienie w SVG - The <g>, <use>, <defs>i <symbol>Elements .

Nie wiem jednak, jak to zrobić bezpośrednio w Inkscape - szczególnie nie w przypadku fragmentu tekstu, który masz już jako tekst. Konieczne może być napisanie skryptu w celu późniejszego przetworzenia pliku SVG i znalezienia wszystkich ścieżek, które można ponownie wykorzystać.

Dostępnych jest kilka opcji kompresji zapewniających różne stopnie powodzenia. Aby je przetestować, stworzyłem plik grafiki, który zawierał tylko dużo powtarzającego się tekstu. Rozmiar pliku nierozwiniętego wynosi 13,8 KB. Po rozwinięciu rozmiar pliku wynosi 1,42 MB .

Dobra opcja: użyj SVGZ - 46,5 KB

Zapisanie rozwiniętej grafiki jako SVGZ dało mi plik wyjściowy 46,5 KB, który jest znacznie mniejszy niż standardowy plik SVG. Pamiętaj jednak, że wsparcie może się różnić .

Lepsza opcja: kompresuj za pomocą Scour - 21,1 KB

Scour to narzędzie, które będzie szorować i optymalizować plik SVG za Ciebie. Za pomocą polecenia „maksymalna kompresja” scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=nonerozszerzonej grafiki zmniejszono do 21,1 KB. Niedaleko oryginalnego nierozwiniętego rozmiaru pliku!

Jest to rozwiązanie w przeglądarce lub na serwerze

Istnieje wiele różnych sposobów optymalizacji plików SVG. Wygląda na to, że już to zrobiłeś.

Kilka zasobów, które uważam za bardzo przydatne, to artykuł z trikami css, który koncentruje się na bardzo szczegółowych szczegółach. A w szczególności narzędzie, z którego korzysta SVGO .

Jeśli masz wiele powtarzających się ścieżek, rozważę użycie javascript do dynamicznego tworzenia kształtów. Oto przykład . Jednym kierunkiem byłoby zdefiniowanie funkcji dla każdego glifu i po prostu utworzenie każdej ścieżki w elemencie svg na podstawie żądania tej funkcji. Lub weź pełny ciąg i / lub tablicę argumentów, aby utworzyć własny plik SVG. To oczywiście oczekuje, że twoje ścieżki są dłuższe niż długość kodu wymaganego do żądania wspomnianej funkcji (dość łatwe założenie).

Tutaj na bardzo wysokim poziomie jest to, co powinien zrobić skrypt. Możesz swobodnie korzystać z preferowanego języka i środowiska, to tylko punkt wyjścia do logiki, która powinna dać ci to, czego szukasz.

• Pętlę przez wszystkie elementy tekstowe w pliku XML SVG, a dla tych, które zawierają tekst numeryczny (miejsca parkingowe, nie określasz, czy jest więcej tekstu w pliku svg), zmień identyfikator automatycznie utworzony przez Inkscape na ciąg znaków z tym parkingiem numer miejsca. Inkscape potrzebuje tylko unikalnych identyfikatorów, generuje nieopisowe identyfikatory, ale będzie respektować, a nie zmieniać identyfikatorów utworzonych przez inne oprogramowanie lub ręcznie utworzonych lub zmienionych przez użytkownika.
• W tabeli przechowuj współrzędne x i y elementu tekstowego każdego miejsca parkingowego.
• Czy to w Inkscape, czy przez skrypty, zamień cały tekst miejsca parkingowego na ścieżki.
• W przypadku cyfr 0–9 dołącz do pliku SVG odpowiednią <defs>sekcję określającą informacje o ścieżce dla każdej cyfry.
• Zapętlić wszystkie <g>miejsca parkingowe i zastąpić je symbolem<use xlink:href="#digit" x=x y=y />
• Zysk

Mogę przewidzieć pewne komplikacje, z którymi będziesz musiał sobie poradzić, i powodzenia z nimi.

• Pętla będzie musiała podzielić ciąg miejsc parkingowych z 2 lub więcej cyfr, a odpowiednie odstępy między pierwszą cyfrą a kolejnymi cyframi mogą być trudne; będzie to w dużej mierze zależeć od używanych czcionek.
• Nie określasz, w jakiej orientacji znajdują się miejsca parkingowe ani czy znajdują się nawet w zakrzywionych konfiguracjach. Ze względu na ręczne przesunięcia x, y dla liczb dwucyfrowych i większych, może być potrzebna dodatkowa logika, aby obliczyć „orientację” miejsca parkingowego i jak prawidłowo rozmieścić różne ścieżki poszczególnych cyfr od pierwszego.

Mam nadzieję że to pomoże. Powodzenia.