Czy mogę zmniejszyć rozmiar pliku SVG, aby był bliższy jego odpowiednikowi JPEG?

37

Mam obraz, którego używam na stronie internetowej. Chciałbym użyć SVG, aby mógł mieć dowolny rozmiar i nadal wyglądać ostro.

  • Ta skrzynka zawiera plik SVG, a także oryginalny plik programu Illustrator.
  • To jest eksport JPEG:

    Eksport JPEG

Plik SVG ma znacznie większy rozmiar pliku niż JPG. Czy można zoptymalizować plik SVG, aby miał podobny rozmiar pliku? Mogłabym stracić trochę jakości, jeśli to pomogłoby. Próbowałem tego optymalizatora SVG , ale nie miało to większego znaczenia.

Jeśli zapiszę plik ilustratora jako JPG, prześledź wynik i zapisz go jako SVG, a następnie otrzymam znacznie mniejszy rozmiar pliku, ale z pewną utratą jakości. To sprawia, że ​​myślę, że może warstwy w oryginale powodują duży rozmiar? Czy obraz, nad którym pracuję, jest zbyt skomplikowany, aby nadawał się do SVG?

Evanss
źródło
16
Nie ma związku z twoim pytaniem, ale nie powinieneś używać JPG do takich zdjęć. Zamiast tego użyj PNG: rozmiar prawdopodobnie będzie podobny i nie pogorszy się jakość.
svick
Zdaj sobie sprawę, że porównanie będzie zależeć od fizycznego rozmiaru obrazu. Skalowanie pliku JPEG znacznie zwiększa jego rozmiar. Skalowanie pliku SVG nie ma wpływu. Można sobie wyobrazić, że bardzo mała ikona byłaby mniejsza jak JPEG, chociaż nie nazwałbym twojej grafiki bardzo małą.
Paul Draper,
Jeśli nie jesteś użytkownikiem Inkscape i nie czujesz się pewnie, czy grasz w SVG ręcznie, możesz polubić narzędzie online, do którego podałem link w mojej odpowiedzi .
Dom
1
Aby dodać do komentarza Svicka: obrazy „takie jak ten”, w których PNG jest lepszy, to wszystko z przezroczystymi krawędziami lub wszystko z ostrymi jednolitymi obszarami koloru lub bieli. Jeśli jest to „grafika” (np. Logo, ikona itp.), A nie „zdjęcie”, PNG jest zwykle lepszy. JPG jest lepszy do zdjęć (lub zdjęć realistycznych).
user56reinstatemonica8 13.04.15

Odpowiedzi:

40

Plik SVG zawiera osadzoną pikselową grafikę dla odcienia w prawym dolnym rogu kontrolera. Jest to odpowiedzialne za około ⅔ rozmiaru pliku. Jeśli go usuniesz, plik SVG będzie równy plikowi JPEG. Prawdopodobnie można uzyskać odpowiednio podobny efekt za pomocą gradientu.

Inne techniki zmniejszania rozmiaru pliku SVG obejmują:

  • Usuń wszystkie metadane i podobne. W tym celu Inkscape zapisuje jako zwykły plik SVG . Przypuszczam, że inne programy mają coś podobnego.
  • Usuń węzły, które niewiele dodają do kształtów, np. Istnieją fałszywe węzły w kształcie kontrolera.

To sprawia, że ​​myślę, że może warstwy w oryginale powodują duży rozmiar?

O ile nie używasz absurdalnie wielu warstw (pomyśl o jednej warstwie dla każdego obiektu), warstwy nie powinny mieć istotnego wpływu na rozmiar pliku, a nawet wtedy byłby to tylko ułamek.

Czy obraz, nad którym pracuję, jest zbyt skomplikowany, aby nadawał się do SVG?

Jeśli możesz rozsądnie utworzyć obraz od podstaw¹, nie powinno to być zbyt skomplikowane dla formatu SVG. Nie ma czegoś takiego, jak magiczny próg złożoności, powyżej którego eksplodują rozmiary plików (prawdopodobnie dotyczy to dowolnego rozsądnego formatu). Oczywiście, jeśli wybierzesz tylko wystarczająco grubą rozdzielczość, możesz wyeksportować każdy plik SVG do pliku JPEG o mniejszym rozmiarze pliku. Ale to niekoniecznie oznacza, że ​​nie powinieneś używać SVG.


¹ Jest to w szczególności bez śledzenia i podobne. Podajmy skrajny przykład: jeśli chcesz dokładnie odtworzyć każdy piksel zdjęcia za pomocą prymitywów SVG (tj. Bez osadzania grafiki pikselowej w SVG), możesz rzeczywiście uznać wynik za zbyt skomplikowany, aby mógł być skutecznie reprezentowany w formacie SVG . Ale mam nadzieję, że to zdrowy rozsądek.

Wrzlprmft
źródło
80

Jak już wskazał Wrzlprmft, ponad 50% rozmiaru pliku SVG jest zajmowane przez osadzony obraz bitmapowy PNG używany do tworzenia dość subtelnego efektu cieniowania na kontrolerze. Wystarczy pozbyć się tego obrazu i zastąpić go prostym gradientem promieniowym, aby zmniejszyć plik SVG do około 10 kb.

        Oryginalny         Z prostym gradientem promieniowym
Oryginalny obraz z fantazyjnym cieniowaniem bitmapy po lewej, edytowana wersja z prostym gradientem radialnym po prawej stronie.

W tym miejscu powinieneś również sprawdzić swoje ścieżki, aby sprawdzić, czy jest coś, co można by uprościć. Nie znalazłem wiele, ale kontur twojego kontrolera ma kilka sąsiednich węzłów (w pobliżu górnego i dolnego środkowego środka), które można połączyć bez widocznej różnicy.

To łatwe 50% oszczędności, ale nie przestawajmy jeszcze. Jeśli wiesz choć trochę o formacie SVG , możesz zrobić o wiele więcej.

Najpierw uruchom „Defrags próżni” w Inkscape, aby pozbyć się niepotrzebnych definicji, a następnie zapisz obraz jako „zwykły plik SVG”. Teraz nadszedł czas, aby otworzyć go w edytorze tekstu i zobaczyć, czego możemy się pozbyć. Najlepiej jest użyć edytora ze zintegrowanym podglądem SVG, aby szybko zobaczyć, jaki wpływ (mam nadzieję, że nie ma) na modyfikację wyglądu obrazu. Używam do tego emacsa , ale istnieją inne edytory z podobnymi funkcjami .

W każdym razie, gdy plik SVG jest otwarty w edytorze tekstu, zacznijmy go upraszczać!

  • Na samej górze jest duży bezużyteczny <!-- comment -->. Po prostu go usuń.

  • Jeśli edytujesz plik SVG bezpośrednio z programu Illustrator, istnieje również niepotrzebna <!DOCTYPE ... >linia. Usuń też.

  • Inkscape nalega na naklejenie niepotrzebnego bloku metadanych RDF na obrazie. Wystarczy zlokalizować <metadata ...>tag i usunąć go, wraz ze wszystkim do zamknięcia włącznie </metadata>.

  • Ponadto, nawet jeśli zapiszesz plik jako „zwykły plik SVG”, Inkscape nadal zaśmieca go szeregiem niestandardowych atrybutów. Znajdź każdy atrybut, który zaczyna się od inkscape:lub sodipodi:i usuń je.

  • Po usunięciu metadanych i atrybutów specyficznych dla Inkscape możesz usunąć wszystkie nieużywane atrybuty przestrzeni nazw XML ze <svg>znacznika. Powinien on być usunięcie co najmniej bezpieczny xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapei xmlns:sodipodi. Jeśli istnieje nadmiarowy xmlns:svgatrybut, usuń go również. Jedynymi atrybutami przestrzeni nazw, które powinieneś pozostawić w tym momencie, są:

    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    
  • <svg>Tag ma również kilka innych bezużytecznych atrybutów można bezpiecznie usunąć, jak enable-backgroundi xml:space="preserve". (Ci, wprowadzane są przez eksportera Illustrator SVG, Inkscape i nie jest wystarczająco inteligentny, aby zdać sobie sprawę, że są bezużyteczne.) Jak viewBoxatrybut może być bezpiecznie usunięty z tego obrazu, ponieważ po prostu powtarza wartościami x, y, widthi heightatrybutów.

  • Możesz także bezpiecznie usunąć atrybuty encodingi standalonez <?xml ... ?>tagu.

  • Przejdźmy teraz do wnętrzności danych obrazu. Z jakiegoś powodu Inkscape nalega na przypisanie idatrybutów do każdego elementu, nawet jeśli nigdy nie ma do nich odwołania. Każdy idatrybut, którego wartość nigdy nie jest powtarzana w innym miejscu pliku (wyszukaj go!) Można bezpiecznie usunąć. Zasadniczo jedyne identyfikatory, które należy zachować, to identyfikatory gradientów i ewentualnie innych obiektów (np. Ścieżek) znalezionych w <defs>sekcjach.

  • Ponadto Inkscape lubi generować długie identyfikatory takie jak linearGradient4277. Zastanów się nad skróceniem identyfikatorów, których nie możesz po prostu usunąć, do czegoś takiego jak skrót lg1.

  • Istnieje również wiele <defs>sekcji bezpośrednio po sobie. Połączenie ich oszczędza kilka bajtów (i ogólnie upraszcza strukturę dokumentu).

  • Na <g>końcu pliku znajduje się także kilka pustych grup ( elementów). Po prostu się ich pozbądź. Może również istnieć wiele kolejnych grup z dokładnie tym samym transformatrybutem (lub wcale); można również bezpiecznie je połączyć.

  • Z jakiegoś dziwnego powodu Inkscape zapisuje nadmiarową ścieżkę Beziera ( datrybut) dla <circle>elementów. To zajmuje miejsce bez absolutnie żadnego powodu, więc po prostu je usuń. (Pozostaw datrybuty na <path>elementach; są one faktycznie używane do czegoś.)

  • Inkscape lubi również używać CSS w styleatrybutach, w których bardziej szczegółowe atrybuty byłyby krótsze, np. Przepisywanie fill="#4888fa"do bardziej szczegółowych style="fill:#4888fa". Możesz zaoszczędzić kilka bajtów, dzieląc te style na poszczególne atrybuty (i usuwając te, które po prostu bezużytecznie powtarzają ustawienie domyślne), ale wymagają nieco większej znajomości formatu SVG niż większość powyższych zmian.

  • Ponadto, jeśli są jakieś <use ... >elementy, możesz być w stanie zaoszczędzić kilka bajtów, zastępując je rzeczywistym elementem, z którym się łączą. (Oczywiście oszczędza to miejsce tylko wtedy, gdy połączone elementy są używane tylko raz.) Wydaje się również, że Inkscape lubi pośrednio definiować gradienty kołowe, najpierw definiując punkty zatrzymania w a <linearGradient>, a następnie odwołując się do nich w <radialGradient>; możesz to uprościć, przesuwając ograniczniki bezpośrednio wewnątrz gradientu promieniowego i pozbywając się nieużywanego gradientu liniowego. Jako bonus, jeśli w ten sposób udało ci się pozbyć wszystkich xlink:hrefatrybutów, możesz usunąć xmlns:xlinkatrybut z <svg>tagu.

  • Jeśli naprawdę chcesz wycisnąć każdy dodatkowy bajt, poszukaj wartości liczbowych ze zbyt dużą liczbą miejsc po przecinku i zaokrąglij je do czegoś bardziej sensownego. Tutaj naprawdę pomaga podgląd na żywo, ponieważ pozwala zobaczyć, jak można zaokrąglić wartość, zanim zacznie być widoczna. Nawet jeśli nie chcesz dokładnie testować każdej liczby, aby zobaczyć, ile można zaokrąglić, możesz przynajmniej wybrać nisko wiszące owoce, na przykład zaokrąglając wartość 1.0000859pikseli do tylko 1.

  • Na koniec wyczyść wcięcia i białe znaki w pliku. Aby całkowicie zminimalizować liczbę bajtów, musisz umieścić wszystko w jednym wierszu (lub przynajmniej wstawiać podziały wiersza przed atrybutami, gdzie i tak wymagana jest biała spacja), ale to naprawdę trudne do odczytania. Mimo to możliwe jest zachowanie odpowiedniej równowagi między czytelnością a kompaktowością za pomocą prostego, konserwatywnego wcięcia.

W każdym razie oto, czym udało mi się ręcznie edytować twój obraz SVG w:

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

Ten obraz SVG wygląda prawie nie do odróżnienia od drugiego przykładowego obrazu powyżej i zajmuje tylko 5189 bajtów, czyli znacznie mniej niż obraz JPEG. Jestem pewien, że można go jeszcze zoptymalizować, ale tak naprawdę to tylko przykład tego, co możesz zrobić w ciągu kilku minut dzięki ćwiczeniom. ( Napisanie tej odpowiedzi zajęło mi dużo więcej czasu niż faktyczna edycja kodu SVG).

Wreszcie, skompresowanie tego kodu SVG za pomocą gzip zmniejsza go do zaledwie 1846 bajtów (!), Niewiele ponad ćwierć wielkości twojej wersji JPEG.

Ilmari Karonen
źródło
4
Ładnie gra w golfa .
Wrzlprmft
7
pozbyć się
podziałów
15
Musiałem dołączyć do tej witryny, aby głosować na tę niesamowitą odpowiedź! Dobra robota!
Karl-Johan Sjögren
Hej Ilmari, zastanawiam się, czy mógłbyś sprawdzić aplikację internetową, którą podałem w odpowiedzi i potwierdzić, czy robi wszystko, co robiłbyś ręcznie? Uruchomiłem go na dużym pliku SVG z niesamowitymi redukcjami, ale kiedy wcześniej uruchomiłem ten plik SVG za pośrednictwem innej usługi, byłem w stanie zaoszczędzić dodatkowe 2 KB. Kiedy sprawdzam kod SVG, nadal widzę metadane z linkami do Adobe i nie mam pojęcia, czy jest to konieczne. Twoja mądrość SVG jest bardzo doceniana.
Dom
30

Jestem trochę zaskoczony, że nikt nie wspomniał o rozszerzeniu „ Scour ”. Jest dołączony do Inkscape (od wersji 0.47) i wykonuje wiele optymalizacji wspomnianych przez Ilmari Karonen.

ktoś
źródło
14
+1 To jest niesamowite! Szczerze mówiąc, nawet nie wiedziałem, że to narzędzie istnieje. Przy odpowiednich opcjach wersja wiersza poleceń pokonuje nawet mój ręcznie zoptymalizowany kod o prawie 200 bajtów, a uruchomienie go na ręcznie zoptymalizowanym kodzie sprowadza go do zaledwie 4571 bajtów (!).
Ilmari Karonen,
5

Możesz przekonwertować go na skompresowany plik SVG (SVGZ) i umieścić plik image.svgz na swojej stronie internetowej:

gzip image.svg
mv image.svg.gz image.svgz

Lub, w Adobe Illustrator, po prostu zapisz jako „skompresowany SVG”, który napisze plik image.svgz.

W przypadku obrazu testowego jest on jednak większy niż plik JPG:

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes
Glenn Randers-Pehrson
źródło
6
Niestety skompresowane pliki SVG nie działają w większości, jeśli nie we wszystkich, najnowszych IE. Pomysł jest pomocny, ale IE czyni go znacznie mniej opłacalnym. W każdym razie +1, ponieważ to nie twoja wina IE $ ucks. :)
Dom
5
@Dom, doświadczenie z IE i PNG sugeruje 3-5 lat, a nie lat.
Glenn Randers-Pehrson
3
Bashing IE nigdy nie przestaje mnie bawić! :) To całkiem fajne, że możemy przyciągnąć kogoś o twoim poziomie doświadczenia do GDSE, mam nadzieję, że ci się tu podoba i jeśli nikt jeszcze tego nie powiedział, witaj!
Dom
2
Aby przetestować w IE, możesz użyć maszyn wirtualnych z modern.ie/en-us
Scott Carlson
4
Jeśli podajesz go na stronie internetowej, zapewni to znikomą korzyść klientom żądającym kompresji HTTP (która i tak zwykle używa gzip).
Bob
3

Niedawno znalazłem narzędzie na https://petercollingridge.appspot.com/svg-editor ( kod źródłowy ), które pomaga zoptymalizować pliki SVG. W tym przypadku ma dobre wyniki, zmniejszając rozmiar pliku do 3,7 kB, czyli nieco ponad połowę wielkości pliku JPG, z niewielką ręczną regulacją:

Korzystanie z tego narzędzia do optymalizacji plików SVG wymaga znacznie mniej czasu niż ręczne golfowanie pliku.

użytkownik60561
źródło
Witamy w Graphic Design SE. Zauważ, że pytający wspomniał o tym samym narzędziu w pytaniu. Nie oznacza to, że unieważnia tę odpowiedź, ale można ją umieścić w odpowiedniej perspektywie. Co również rozumiesz przez regulację ręczną?
Wrzlprmft
To nie jest dokładnie to samo narzędzie, jak wspomniane w pytaniu, ale zostało wykonane przez tego samego autora i znajduje się w tej samej domenie. Link autora zawiera link do tego narzędzia, ale nie zauważyłem go, dopóki nie opublikowałem odpowiedzi; Nie usunąłem go, ponieważ nadal jest użyteczny. Przez ręczną regulację mam na myśli to, że odznaczyłem kilka pól (łącz ścieżki, usuwam identyfikatory), aby poprawić wynik i obniżyłem miejsca dziesiętne, aby jeszcze bardziej zwiększyć rozmiar.
user60561
Podobnie jak w przypadku SVGOMG (z odpowiedzi Dom), tutaj również wydaje się, że największe oszczędności wynikają z wyłączenia xlink, który jako efekt uboczny całkowicie usuwa osadzony obraz. Oczywiście zastąpienie obrazu gradientem nie jest czymś, czego można oczekiwać od zautomatyzowanego narzędzia.
Ilmari Karonen,
3

SVGOMG! to niesamowita aplikacja internetowa do optymalizacji SVG

Według twórcy aplikacji, SVGOMG jest SVGO „s " M Issing G UI".

Uruchomienie go na dostarczonym obrazie sprowadza go do samego 3.42kbi zaraz 1.4kbpo zgzipowaniu.

Zrzut ekranu SVGOMG

Dom
źródło
1
Patrząc na renderowany podgląd, wydaje się, że większość oszczędności pochodzi z faktu, że całkowicie usuwa on osadzony obraz. Oczywiście zastąpienie mapy bitowej gradientem nie jest czymś, czego można oczekiwać od oprogramowania automatycznie.
Ilmari Karonen,
1
Nie mam już niezoptymalizowanej wersji z naprawionym tylko gradientem, ale jeśli ręcznie edytuję oryginalny plik SVG w celu zastąpienia mapy bitowej ostatnim <radialGradient>i <path>z mojego kodu zoptymalizowanego ręcznie, SVGOMG optymalizuje wynikowy obraz 5,8 kB do 4,02 kB (4.11 kB prettified) i wydaje się, że wykonuje dość dokładną robotę; Naprawdę nie widzę żadnych oczywistych straconych okazji. (Grając trochę bardziej, zauważyłem, że czasami nie łączy kolejnych grup o identycznych atrybutach; Inkscape czasami wydaje się je generować, np. Podczas dostosowywania strony do rysunku.)
Ilmari Karonen
@IlmariKaronen dzięki za obejrzenie, uruchomienie go na oryginalnym pliku SVG 22 kb w Dropbox sprowadza go do 3,42 kb na dysku, jakiś pomysł, dlaczego mój jest mniejszy? (Włączyłem każdą opcję). Ta aplikacja może być najlepszą (najłatwiejszą / najszybszą) opcją w większości przypadków. Nie mam żadnego związku z aplikacją, jest po prostu niesamowita!
Dom,
1
Przyjrzyj się uważnie kontrolerowi: jeśli wybierzesz „Usuń obrazy rastrowe” podczas optymalizacji oryginalnego pliku SVG, cieniowanie na kontrolerze zniknie całkowicie (ponieważ w rzeczywistości jest to osadzony półprzezroczysty obraz PNG). Możesz to zobaczyć, porównując zrzut ekranu w swojej odpowiedzi z oryginalnym JPEG. Otrzymana wersja 4.02 kB jest większa, ponieważ zawiera dodatkową ścieżkę i gradient, aby zastąpić usunięte cieniowanie.
Ilmari Karonen,
@IlmariKaronen Myślę, że widzę różnicę , to jest tak niewielkie, że nie jestem pewien, czy moje oczy robią sztuczki. To dobrze, do tej pory pracowałem tylko z jednolitymi kolorami w SVG, więc będę o tym pamiętać w przyszłości, dzięki.
Dom,