Sfat rapid Mai puține noduri = SVG mai ușoare

Recent am ajuns să mă joc pe site-ul snap.svg (aruncați o privire dacă nu l-ați folosit încă de tine). Acesta are un fundal foarte frumos poligon SVG pe antet, care cântărește la un 2.2Kb slab. Pentru că sunt ciudat, am decis să încerc să o reduc.

În Illustrator

Fișierul SVG în sine arată astfel când a fost deschis în Illustrator:

Apoi, dacă verificați vizualizarea conturului (Vizualizare> Schiță) vedeți toate căile vectoriale expuse fără culori de umplere:

"Ce mizerie!" M-am gândit "Sunt sigur că pot să ordonez asta și să reduc mărimea fișierului". Deci, m-am dus să curăț liniile pentru a elimina toate inutile over-lapping. 

Încurcat

Cu deschizător de drumuri puteți folosi obiectele pentru a "tăia" cookie "formularul lor de la obiectele dedesubt. În acest fel, puteți evita ca orice formă să se suprapună, în loc să creați un efect mai "puzzle".

Din această… … la acest

Mult mai bine. Odată ce am făcut același lucru cu toată ilustrația, mă uitam la acest lucru:

Am gresit

În acest sens, dimensiunea fișierului nu sa micșorat, a crescut. În timp ce originalul a cântărit 2.217Kb, noua versiune a cântărit 2.269Kb. O diferență mică în termeni reali, dar "tăierea" lucrurilor făcuse totuși fișierul mai greu. Pe un grafic mai mare, efectul ar fi putut face o mare diferență.

Dar de ce? Totul este în jos noduri, sau ancore; articulațiile de-a lungul unei căi vectoriale. Fișierele SVG nu sunt decât date XML, iar fiecare nod de-a lungul unei căi necesită coordonate suplimentare. Fișierul inițial poate să fi fost construit dintr-o grămadă de triunghiuri, dar Stratificarea nu costă deloc mărimea fișierului (orice obiecte dintr-un document XML sunt inerent afișate în ordine). Ceea ce a creat dimensiunea suplimentară a fost faptul că mi-am făcut poligoane patrulare (patru fețe) din triunghiuri. Hopa.

Iată cum arată codul SVG, primul dintre acestea:

Și acum una dintre formele mele "îmbunătățite":

Mai multe date. Simplu ca asta.

Curățați-vă nodurile

Lectia de a scoate acest lucru este de a elimina orice noduri nedorite din fisierele SVG, dar nu va ingrijorati de suprapunere. Nodurile de împrăștiere reprezintă numărul unu de reducere a complexității și, prin urmare, dimensiunea fișierului.

Folosește Ștergeți instrumentul Anchor Point (-) pentru a elimina o ancora de pe o cale. Veți fi surprins de cât de puțini ancore necesită o cale vectorică, păstrând în același timp forma sa! O ancoră bine plasată va face treaba celor trei gânduri prost gândite.

Puncte stradale

Un sfat final este de a elimina punctele de stres din SVG. Punctele greșite sunt adesea invizibile, deoarece nu pot fi umplute, dar vă vor costa toate datele la fel. În Illustrator, mergeți la Selectați> Obiect> Puncte stricate pentru a le selecta pe toate, apoi loviți șterge pentru a le elimina.

Puncte de ancorare stâncoase

Sper că ați învățat ceva din asta! Este unul dintre acele lucruri aparent evidente despre care nu m-am gândit niciodată înainte. Ai avut?