Profile SVG
- SVG 1.0: wszystkie nowoczesne przeglądarki stacjonarne i mobilne obsługują SVG 1.1, więc nigdy nie wybieraj tej opcji.
- SVG 1.1: Prawie zawsze będziesz tego chciał.
- SVG Tiny / Basic: jest to podzbiór SVG przeznaczony dla urządzeń mobilnych. Tylko kilka urządzeń obsługuje SVG Tiny, a nie pełną specyfikację, więc wybierz SVG 1.1.
Uwaga: SVG Tiny nie zmniejsza rozmiaru pliku, to tylko podzbiór SVG, który jest odpowiedni dla urządzeń o małej mocy obliczeniowej. Odrzuci gradienty, krycie, osadzone czcionki i filtry.
Erik Dahlström mówi:
Wszystkie pełne przeglądarki SVG 1.1 powinny być w stanie wyświetlić całą zawartość SVG 1.1 Tiny / Basic (zgodnie ze specyfikacją) i prawdopodobnie całą zawartość SVG 1.2 Tiny, którą tworzy również Illustrator.
Uwaga dotycząca czcionek : jeśli na obrazie nie ma żadnego tekstu, to ustawienie nie ma znaczenia.
Adobe CEF: nigdy nie używaj tej opcji, jeśli zamierzasz wyświetlać ją w przeglądarkach. To sposób firmy Adobe na osadzanie czcionek w plikach SVG, o ile wiem, jest to obsługiwane tylko przez wtyczkę przeglądarki Adobe SVG.
SVG: osadza czcionkę jako SVG, która nie jest obsługiwana przez przeglądarkę Firefox, ale jest dobrym rozwiązaniem, jeśli zamierzasz obsługiwać tylko urządzenia mobilne (na których zwykle działa zestaw webkit).
Utwórz kontury: będziesz chciał to robić przez większość czasu , chyba że masz dużo tekstu. Jeśli masz dużą ilość tekstu, będziesz chciał osadzić czcionkę za pomocą WOFF, ale będziesz musiał to zrobić ręcznie.
Podzbiór :
Brak: spowoduje to zanegowanie poprzedniego ustawienia i nie spowoduje osadzenia żadnej czcionki, jeśli nie obchodzi Cię, że czcionka powróci do innej czcionki na komputerze użytkownika, wybierz tę opcję.
Użyto tylko glifów: będziesz tego potrzebować przez większość czasu, jeśli zdecydujesz się osadzić czcionkę. Osadza tylko używane znaki, więc nie zwiększa rozmiaru pliku.
[reszta podzbiorów]: jest to dość jasne, możesz wybrać włączenie całej czcionki lub jej podzbiorów. Jest to przydatne tylko wtedy, gdy twój SVG jest dynamiczny, a tekst może się zmieniać w zależności od danych wejściowych użytkownika.
Obrazy : ma to znaczenie tylko wtedy, gdy dołączasz obrazy bitmapowe
Osadź: jest to zwykle to, czego chcesz , koduje obraz jako URI danych, więc po prostu przesyłasz jeden plik zamiast pliku svg z towarzyszącymi obrazami bitmapowymi.
Link: użyj tego tylko wtedy, gdy masz kilka plików SVG, które odnoszą się do jednego pliku bitmapy (więc nie jest on pobierany za każdym razem, gdy renderuje plik SVG).
Zwróć uwagę, że połączone obrazy bitmapowe nie będą wyświetlane, jeśli plik SVG jest wyświetlany za pośrednictwem <img>tagu, ponieważ imgnie pozwala na ładowanie zasobów zewnętrznych. Ponadto: Webkit ma błąd, który nie wyświetla obrazów bitmapowych w plikach svg, nawet jeśli je osadzisz. W skrócie: użyj zwykłego <svg>tagu, jeśli zamierzasz osadzać lub łączyć obrazy bitmapowe, nie używaj <img>.
Zachowaj możliwości edycji programu Illustrator
Wolę zapisać plik .ai jako obraz źródłowy i traktować plik SVG jako Export for webfunkcję. W ten sposób skupisz się na zmniejszeniu rozmiaru pliku i uzyskasz nieskazitelną kopię pliku wektorowego ze wszystkimi możliwościami edycji. Więc nie wybieraj tego.
Miejsca dziesiętne
Domyślnie 3jest to rozsądne ustawienie i najczęściej można o nim zapomnieć.
Jeśli jednak masz naprawdę skomplikowane ścieżki z wieloma punktami, obniżenie tego ustawienia do 1 lub nawet 0 spowoduje znaczne zmniejszenie rozmiaru pliku. Należy jednak uważać, ponieważ segmenty Beziera są bardzo wrażliwe na to ustawienie i mogą wydawać się nieco zniekształcone. Jeśli więc obniżysz to ustawienie, zawsze upewnij się, że wygląda na akceptowalne w przeglądarce.
Kodowanie
Wyjaśnienie dotyczące kodowania znaków jest raczej techniczne i dotyczy tylko plików SVG z tekstem. Najbardziej prawdopodobne kodowanie, którego potrzebujesz, to UTF-8 , nie zmieniaj tego, chyba że wiesz, co robisz.
Uwzględnij dane dotyczące wycinania
Spowoduje to dodanie nadmiaru metadanych do pliku SVG, chyba że planujesz później otworzyć plik SVG w programie Illustrator i znaleźć plasterki (jeśli je masz), nie zaznaczaj tego
Dołącz XMP
Więcej metadanych dotyczących pliku można przeczytać w XMP tutaj . nie sprawdzaj tego
Czuły
Zwróć uwagę, że to ustawienie wyeliminuje właściwość wysokości i szerokości z głównego węzła svg, zakładając, że przeskalujesz dołączoną grafikę przez css. Jednak w niektórych przypadkach chcesz, aby indywidualna grafika deklarowała swój rozmiar. Pamiętaj, aby w takich przypadkach odznaczyć to ustawienie.
Podaj mniej <tspan>elementów
To będzie wyszarzone, jeśli nie masz tekstu. SVG nie obsługuje tabel kerningu, więc niektóre sekwencje znaków będą wydawać się zbyt rozstawione, np AVA. Program Illustrator działa, dodając tspanelementy i nieco poprawiając pozycje znaków. Dodaje to trochę nadmiaru do pliku. Nie sprawdzaj tego, chyba że bardziej zależy Ci na rozmiarze pliku niż na wyglądzie tekstu .
Użyj <textpath>elementu dla tekstu na ścieżce
Będzie to wyszarzone, jeśli na ścieżce nie ma tekstu. Przeglądarki bardzo się różnią, jeśli chodzi o umieszczanie tekstu na ścieżce, więc Illustrator stara się być pomocny, stosując obrót i położenie znaku, zamiast pozostawiać zadanie przeglądarce. nie zaznaczaj tego, chyba że bardziej zależy Ci na rozmiarze pliku niż na wyglądzie tekstu .
Ogólnie rzecz biorąc, radziłbym ogólnie przyjrzeć się SVG. Przekonasz się, że wygląda bardzo podobnie do HTML i umożliwia modyfikowanie rzeczy, których nie można zrobić w programie Illustrator.
