Opcje eksportu do programu Adobe Illustrator - CSS-Tricks

To mniej fragmentu, a raczej przypomnienie czegoś, co często sprawdzam. Podczas tworzenia plików SVG w programie Adobe Illustrator istnieje kilka różnych metod eksportowania plików. Obie metody obejmują garść opcji, z których niektóre całkowicie zapominam, co oznaczają i co wybrać.

Metoda 1: Zapisz jako…

Prawdopodobnie nie użyłbyś tej metody do zapisania SVG do użytku w Internecie. Służy to głównie do zapisywania dokumentu głównego. W rzeczywistości możesz po prostu zapisać bezpośrednio w formacie programu Illustrator. Możesz użyć innych opcji eksportu, aby wyeksportować do Internetu.

Najpopularniejszym sposobem zapisania pliku jako SVG w programie Adobe Illustrator jest wybranie File > Save As… opcji z menu głównego.

Illustrator otworzy okno dialogowe z pytaniem, jak nazwać plik i gdzie go zapisać. Co ważniejsze, pyta również, jaki typ pliku do zapisania, w tym przypadku jest to SVG. Nie skompresowany SVG (svgz). Zwykły stary SVG.

Kliknij przycisk Zapisz, a pojawi się inny zestaw opcji. W tym miejscu zawodzi moja pamięć i muszę przeszukiwać sieć w poszukiwaniu odpowiedzi. Oto zrzut ekranu doskonale optymalnego sposobu zapisania pliku SVG w programie Adobe Illustrator.

• Profile SVG : Ustawia typ dokumentu XML w otwierającym znaczniku. SVG 1.1 to najnowsza wersja, która obejmuje najszersze wsparcie i jest prawdopodobnie najbardziej odpowiednią opcją. Cała reszta jest starszą wersją lub podzbiorem SVG 1.1 i nie napotkałem jeszcze problemu podczas jej wybierania.
• Czcionki> Tekst: Wybranie opcji „Konwertuj na kontur” zapewni, że eksportowany tekst w pliku będzie ścieżkami wektorowymi, a nie glifami. Glify mogą nie zostać renderowane, ale ścieżki wektorowe są zawsze duże.
• Opcje> Lokalizacja obrazu : Jeśli obrazy rastrowe (czytaj: JPG.webp, PNG, GIF) są używane w pliku, będziemy chcieli wybrać opcję „Link”. W przeciwnym razie obraz rastrowy zostanie osadzony w pliku, co obniża wydajność bezpośrednio z formatu SVG, zwiększając rozmiar pliku, aby uwzględnić te dodatkowe zasoby. Lepiej odnosić się do nich jako odnośniki i pamiętaj, aby umieścić te pliki źródłowe w tym samym katalogu, co plik SVG.
• Opcje> Lokalizacja obrazu> Zachowaj możliwości edycji programu Illustrator : To ma ogromny wpływ na wynik pliku SVG. Ponieważ prawdopodobnie zapisujesz tutaj kopię „wzorcową”, która nie jest przeznaczona dla nas w sieci, pozostaw to zaznaczone. Pozwoli to zachować zastrzeżone elementy programu Illustrator (takie jak przewodniki) do następnego otwarcia pliku. Niezaznaczone będzie oznaczać, że takie rzeczy zostaną usunięte i utracone.
• Opcje zaawansowane> Właściwości CSS : wybieram „Atrybuty prezentacyjne” dla tego, ponieważ umieszcza właściwości (np. Wypełnienia, obrysy itp.) Na najniższym poziomie szczegółowości. Na przykład . To nadaje styl elementowi, ale jest bardzo łatwe do zastąpienia w CSS.
• Opcje zaawansowane> Miejsca dziesiętne : Jeśli przeglądałeś kod w poszukiwaniu a , wiesz, że wartości określające te kształty mogą być bardzo dokładne. Jednak często są one zbyt precyzyjne i wpływają na ogólny rozmiar pliku SVG. Ponieważ prawdopodobnie zapisujesz tutaj plik główny, możesz go utrzymać na dość wysokim poziomie, ponieważ rozmiar pliku nie stanowi większego problemu.
• Opcje zaawansowane> Kodowanie : Nie jestem buffem w kodowaniu UTF, ale pozostawienie tego w „Unicode UTF-8” zapewnia kompatybilność wsteczną. Ponadto rozmiary plików UTF-8 są zwykle mniejsze niż UTF-16, więc jest to zwycięstwo samo w sobie.
• Opcje zaawansowane> Responsive : pozostawienie tego niezaznaczonego spowoduje ustawienie stałych heighti widthatrybutów w SVG. Zaznaczam tę opcję, ponieważ pozwala mi ustawić te atrybuty albo w kodzie, albo w CSS.

Metoda 2: Eksportuj jako

Innym sposobem uzyskania SVG z Adobe Illustrator jest wybranie File > Export > Export As… opcji z menu głównego. Istnieje jednak drugi sposób, aby się tam dostać, używając panelu Operacje w przestrzeni roboczej programu Illustrator.

Ta opcja jest idealna, jeśli wiesz, że zamierzasz użyć tego pliku bezpośrednio w Internecie i nie planujesz później majstrować przy projekcie. Zapewnia znacznie mniej ustawień i kilka opcji, które pozwalają plikowi na dalszą optymalizację pliku w celu uzyskania lepszej wydajności. W rzeczywistości najlepszą praktyką jest zrobienie tego na kopii pliku, a nie na samym pliku głównym, więc istnieje jedna wersja, którą można później otworzyć i edytować w programie Illustrator, a druga, która jest bardziej odpowiednia do wyświetlania w witrynie produkcyjnej.

• Stylizacja : omówiliśmy to wcześniej w ustawieniach metody 1, ale wybieram tutaj „Atrybuty prezentacji”, ponieważ jest to sposób na uporządkowanie właściwości według atrybutów najwyższego poziomu. Dodaje to porządek do znaczników, elastyczność w naszej możliwości stylizacji kolejnych atrybutów za pomocą CSS i często prowadzi do mniejszych rozmiarów plików.
• Czcionka : to kolejna, którą omówiliśmy powyżej, ale wybranie opcji „Konwertuj na kontury” zamienia glify na ścieżki wektorowe na znaki, co zapewnia prawidłowe renderowanie tekstu.
• Obrazy : to kolejny, który omówiliśmy powyżej, ale wybranie „Łącza” zapobiegnie pakowaniu osadzonych obrazów rastrowych do SVG, co powoduje, że plik jest znacznie większy.
• Identyfikatory obiektów : To ustawienie daje programowi Illustrator polecenia dotyczące nadawania nazw identyfikatorom w znacznikach. Możesz powiedzieć mu, aby nazwał identyfikatory na podstawie nazw warstw w pliku.
• Dziesiętne : mniej miejsc po przecinku w kodzie oznacza mniejsze rozmiary plików. Ustawienie tego na 1jest idealne i OK w wielu przypadkach i nie spowoduje zauważalnej różnicy w projekcie, ale 2zazwyczaj jest bezpieczne. Tak czy inaczej, warto sprawdzić, jak renderowane jest SVG.
• Zmniejsz : tak, proszę! To przetwarza kod, aby zredukować białe znaki i zwiększyć wydajność sieci, podobnie jak minimalizacja CSS.
• Responsive : Dokładnie tak, jak w przypadku pierwszej metody, wybranie tej opcji jest idealne, ponieważ stałe heighti widthatrybuty zostałyby umieszczone w pliku SVG.