Jakie są niektóre opcje optymalizacji SVG?

Question

Mam wiele plików SVG, niektóre z nich są raczej duże (11 MB) i są tworzone z pliku PDF za pomocą pdf2svg.

Problem polega na tym, że SVG jest zbyt duży, otwiera się długo i jest niepotrzebnie skomplikowany. Zawiera głównie tekst i kilka obrazów (think newspaper), a tekst jest podzielony na małe fragmenty postaci, a nawet słowa.

Muszę ją zoptymalizować, najpierw w celu zmniejszenia rozmiaru, a także w celu zmniejszenia ilości elementów, aby szybciej ładować. Jedyne, o czym myślałem, to przyglądanie się postaciom, które znajdują się w jednym wierszu, i dołączenie do nich w pojedynczej <tspan>.

To powinno zmniejszyć ilość elementów tekstowych o dość znaczny margines, ponieważ wygląda na to, że są to głównie grupy 1-5 liter.

Ale szukam więcej rzeczy, które mogę zrobić dla SVG, aby zmniejszyć rozmiar. Jest też główna czcionka, która jest używana dla około 95% tekstu, ale tak jak jest teraz, cały tekst jest zdefiniowany jako glify (renderowane kształty).

Czy można po prostu osadzić czcionkę, więc tekst jest renderowany jako tekst, a nie jako kształty?

Również, jeśli znasz jakąś lepszą bibliotekę do konwersji plików PDF na SVG, byłbym wdzięczny za wszelkie dane wejściowe. Jedynym wymaganiem jest to, że wynik SVG powinien wyglądać dokładnie tak samo, jak plik PDF.

Chciałbym również zauważyć, że prędkość nie jest naprawdę ważna. Nie ma znaczenia, jak długo trwa konwersja, o ile generuje wymagany wynik.

Answer 1

Myślę, że Twój przekonwertowany SVG jest prawdopodobnie bardzo nadęty od tego, jaki mógłby być. Nie jestem pewien, czy Inkscape to weźmie! Dostępne są opcje menu, takie jak "Konwertuj na tekst", ale te niekoniecznie działają.

Możesz wyszukiwać i zamieniać na swoim pliku, aby usunąć odniesienia do domyślnych wartości atrybutów SVG, takich jak .. Skok: # 000000; Szerokość obrysu: 1px; stroke-linecap: butt; stroke-linejoin: mitra; stroke-nieprzezroczystość: 1; Wiele z nich jest domyślnych, więc szukaj i zamień je na nic.

To także zadziwiające, w jaki sposób można zmniejszyć niepotrzebną precyzję. Podczas konwersji dla tego konkretnego pliku możesz znaleźć dziesiętne zakończenie .0000001 lub .99999675 Wszystkie te powtórzenia można również usunąć/zmniejszyć

Answer 2

Niedawno zacząłem tworzyć program Pythona w celu optymalizacji SVG, które można znaleźć w: https://github.com/petercollingridge/SVG-Optimiser

jest to bardzo wstępna wersja on-line pod adresem: http://petercollingridge.appspot.com/

z więcej informacji na: http://www.petercollingridge.co.uk/blog/svg-optimiser

To daleko od kompletne i prawdopodobnie bardzo buggy, ale zajmuje się niektórymi zagadnieniami, o których wspomniał Chasbeen, takimi jak usuwanie niepotrzebnych precyzji i domyślnych atrybutów stylu. Może także usunąć niepotrzebne atrybuty i przestrzenie nazw, jeśli wiesz, czego szukasz, i przekonwertuje style na CSS, co ułatwia sprawdzenie, w jaki sposób można je poprawić.

Nie bardzo rozumiem, co masz na myśli mówiąc o osadzaniu czcionek. Jeśli wkleisz przykładowy fragment SVG pokazujący gifów i wiele elementów znaków, być może uda mi się dołączyć metodę, która je połączy.

Answer 3

Mogę polecić Scour, ponieważ bardzo dużo z niego korzystałem, usuwając niepotrzebne pliki z plików SVG, co jest moim hobby.

Przykładem przeszukać wiersza poleceń, które mogą dobrze służyć (i które staram się zaczynać od):

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 

Pamiętaj, aby porównać stare z nowym, aby upewnić się, że nic nie zniszczyć i spróbuj zmniejszyć dokładność dziesiętną -p (domyślną wartością jest 5, jeśli jej nie podajesz); na pewnym poziomie prawdopodobnie zaczyna źle to zniekształcać, ale jeden lub dwa miejsca dziesiętne wyżej powinny wyglądać dobrze.

Jeśli chcesz podejść bardziej manualnie, istnieje wiele sztuczek z branży zebranych w Kilobyte SVG Challenge changesets, które są przeznaczone jako rodzaj połączonego miejsca nauki i nauczania dla tego rodzaju rzeczy.

Tak, możesz osadzić czcionkę w pliku SVG lub połączyć zewnętrzną, co pokazał Mike Bostock w wersji WebPlatform.org logo (non-html-wrapped version here).

Oczywiście jest o wiele łatwiej to zrobić, jeśli masz szczegółową wiedzę na temat używanych fontów niż w przypadku wybrania dowolnego pliku PDF i przekonwertowania go; Nie znam żadnych narzędzi, które tworzą czcionkę bez nazwy, niezależnie od tego, co glify zawierają w oryginalnym pliku PDF, bez wykonywania większości (lub wszystkich) tej pracy samodzielnie.

Ponadto istnieje rosnąca lista narzędzi do optymalizacji SVG w sekcji Narzędzia Kilobyte SVG Challenge README.

Answer 4

Narzędzie SVG-Cleaner działa doskonale: znacznie szybciej niż inne, lepsza kompresja, solidne w moich testach, przetwarzanie w plikach wsadowych i hej! instalator windows dla nas leniwych!

Moja próba: Oryginalny rozmiar pliku: 241 KB, po InkScape usuwanie odwołań: 149K, czyszczenie za pomocą narzędzia: 38 KB, oczyszczone i skompresowane: 5 KB (rozszerzenie pliku .sgvz).

Próbowałem otworzyć ostatnią, oczekując pustego rysunku ... Ale moja grafika wciąż była nienaruszona!

Pobierz to here (Windows, Ubuntu lub źródło)

Answer 5

https://github.com/svg/svgo

sudo npm install -g svgo 

do optymalizacji wszystkich pomostów żylnych w bieżącym katalogu:

svgo -f . 

Jeśli nie masz NPM , możesz zainstalować go na Ubuntu:

sudo apt-get update && sudo apt-get install nodejs-legacy npm 

Answer 6

Korzystając z biblioteki python feedparser, która zawiera SVG sanitization, napisałem tę funkcję, która denerwująco owija svg w pojedynczy element RSS w celu jego przeanalizowania.

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') 

Mimo że stworzono go z myślą o dodaniu elementów do białej listy z myślą o bezpieczeństwie, zmniejsza on również rozmiar svg.

Answer 7

Może to dotyczyć bezpłatnej usługi Web Service.

Spróbuj witrynie: https://online-converting.com/svg-optimizer/