25: Ręczna optymalizacja formatu SVG w programie Illustrator - CSS-Tricks

Anonim

Ten film został usunięty. Niedługo zrobię to ponownie. Jeśli to czytasz, a ja jeszcze tego nie zrobiłem, skontaktuj się ze mną i zgłoś mi to.

Czasami plik SVG, którego chcesz użyć, wygląda doskonale w programie Illustrator, ale nie jest do końca tak, jak chciałbyś go używać w Internecie.

Jedną z rzeczy, na które patrzymy w tym filmie, jest prosty kształt, który wydaje się być jednym kształtem, ale w rzeczywistości składa się z czterech kształtów leżących jeden na drugim. Aby to uprościć, po prostu zaznaczamy wszystkie kształty i używamy narzędzi Pathfinder w programie Illustrator, aby połączyć je w jeden kształt. Widzimy to natychmiast odzwierciedlone w kodzie. Czasami fajnie jest otworzyć plik SVG zarówno w programie Illustrator, jak iw edytorze kodu, aby po jego zapisaniu można było zobaczyć, co robi z kodem.

Pathfinder świetnie nadaje się do ręcznej optymalizacji kształtów - warto wiedzieć, co robią te przyciski - i co robią również z wciśniętym klawiszem opcji.

Rozmiar pliku SVG w dużej mierze zależy od liczby punktów w kształtach. Są inne czynniki, ale to jest najważniejsze. Inną rzeczą, na którą patrzymy w tym filmie, jest użycie funkcji Uprość ścieżkę programu Illustrators w celu zmniejszenia liczby punktów na niektórych kształtach tekstur, aby zmniejszyć rozmiar pliku.

Inna rzecz, o której należy wiedzieć: ścieżki złożone mogą być przydatne. Dwa całkowicie oddzielone od siebie kształty mogą nadal stanowić jedną ścieżkę. Dosłownie jeden. Składnia pozwala w zasadzie „podnieść pióro, przenieść w inne miejsce, narysować coś nowego”. Więc kiedy tworzysz ścieżkę złożoną w programie Illustrator (np. Wiele niezależnych kształtów, Obiekt> Ścieżka złożona> Utwórz), w ten sposób tworzy. Może prowadzić do uproszczonego / zoptymalizowanego wyjścia SVG.