Optymalne ustawienia eksportu plików SVG do Internetu z programu Illustrator?

Chcę użyć logo SVG na stronie internetowej - aby wyglądała świetnie na responsywnym projekcie dla wszystkich urządzeń.

Ale ponieważ występują problemy , chcę obsługiwać jak najwięcej urządzeń i przeglądarek. Ważną kwestią jest również prędkość ładowania. Jak w tym wszystkim mieszczą się ustawienia eksportu w programie Adobe Illustrator?

W programie Illustrator istnieje kilka opcji eksportu SVG. Po pierwsze, który profil SVG jest najlepszy?

Zakładam, że SVG Tiny ma mniejszy rozmiar pliku? Czy wiele urządzeń obsługuje format SVG Tiny? Jakie są najważniejsze różnice? (Bez konieczności czytania tego potwora W3 .)

Po drugie, zakładam, że najlepszą opcją dla lokalizacji obrazu jest „link”? (Zobacz opis po wykrzykniku.)

Alternatywnie, w jaki sposób przeglądarka obsługuje opcję „osadzania”?

Dziękuję Ci!

PS Pojawi się opcja zastępcza alfa-PNG, ale chcę, aby SVG był obsługiwany najlepiej, jak to możliwe. (Pomyśl o tym, opcja awaryjna - taka jak JPG - byłaby prawdopodobnie najlepiej obsługiwana w tym przypadku, ponieważ sama alpha-PNG potrzebuje rozwiązania dla starszego IE).

Aktualizacja: Istnieje również więcej opcji, które można skonfigurować. Nie pracuję z tekstem, więc jedyne istotne, jakie widzę, to miejsca dziesiętne. W przypadku logo coś, co ma być wyświetlane jako maksymalnie 200x200px (czyli 400x400px na wyświetlaczach Retina), czy „3” jest najlepszym ustawieniem? Lub „2”, aby zminimalizować rozmiar pliku?

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.

Zaktualizuj do doskonałego wyjaśnienia @methodofaction.

Opcje eksportu nieco się zmieniły w aktualnej wersji programu Illustrator.

1. Adobe SVG Viewer nie jest już rzeczą.

2. Ale co ważniejsze, jest nowe ustawienie „responsywne”, które jest domyślnie zaznaczone. 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.