Чи можу я перетворити текст SVG у шлях, але повторно використовувати гліфи?

14

У мене є SVG з завантаженням тексту. Це карта парків із написаними на ньому космічними номерами. Я показую це у веб-браузері, і завдяки чудовій помилку у Firefox , браузер відображає текст неправильно. Бу

Тому я перетворив текст у шляхи. Ми говоримо про до 4000 окремих етикеток. Можливо, 15000 нових форм зараз вони вектори. Це 4 Мб. Зазвичай ви можете стверджувати, що це схиляється до стиснення, але я повинен вбудовувати цей SVG в HTML . Я динамічно додаю зміни CSS, і це єдиний спосіб, коли я маю шанс підтримати перехресні веб-переглядачі. Так що в будь-якому випадку, сирий - навіть очищений - вихід цього занадто великий, щоб бути корисним.

Що мене вражає, це те, що всі ці просторові числа поділяють загальні гліфи. Нуль через дев'ять. Чому я включаю визначення форми для кожного примірника кожного числа? Чи можу я їх повторити?

Я використовую Inkscape, але я відкритий для пропозицій.

inkscape svg

— Олі
джерело

Будь-який шанс ви могли поділитися файлом SVG, щоб ми могли з ним експериментувати?

— JohnB

1

Що таке помилка (скріншот), і як ви експортуєте та завантажуєте її у браузер? Є хороший шанс, що ви можете виправити це лише за допомогою стилів CSS або невеликого сценарію на сторінці, щоб виправити / замінити текстові елементи. Якщо це динамічне відображення карт, можливо, ви захочете перетворити його на фактичну карту - більшість бібліотек відображення браузера (і багато з них, що базуються на даних) мають велику підтримку маркування.

— бричін

1

На жаль, SVG не є моїм поділитися (він належить клієнту), але про помилку відомо . Це по суті означає, що шрифти в SVG не зміняться вниз за крапкою ... Це серйозна проблема, якщо ви наближаєтесь до карти з тисячами пронумерованих паркувальних місць. Вони повинні бути (наприклад) ~ 0,08pt, а вони насправді 13pt.

— Олі

1

У вас неправильний номер помилки, ви насправді шукаєте цього

— Роберт Лонгсон

Ви можете перевірити це на підмножині, але чи зможете path|simplifyвам допомогти? Нижній регістр "s" перетворюється на 28 точковий шлях, спрощує прокручування його до 17, а накладення спрощеної та не спрощеної версії навіть збільшується, так що один "s" заповнює екран, різниці немає.

— Кріс Х

6

<use>Елемент дозволяє повторно використовувати об'єкти , визначені в іншому місці в документі. Наприклад, ви можете визначити кожен гліф як a, <symbol>а потім повторно використовувати їх кілька разів. Ось хороша стаття про нього: структурування, групування і реферування в SVG - The <g>, <use>, <defs>і <symbol>елементи .

Я не знаю, як це зробити безпосередньо в Inkscape, тим більше - особливо для купки тексту, який у вас уже є текстом. Можливо, вам доведеться написати сценарій, щоб після обробки SVG і знайти всі шляхи, які можна повторно використати.

— Рахул
джерело

<use>Було то , що я думав , коли я запитав це, скриптова як. Здається дурним, що там немає нічого, щоб дублювати майже однакову розмітку.

— Олі

@Oli не було нічого навіть для виведення однакової розмітки; Мені довелося написати своє (і однаково я маю на увазі байт; я їх хешив і порівняв хеши)

— Кріс Х

Я подумав над обідом, і мені здається, що (пітон) сценарій в Inkscape - це саме шлях. Сценарій починається з тексту як текст і замінює його посиланнями на <symbol>s (або, схоже, ви могли б отримати <def>свої гліфи з текстового шляху

— Кріс Х

4

Є кілька варіантів стиснення, які дозволять досягти різного ступеня успіху. Щоб перевірити їх, я створив файл художнього твору, який містить лише багато повторених текстів. Нерозширений, розмір файлу - 13,8 Кб. Розгорнутий, розмір файлу - 1,42 Мб .

Хороший варіант: використовуйте SVGZ - 46,5 Кб

Збереження розширеного твору у вигляді SVGZ дало мені вихідний файл у 46,5 КБ, що значно менше, ніж у стандартному SVG. Зверніть увагу, хоча ця підтримка може відрізнятися .

Кращий варіант: стиснути за допомогою бича - 21,1 Кб

Scour - це інструмент, який допоможе очистити та оптимізувати ваш SVG-файл. Використовуючи команду "максимальне стиснення" scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, розширений твір скоротився до 21,1 Кб. Не за горами від оригінального нерозширеного розміру файлу!

— JohnB
джерело

3

Чистка не стискає, вона просто видаляє мотлох, і, хоча це робить неабияку користь для мене (зважаючи на величезну кількість об'єктів), мій "4 Мб" був після прокрутки. Стислий вміст був би чудовим, але - і я повинен був це згадати раніше - я повинен вбудувати SVG для проблем, орієнтованих на браузер (а також вимог щодо маніпуляцій із фронтедом). Я знаю, я знаю, це боляче, але повір мені, коли я кажу, що мені більше боляче в даний момент D:

— Олі,

Я повинен був сказати, що вичищає частина scourне стискається. Він також може перекинути файл через gzip для вас, але ідентифікація ідентифікатора та пробілів пробілів - це його головний концерт.

— Олі

@ Правильно, отже, мій ретельний вибір слова "оптимізувати" :) Це промінь, що ваш файл уже проглядається, хоча ... ак!

— JohnB

Я трохи заплутався в Illustrator; його вихід SVG поважає символи. Ось короткий приклад . Це займе трохи зусиль, але ви, можливо, зможете створити сценарій Illustrator, який розділить ваш текст на окремі символи та замінить їх символами. Найбільша перешкода, яку я бачу, стосується обертання. Якщо весь текст паралельний осі X, це не здається важким, але поводження з текстом під кутом може бути проблемою. Звичайно, все, що не дуже корисно, якщо у вас немає Illustrator

— JohnB

3

Це рішення в браузері або на сервері

Існує багато різних способів оптимізації файлів SVG. Здається, ви вже неабияк зробили це.

Кілька ресурсів, які мені здаються дуже корисними, - це стаття css-трюки, яка зосереджена на дуже конкретних деталях. І конкретно, інструмент, яким він користується SVGO .

Якщо у вас багато, повторених шляхів, я б розглядав можливість використання javascript для створення фігур Динамічно. Існує приклад тут . Одним із напрямків було б мати певну функцію для кожного гліфа і просто мати кожен шлях у елементі svg, створений запитом на цю функцію. Або візьміть повний рядок та / або масив аргументів, щоб створити вбудований svg. Звичайно, очікується, що ваші шляхи перевищують довжину коду, необхідного для запиту вказаної функції (досить просте припущення).

— Лука
джерело

1

Хоча ця відповідь представляє безліч можливих рішень, SVGO видається найцікавішим. Він також може бути запущений у .svg файл для його оптимізації. Однак, схоже, наразі не відбувається дедуплікація шляху. Якщо запитувач все-таки робить власні сценарії, це може бути хорошою ідеєю.

— jpa

@jpa дедупінг перед (або поки) перетворенням на шляхи - це, безумовно, шлях. Замініть усі екземпляри текстової символіки "1" на те, <use xlink:href="#digit_one">де digit_oneє шлях

— Chris H

@ChrisH Я не можу зрозуміти, чому не можна було б депутати потім. Просто нормалізуйте всі шляхи до початку на початковій точці, візьміть хеш, використовуйте це, щоб знайти, чи шлях вже відбувся. Впевнений, не такий елегантний, але повинен працювати і може бути простішим у виконанні, ніж потрібно повторно виконувати / розбирати всю логіку компонування тексту.

— jpa

@jpa ви могли, але якби нормалізація походження ввела помилки округлення, хеш не відповідав би. Сценарій, про який я думаю, закликав би текст-шлях до Inkscape викласти шляхи символів, але потім замінить їх посиланнями на набір майстрів.

— Кріс Х

@jpa і помилки округлення справжні. На іграшковому прикладі перша квадратична крива нуля відрізняється на 1 у шостому знаці після коми - достатньо, щоб накрутити хешинг

— Кріс Х

2

Тут на дуже високому рівні - це те, що повинен робити ваш сценарій. Не соромтеся використовувати бажану мову та навколишнє середовище, це лише вихідна точка для логіки, яка повинна дати вам те, що ви шукаєте.

Проведіть цикл через усі текстові елементи у xml SVG та для тих, у яких числовий текст (місця для паркування, ви не вказуєте, чи є більше тексту у вашому svg), автоматично змініть ідентифікатор, створений Inkscape, на рядок із цим парковкою номер плями. Inkscape потребує лише унікальних ідентифікаторів, він генерує не описові ідентифікатори, але поважає та не змінює ідентифікатори, створені іншим програмним забезпеченням або створені вручну або змінені користувачем.
У таблиці зберігають x & y координати текстового елемента кожного місця для паркування.
Перетворюйте текст Inkscape або за допомогою сценарію, перетворюючи весь текст місця для паркування в контури.
Для цифр 0-9 додайте до файлу SVG відповідний <defs>розділ, що визначає інформацію про шлях для кожної цифри.
Проведіть через усі місця <g>для паркування і замініть їх на<use xlink:href="#digit" x=x y=y />
Прибуток

Я можу передбачити деякі ускладнення, з якими вам доведеться зіткнутися, і удачу з ними.

Цикл повинен буде розділити рядок місць для паркування на 2 або більше цифр, і відповідний проміжок між першою та наступними цифрами може бути складним; це сильно залежатиме від шрифтів, які ви використовуєте.
Ви не вказуєте, в якій орієнтації стоять місця для паркування або якщо вони навіть є на вигнутих місцях. Через ручне x, y зміщення для двозначних чисел і більше, вам може знадобитися додаткова логіка, щоб визначити «орієнтацію» місця для паркування та як правильно розмістити різні траси окремих цифр від першої.

Сподіваюсь, це допомагає. Щасти.

— ботвіто
джерело