SVG, AI, EPS: кой векторен формат за какво се използва

Векторните файлове не се пикселизират.

Това е едно от малкото неща в уеб дизайна, за което всички са единодушни. Зад тази проста истина обаче стоят три коренно различни формата – SVG, AI и EPS – и решението кой да използвате не е произволно. Всеки от тях е проектиран за различен контекст, различна верига от инструменти и различни крайни резултати. Сбъркайте избора и ще губите време в конверсии, ще получавате файлове с двойно по-голям размер от необходимото или ще се чудите защо логото ви изглежда различно на MacOS и Windows.

Какво всъщност е векторна графика

Преди да разглеждаме форматите поотделно, трябва да е ясно какво ги обединява. Векторното изображение не съхранява пиксели – съхранява математически описания на форми. Права линия е записана като начална и крайна точка с координати. Крива е описана с Bezier контролни точки. Буква от шрифт е контур от криви. Тъй като описанието е математическо, изображението може да се мащабира до всякакъв размер без загуба на качество – 16×16 favicon и 10-метров банер от един и същи файл.

Това основно различие между вектор и растер определя кога изобщо се нуждаете от векторен формат: лога, икони, илюстрации, типографски елементи, всичко, което ще се показва в множество размери или ще се печата.

SVG – единственият уеб-нативен формат

SVG (Scalable Vector Graphics) е XML-базиран формат. Отворете SVG файл в текстов редактор и ще видите нещо подобно:

Това не е случайно. SVG е проектиран специално за браузъра и уеб средата. Всеки елемент в SVG файла е DOM нод – браузърът го третира почти по същия начин, по който третира HTML елемент.

От тази архитектура произтичат конкретни практически предимства. Можете да таргетирате SVG елементи с CSS: circle { fill: var(--brand-color); }. Можете да ги анимирате с CSS transitions и keyframes или с JavaScript. ARIA атрибути в SVG работят нативно, което прави иконите достъпни без допълнителни workaround-и. Браузърът кешира inline SVG заедно с HTML страницата – нула допълнителни HTTP заявки.

За WordPress конкретно: SVG може да се вгради директно в темата чрез get_template_part() или чрез PHP file_get_contents(). По подразбиране WordPress блокира качването на SVG файлове в медийната библиотека поради XSS рискове – как се добавя SVG поддръжка в WordPress безопасно е отделна тема, но решението включва sanitization на файла преди качване.

// Разрешаване на SVG в медийната библиотека с sanitization
add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes ) {
    if ( ! $data['type'] ) {
        $ext = pathinfo( $filename, PATHINFO_EXTENSION );
        if ( 'svg' === $ext ) {
            $data['type'] = 'image/svg+xml';
            $data['ext']  = 'svg';
        }
    }
    return $data;
}, 10, 4 );

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
} );

SVG не е подходящ за сложни фотореалистични илюстрации с хиляди обекти – файловете стават тромави и браузърът губи производителност при рендиране. За икони, лога и прости илюстрации обаче е безалтернативен избор в уеб контекста.

AI – работният формат на Adobe Illustrator

AI (Adobe Illustrator) е proprietary формат, собственост на Adobe. Всъщност съвременните .ai файлове са PDF с вграден Illustrator metadata слой – ако отворите AI файл в Acrobat Reader, ще видите изображението, макар и без редактируемост.

AI е проектиран за едно нещо: запазване на пълната редактируемост на Illustrator проект. Слоеве, artboards, символи, шрифтове, ефекти, глобални цветови полета, linked файлове – всичко се пази в оригинален вид. Когато дизайнерски екип работи по логосистема или brand identity, AI е стандартният формат за размяна между дизайнерите. Отворите файла следващата седмица и всичко е там – групировките, naming конвенциите, slices за export.

За уеб разработчик AI файлът рядко е крайната дестинация. Получавате AI от дизайнера, отваряте в Illustrator (или в Affinity Designer, Inkscape с ограничения), и го конвертирате – най-вероятно към SVG за уеб или PNG/WebP за конкретни случаи. Проблемите идват когато Illustrator ефекти нямат SVG еквивалент: сложни blend mode-ове, 3D ефекти, Pattern fills с linked файлове. При конверсия те или се растеризират, или се губят.

Ако получите AI файл и нямате Illustrator, двете реалистични опции са: Inkscape (безплатен, отваря AI с ограничения) и Affinity Designer (еднократно плащане, значително по-добра AI съвместимост от Inkscape).

EPS – наследството на печатната индустрия

EPS (Encapsulated PostScript) е форматът, останал от ерата преди PDF. Роден в края на 80-те като начин печатните машини да комуникират с дизайнерските програми, EPS доминираше в полиграфията в продължение на две десетилетия.

Днес EPS е легаси формат. Ще го срещнете в два контекста: архивни файлове от дизайнери, работили преди 2010 година, и стокови сайтове като Shutterstock и iStock, където EPS все още е стандарт за векторни стокови изображения. Shutterstock доставя векторите си в EPS 10 формат – ако купите лого елемент или икона оттам, получавате .eps файл.

EPS поддържа минимален набор от функции в сравнение с AI – слоеве не се пазят, Illustrator-специфичните функции се губят. Растерни изображения могат да се вграждат в EPS, но файловете стават огромни. Шрифтовете могат да се вграждат или да останат като outline криви – при печат задължително конвертирате шрифтовете в криви преди да изпратите файла в печатницата.

За уеб EPS е почти безполезен в оригинален вид. Браузърите не го поддържат нативно. Workflow-ът е: EPS -> отваряне в Illustrator/Inkscape -> export като SVG или PNG. Единственото изключение е ако работите с print workflow и изпращате директно към RIP (Raster Image Processor) система в печатницата.

# Конвертиране на EPS към SVG чрез Inkscape CLI
inkscape input.eps --export-type=svg --export-filename=output.svg

# Конвертиране на EPS към PNG с конкретна резолюция
inkscape input.eps --export-type=png --export-dpi=300 --export-filename=output.png

# Batch конверсия на всички EPS в директория
for f in *.eps; do inkscape "$f" --export-type=svg --export-filename="${f%.eps}.svg"; done

Кога да конвертирате и към какво

Практическото решение идва от въпроса: кой е крайният получател на файла?

Ако крайният получател е браузърът – SVG. Без изключения за лого, икони, илюстрации под определена сложност. Конвертирайте AI или EPS към SVG, след което оптимизирайте с SVGO (намалява файловия размер средно с 40-60% без видима загуба):

# Инсталация и оптимизация с SVGO
npm install -g svgo
svgo input.svg -o output.svg

# С по-агресивни настройки (внимавайте с removeViewBox)
svgo input.svg --config='{"plugins":[{"name":"preset-default","params":{"overrides":{"removeViewBox":false}}}]}' -o output.svg

Ако крайният получател е печатницата – AI или EPS, в зависимост от изискванията им. Повечето съвременни печатници приемат PDF/X-4 като предпочитан формат, така че AI -> PDF/X export е стандартният путь.

Ако крайният получател е друг дизайнер – AI за запазена редактируемост. Ако другата страна няма Illustrator, SVG е единственият преносим векторен формат с гарантирана съвместимост.

Размери на файловете в реални проекти

Пример от реален проект: лого с 3 цвята и типографски елемент.

• AI файл (с пълна редактируемост): 2.4 MB
• EPS export от Illustrator: 890 KB
• SVG export (неоптимизиран): 24 KB
• SVG след SVGO: 9 KB
• PNG @ 2x (400×200 px): 18 KB
• WebP @ 2x: 11 KB

SVG при 9 KB срещу PNG при 18 KB – и SVG е мащабируем до безкрайност, а PNG ще стане замъглен при Retina над 2x. За оптимизация на уебсайт свободата да използвате един файл за всички размери е значително предимство.

Метаданни, copyright и лицензи в SVG файлове

SVG файловете, генерирани от Illustrator и Inkscape, съдържат metadata, които невинаги са желателни в production.

Illustrator добавя Adobe namespace атрибути (xmlns:ai, xmlns:x), Inkscape добавя свои (sodipodi, inkscape namespace). Тези данни не влияят на рендирането, но увеличават файловия размер и понякога разкриват информация за работния процес. SVGO ги премахва по подразбиране.

Ако получите SVG от стоков сайт, проверете за embedded лиценз metadata – те понякога стоят в „ тагове и трябва да се пазят според лицензионните условия.

<!-- Пример за metadata, която Illustrator добавя автоматично -->

  
    
      
        image/svg+xml

Коя програма отваря кой формат

Кратък справочник по достъпност:

Adobe Illustrator – отваря AI (пълна поддръжка), EPS (пълна), SVG (пълна). Платен, абонаментен модел.

Affinity Designer – отваря AI (добра съвместимост, без гаранции за сложни ефекти), EPS (добра), SVG (пълна). Еднократно плащане.

Inkscape – отваря SVG (нативен формат), EPS (чрез Ghostscript), AI (частична поддръжка, по-ранни версии по-надеждни). Безплатен и с отворен код.

Figma – импортира SVG (отлично), AI (само като flattened PDF слой, без редактируемост), EPS (не поддържа). Браузър-базиран, freemium.

Браузъри – рендират SVG нативно (Chrome, Firefox, Safari, Edge), не поддържат AI и EPS.

Ако целта ви е оптимизирана структура на уебсайта с бързо зареждащи се графични елементи, SVG в inline или external вариант с правилно кеширане е стандартът, към който се придържа всеки сериозен front-end workflow.

Често задавани въпроси