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

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:

  

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?

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.}

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 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.

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.

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

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.

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.