SVG оптимизатор

Структура и компоненти на SVG датотеките

Scalable Vector Graphics (SVG) претставува формат за векторска графика заснован на XML (Extensible Markup Language). За разлика од растерските формати како PNG или JPEG, кои се состојат од мрежа од пиксели, SVG датотеките содржат текстуални инструкции кои му кажуваат на прелистувачот како да ги исцрта геометриските форми, линиите, патеките и боите на екранот.

Оваа текстуална природа на SVG значи дека датотеката е составена од елементи и атрибути. Вообичаените компоненти вклучуваат елементи за основни форми како <rect>, <circle>, <ellipse>, како и посложени елементи како <path> кои дефинираат произволни криви и линии. Покрај геометриските дефиниции, SVG кодот често содржи метаподатоци, коментари од софтверот за дизајнирање, дефиниции за простори за имиња (namespaces) и стилски информации кои не влијаат директно на визуелниот приказ во веб-прелистувачот.

Зошто големината на SVG датотеките е важна за веб-перформансите

Големината на датотеките директно влијае на брзината на вчитање на веб-страниците и на целокупното корисничко искуство. Иако SVG датотеките се генерално помали од растерските слики, тие сепак можат да станат непотребно големи доколку се извезени директно од софтвер за графички дизајн без дополнителна обработка.

Кога прелистувачот вчита веб-страница, тој мора да го преземе, парсира и изврши SVG кодот. Доколку кодот содржи стотици линии непотребни метаподатоци или прекумерни празни места, тоа го зголемува количеството податоци што треба да се пренесат преку мрежата. Оптимизацијата на овие датотеки помага во намалување на потрошувачката на пропусен опсег и овозможува побрзо рендерирање на графиките, што е особено важно за корисниците на мобилни уреди со побавна интернет врска.

Разлика помеѓу вграден (inline) SVG и надворешни SVG датотеки

Во модерниот веб-дизајн, SVG графиките можат да се користат на два основни начини: како надворешни датотеки поврзани преку ознаката <img> или како вграден (inline) код директно во HTML структурата на страницата.

• Вграден (inline) SVG: Кодот на графиката се наоѓа директно во HTML документот. Ова овозможува директна манипулација со елементите преку CSS и JavaScript, како на пример менување на боите при интеракција (hover ефекти) или анимација на патеките. Сепак, секој дополнителен бајт во вградениот SVG директно ја зголемува големината на самиот HTML документ.
• Надворешен SVG: Графиката се вчита како посебен ресурс. Ова овозможува кеширање на датотеката од страна на прелистувачот, но спречува лесна манипулација со внатрешните стилови преку главниот CSS на страницата.

Оваа алатка е наменета за оптимизација на вообичаен вграден SVG код, овозможувајќи им на програмерите и дизајнерите да го исчистат кодот пред да го вметнат во нивните HTML или компонентални датотеки.

Безбедно чистење и концепт на оптимизација без загуби

Оптимизацијата на графиките може да биде со загуби (lossy) или без загуби (lossless). Овој оптимизатор применува безбедно чистење без загуби на визуелниот квалитет. Тоа значи дека алатката го намалува физичкиот волумен на кодот, но целосно го задржува оригиналниот изглед на графиката.

Процесот на оптимизација се заснова на следниве правила за обработка на кодот:

Алатката строго избегнува препишување на патеките (paths), преименување на ID-а, отстранување на viewBox и заокружување на прецизноста на координатните точки. Со ова се гарантира дека дефинираните релации во графиката нема да се нарушат и дека таа ќе се прикаже идентично како и оригиналот.

Безбедносни импликации при парсирање на XML ентитети

При обработка на SVG датотеки на веб, безбедноста е критичен фактор. Бидејќи SVG е заснован на XML, тој поддржува дефиниции за тип на документ (doctype) и прилагодени надворешни или внатрешни ентитети. Овие карактеристики можат да бидат искористени за напади од типот XML External Entity (XXE), каде што малициозен код се обидува да пристапи до локални датотеки или да предизвика преоптоварување на системот.

За да се спречат ваквите безбедносни ризици, овој оптимизатор применува строги правила за филтрирање:

1. Датотеките со SVG кои содржат дефиниции за тип на документ (doctype) или прилагодени ентитети се блокирани.
2. Доколку се открие ваков елемент, процесот се прекинува и се прикажува соодветно предупредување.
3. Корисникот мора да ги отстрани тие дефиниции пред да се обиде повторно да го оптимизира кодот.

Приватност и локална обработка на податоците

При користење на оваа алатка, приватноста на вашите податоци е целосно заштитена преку локално извршување на процесите. Вашиот SVG код се оптимизира во вашиот прелистувач. Ништо не се испраќа на BroBroGo.

Бидејќи обработката се врши директно на вашиот уред со помош на ресурсите на вашиот веб-прелистувач, кодот на вашите икони, логоа или илустрации никогаш не ги напушта вашите локални рамки. Дополнително, доколку во кој било момент го исчистите внесот или го промените влезниот код, секој тековен процес на оптимизација веднаш се прекинува.

Упатство за користење и пораки за грешки

Процесот на работа со алатката е едноставен и се состои од неколку чекори:

1. Вметнете го вашиот SVG код во полето означено како SVG внес.
2. Доколку сакате да го тестирате системот, можете да го вчитате вградениот Примерок.
3. Кликнете на копчето Оптимизирај.
4. По успешната обработка, алатката ќе ги прикаже статистиките за големината во бајти за Оригинал, Резултат и Заштедено.
5. Можете да го преземете готовиот код со кликнување на Преземи или да го исчистите полето со Исчисти.

Можни состојби и пораки на интерфејсот:

• Успешна оптимизација со намалување на големината: Се прикажува пораката Оптимизирано — {pct}% помало (заштедено {saved}). каде што се прикажуваат точните вредности во проценти и бајти.
• Успешна оптимизација без промена на големината: Доколку кодот веќе бил оптимизиран, ќе се прикаже пораката Оптимизирано. Нема заштеда во големината со поставеното безбедно чистење..
• Празен внес: Доколку се обидете да оптимизирате без да внесете код, ќе се појави грешката Прво вметнете SVG код..
• Невалиден формат: Доколку внесениот текст не содржи SVG елемент, алатката ќе ја прикаже пораката Не е пронајден елемент <svg>..
• Блокиран код: Доколку внесете код со недозволени XML дефиниции, ќе се појави предупредувањето Овој SVG користи тип на документ или прилагоден ентитет. Отстранете го пред оптимизацијата..
• Пречекорување на големината: Доколку кодот го надминува дозволениот лимит на карактери, ќе се прикаже пораката Овој SVG е преголем за оваа алатка. Големината треба да биде под {max} знаци..
• Временско пречекорување: Доколку оптимизацијата трае подолго од 15 секунди, процесот се запира со пораката Тоа траеше премногу долго и беше запрено — обидете се со помал SVG..
• Општа грешка: При неочекуван проблем се појавува пораката Овој SVG не можеше да се оптимизира..

Често поставувани прашања (FAQ)

Што сè се отстранува?

Ги отстранува коментарите, метаподатоците, просторите за имиња на уредувачот (namespaces), дополнителните празни места кај атрибутите, неискористените простори за имиња и ги заменува боите со пократки еквиваленти. Притоа ги задржува viewBox, ID-ата, ознаките и геометријата недопрени.

Може ли да се оптимизира секој SVG?

Работи со вообичаен вграден SVG код. Датотеките со SVG кои содржат дефиниции за тип на документ (doctype) или прилагодени ентитети се блокирани бидејќи тие можат да го направат парсирањето небезбедно. Отстранете ги тие дефиниции и обидете се повторно.

Дали ќе се промени изгледот на графиката?

Оптимизаторот избегнува препишување на патеките (paths), преименување на ID-а, отстранување на viewBox и заокружување на прецизноста. Доколку вашиот SVG се потпира на коментари или метаподатоци за вашиот дизајнерски процес, зачувајте копија од оригиналот.

Каде се испраќа мојот SVG код при обработката?

Вашиот SVG код се оптимизира во вашиот прелистувач. Ништо не се испраќа на BroBroGo, што значи дека обработката е целосно локална и приватна.