Това е по-малко фрагмент и повече напомняне за нещо, което често търся. Когато създавате SVG файлове в Adobe Illustrator, има няколко различни метода за експортиране на файловете. И двата метода включват шепа опции, някои от които напълно забравям какво означават и какво да избера.
Метод 1: Запазване като ...
Вероятно не бихте използвали този метод, за да запазите SVG за използване в мрежата. Това е до голяма степен за запазване на главен документ. Всъщност може да искате просто да запишете във формат Illustrator директно. Бихте използвали някои от другите опции за експортиране, за да експортирате за мрежата.
Най-често срещаният начин да запазите файл като SVG в Adobe Illustrator е да изберете File > Save As… опцията от главното меню.
Illustrator ще задейства диалогов прозорец, който ще ви попита как да наименувате файла и къде да го запазите. По-важното е, че той също така пита какъв тип файл да се запише като кой, в този случай е SVG. Не SVG компресиран (svgz). Обикновен SVG.
Щракнете върху бутона Запазване и ще се появи друг набор от опции. Това е мястото, където паметта ми има склонност да ме проваля и трябва да търся в мрежата за отговори. Ето екранна снимка на напълно оптимален начин за запазване на SVG файл в Adobe Illustrator.
- SVG профили : Това задава типа XML документ на отварящия
маркер. SVG 1.1 е най-новата версия, покрива най-широката поддръжка и вероятно е най-подходящият вариант. Всичко останало е или по-стара версия, или подмножество на SVG 1.1 и все още не съм срещнал проблем при избора му. - Шрифтове> Тип : Избирането на „Преобразуване в контур“ ще гарантира, че всеки въведен текст във файла се експортира по-скоро като векторни пътища, отколкото като глифи. Глифите имат шанс да не бъдат изобразени, но векторните пътеки винаги са голям палец нагоре.
- Опции> Местоположение на изображението : Ако във файла се използват растерни изображения (прочетени: JPG.webp, PNG, GIF), тогава ще искаме да изберете опцията „Link“. В противен случай растерното изображение ще бъде вградено във файла и това изсмуква предимствата на производителността веднага от SVG, като увеличава размера на файла, за да включва тези допълнителни активи. По-добре ги посочете като връзки и не забравяйте да включите тези изходни файлове в същата директория като SVG файла.
- Опции> Местоположение на изображението> Запазване на възможностите за редактиране на Illustrator : Това има огромно въздействие върху изхода на SVG файла. Тъй като тук вероятно запазвате „главно“ копие, което не е предназначено за нас в мрежата, ще оставите това отметка. Това ще запази собствените неща на Illustrator (като ръководства) за следващия път, когато отворите файла. Непоставеното означава, че такива неща ще бъдат премахнати и изгубени.
- Разширени опции> CSS свойства : Избирам „Презентационни атрибути“ за този, защото той поставя свойства (напр. Запълвания, щрихи и други) на най-ниското ниво на специфичност. Например
. Това стилизира елемента, но е много лесно да се замени в CSS. - Разширени опции> Десетични места : Ако сте прегледали кода за a
, тогава знаете, че стойностите, посочващи тези фигури, могат да бъдат супер прецизни. Много пъти обаче те са твърде точни и добавят към общия размер на SVG файла. Тъй като вероятно запазвате главния файл тук, можете да го запазите доста висок, тъй като размерът на файла не е особено притеснителен. - Разширени опции> Кодиране : Не съм любител на UTF кодирането, но оставянето на това в „Unicode UTF-8“ гарантира обратна съвместимост. Също така размерите на файловете на UTF-8 обикновено са по-малки от UTF-16, така че това е само по себе си печалба.
- Разширени опции> Отзивчиви : Ако оставите това отметка ще зададете фиксирани
heightиwidthатрибути на SVG. Проверявам тази опция, защото ми позволява да задам тези атрибути или в кода, или в CSS.
Метод 2: Експортиране като
Друг начин да получите SVG от Adobe Illustrator е да изберете File > Export > Export As… опцията от главното меню. Има обаче втори начин да стигнете дотам, като използвате панела „Действия“ в работното пространство на Illustrator.
Тази опция е идеална, ако знаете, че ще използвате този файл директно в мрежата и не планирате да се занимавате с дизайна по-късно. Той осигурява много по-малко настройки и няколко опции, които позволяват на файла да оптимизира файла допълнително за по-добра производителност. Всъщност най-добрата практика е да правите това на копие на файла, а не на самия главен файл, така че има една версия, която може да бъде отворена и редактирана по-късно в Illustrator, и друга, която е по-подходяща за обслужване на производствен уебсайт.
- Стил : Покрихме този по-рано в настройките на Метод 1, но тук избирам „Атрибути на презентацията“, защото това е начин за организиране на свойствата на атрибутите от най-високо ниво. Това добавя ред към маркирането, гъвкавост в способността ни да стилизираме следващите атрибути с CSS и често води до по-малки размери на файла.
- Шрифт : Това е още един, който разгледахме по-горе, но избирането на „Преобразуване в контури“ разменя глифите за векторни пътеки за символи, което гарантира правилното изобразяване на текста.
- Изображения : Това е още едно, което разгледахме по-горе, но избирането на „Link“ ще предотврати опаковането на вградени растерни изображения в SVG, което прави файла много по-голям.
- Идентификатори на обекти : Тази настройка дава на Illustrator маршируващи заповеди за назоваване на идентификатори в маркирането. Можете да му кажете да назовава идентификатори на базата на това как са именувани слоевете във файла.
- Десетични : По-малко десетични знаци в кода означават по-малки размери на файла. Задаването на това
1е идеално и добре в много случаи и няма да има забележима разлика в дизайна, но2обикновено е безопасно. Така или иначе си струва да проверите как се изобразява SVG. - Умалете : Да, моля! Това смазва кода, за да намали празното пространство и да увеличи производителността на мрежата, подобно на минимизирането на CSS.
- Отзивчив : Точно като първия метод, изборът на тази опция е идеален, тъй като фиксираните
heightиwidthатрибутите иначе биха били поставени в SVG.