Utilia
Категории ▾
Јазик: mk ▾

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

Оптимизирајте и минимизирајте SVG датотеки онлајн со SVGO, во прелистувачот. Изберете поставка, споредете го резултатот визуелно и видете ја заштедата.

Приклучоци

Отстранувањето на viewBox го запира скалирањето на цртежот, а скратувањето или отстранувањето на ID-а ги кине CSS, JavaScript, <use> или врските до сидра што се повикуваат на нив. Оставете ја поставката Безбедно за SVG-а што се користат во код, спрајтови или анимации.

Како да оптимизирате SVG

  1. Повлечете SVG датотека во полето или кликнете на него за да изберете една. Можете и да ја залепите ознаката во полето SVG код.
  2. Изберете Предефинирана поставка: Безбедно, Избалансирано (стандардно) или Максимално. Листата Приклучоци подолу покажува точно кои чекори ги вклучува секоја поставка.
  3. Прилагодете ако е потребно: Децимална прецизност (од 0 до 8 цифри), Повеќе проходи и Уреден приказ (код со вовлекување) ако сакате читлив код. Штом ќе промените приклучок, прецизност или проходи, поставката преминува во Прилагодено.
  4. Кликнете Оптимизирај SVG. Повлечена датотека се оптимизира веднаш, а откако ќе има резултат, секоја промена на поставките автоматски ја пушта оптимизацијата повторно.
  5. Проверете ги бројките Оригинална големина, Оптимизирана големина, Заштеда и Со gzip, па споредете ги двата цртежа еден до друг.
  6. Кликнете Копирај за да го копирате Оптимизиран SVG код, или Преземи оптимизиран SVG за да го зачувате како name.min.svg.

Оптимизацијата ја врши SVGO 4, стандардниот SVG оптимизатор со отворен код (MIT) што се користи во повеќето алатки за градење на веб. Неговата верзија за прелистувач се вчитува првиот пат кога ќе кликнете и работи целосно на вашиот уред: вашиот SVG никогаш не се качува.

Зошто SVG датотеките од алатки за дизајн се толку тешки

SVG извезен од Illustrator, Inkscape, Figma или Sketch носи многу повеќе од цртежот. Уредувачите додаваат свои именски простори и атрибути (имиња на слоеви, водичи, поставки за извоз), блок <metadata>, коментари како „Generator: Adobe Illustrator“, координати со шест или повеќе децимали, групи што содржат еден елемент и опширни бои како #ffffff. Ништо од ова не го менува она што го исцртува прелистувачот. SVGO го отстранува, ги заокружува броевите, ги препишува податоците за патеки со пократки команди, ги скратува боите и ги спојува или раставува вишокот елементи. Намалување од 40–60% е вообичаено за извезени икони и илустрации.

Поставки и ризични приклучоци

  • Безбедно ја пушта предефинираната поставка на SVGO, но ги задржува ID-ата, <desc>, одвоените патеки и правилата <style>, со 3 децимали и еден проход. Користете ја за SVG-а на кои се повикуваат CSS или JavaScript, спрајтови и анимации.
  • Избалансирано е предефинираната поставка на SVGO, 3 децимали, повеќе проходи. Одговара на повеќето икони и илустрации прикажани како слики.
  • Максимално додава Отстрани </strong>, <strong>Отстрани скрипти и атрибути за настани</strong>, <strong>Отстрани width/height (задржи viewBox)</strong> и <strong>Замени xlink:href со href</strong>, со 2 децимали и повеќе проходи.</li> </ul> <p>Ниедна поставка не го отстранува viewBox. <strong>Отстрани viewBox</strong> постои само за посебни случаи: без него цртежот повеќе не може да се скалира на големината што ја давате во CSS.</p> <p>Знајте што можат да скршат другите приклучоци:</p> <ul> <li><strong>Скрати и отстрани неискористени ID-а</strong> ги преименува ID-ата како <code>#icon-home</code> во <code>a</code>. Секој CSS селектор, JavaScript барање, референца на спрајт <code><use href="#…"></code>, сидро на страница или SMIL/CSS анимација што го таргетира старото име престанува да работи.</li> <li><strong>Отстрани <title></strong> и <strong>Отстрани <desc></strong> го бришат пристапното име и опис. Оставете ги кај значајни икони и дијаграми што читачите на екран мора да ги објават.</li> <li>Ниска <strong>Децимална прецизност</strong> може да ги деформира малите икони: кривите треперат, а рабовите се поместуваат. Секогаш проверувајте ја визуелната споредба; 3 е безбеден стандард.</li> <li><strong>Спој патеки</strong> спојува соседни патеки во една, па ефект при поминување со глушецот или анимација што таргетирала една патека ја губи својата цел.</li> </ul> <h2>Совети</h2> <ul> <li>Чувајте неоптимизирана главна копија за уредување; со <code>.min.svg</code> постапувајте како со компајлиран код.</li> <li>Овозможете gzip или brotli на вашиот сервер: текстуалните формати како SVG се компресираат многу добро, а бројката <strong>Со gzip</strong> покажува што посетителите навистина преземаат (се прикажува кога вашиот прелистувач поддржува <code>CompressionStream</code>).</li> <li>Вметнат SVG може да се стилизира со CSS и анимира, но не се кешира одделно; SVG во <code><img></code> се кешира, но не може да се стилизира од страницата.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Често поставувани прашања</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Дали мојот SVG се качува на сервер?</summary> <div class="prose px-5 pb-5"><p>Не. SVGO работи во вашиот прелистувач. Единственото преземање е кодот на самиот оптимизатор, првиот пат кога ќе оптимизирате.</p></div> </details> <details class="faq group"> <summary>Зошто прегледот е прикажан како слики?</summary> <div class="prose px-5 pb-5"><p>SVG е формат на документ што може да содржи JavaScript и да вчитува надворешни датотеки. Двата прегледа се исцртуваат како <code><img></code> од локални blob URL-а, а во тој режим прелистувачите никогаш не извршуваат скрипти ниту преземаат надворешни ресурси, па прегледувањето на несигурен SVG овде е безбедно. Самиот оптимизиран код сепак ги содржи сите скрипти освен ако не е вклучено <strong>Отстрани скрипти и атрибути за настани</strong> (вклучено е во <strong>Максимално</strong>).</p></div> </details> <details class="faq group"> <summary>Мојот оптимизиран SVG повеќе не се скалира. Што се случи?</summary> <div class="prose px-5 pb-5"><p>Најверојатно viewBox бил отстранет, или со <strong>Отстрани viewBox</strong> или претходно од друга алатка. Оптимизирајте го оригиналот повторно со тој приклучок исклучен.</p></div> </details> <details class="faq group"> <summary>Зошто мојот спрајт со икони или анимација престана да работи?</summary> <div class="prose px-5 pb-5"><p><strong>Скрати и отстрани неискористени ID-а</strong> или <strong>Спој патеки</strong> ги променија елементите на кои се повикува вашиот код. Користете ја поставката <strong>Безбедно</strong>, која ги задржува двете.</p></div> </details> <details class="faq group"> <summary>Оптимизираната датотека не е помала. Зошто?</summary> <div class="prose px-5 pb-5"><p>SVG најверојатно е веќе минимизиран. Обидете се со <strong>Максимално</strong> или пониска <strong>Децимална прецизност</strong> и исклучете <strong>Уреден приказ (код со вовлекување)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Поврзани алатки</h2> <ul class="card-grid mt-4"><li><a class="card" href="/mk/svg-во-png/"> <span class="card-title">Претворач на SVG во PNG</span> <span class="card-text">Претворете SVG во PNG, JPG или WebP во прелистувачот со секоја ширина, висина, скала или DPI, со проѕирна или обојена позадина. Групно и ZIP, без качување.</span> </a></li> <li><a class="card" href="/mk/слика-во-svg/"> <span class="card-title">Векторизација на слика во SVG</span> <span class="card-text">Претворете PNG или JPG логотип или цртеж во SVG векторски патеки во прелистувачот. Поставки, број на бои и филтер за дамки, безбеден преглед, без качување.</span> </a></li> <li><a class="card" href="/mk/компресор-на-слики/"> <span class="card-title">Компресор на слики</span> <span class="card-text">Компресирајте JPG, PNG и WebP слики со лизгач за квалитет, споредете ги големините пред и после и обработувајте серии фотографии без качување.</span> </a></li> <li><a class="card" href="/mk/css-форматирање/"> <span class="card-title">CSS форматер и минификатор</span> <span class="card-text">Улепшајте неуреден CSS со чисто вовлекување или минифицирајте го со csso и видете ја големината пред и по. Работи во прелистувачот, ништо не се качува.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Реклама"><span class="ad-label">Реклама</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Бесплатни онлајн алатки што работат во вашиот прелистувач. Вашите податоци остануваат на вашиот уред.</p> </div> <nav aria-label="Категории"> <p class="font-semibold">Алатки</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/mk/текстуални-алатки/">Текстуални алатки</a></li><li><a class="link-muted" href="/mk/алатки-за-програмери/">Алатки за програмери</a></li><li><a class="link-muted" href="/mk/веб-seo-маркетинг/">Веб, SEO и маркетинг</a></li><li><a class="link-muted" href="/mk/бои-и-дизајн/">Бои и дизајн</a></li><li><a class="link-muted" href="/mk/слики-и-фотографии/">Слики и фотографии</a></li><li><a class="link-muted" href="/mk/pdf-и-документи/">PDF и документи</a></li><li><a class="link-muted" href="/mk/математички-калкулатори/">Математички калкулатори</a></li><li><a class="link-muted" href="/mk/финансиски-калкулатори/">Финансиски калкулатори</a></li><li><a class="link-muted" href="/mk/датум-и-време/">Датум и време</a></li><li><a class="link-muted" href="/mk/претворање-на-мерни-единици/">Мерни единици</a></li><li><a class="link-muted" href="/mk/здравје-и-фитнес/">Здравје и фитнес</a></li><li><a class="link-muted" href="/mk/дом-кујна-автомобил/">Дом, кујна и автомобил</a></li><li><a class="link-muted" href="/mk/генератори/">Генератори</a></li><li><a class="link-muted" href="/mk/тестови-на-уреди/">Тестови на уреди</a></li><li><a class="link-muted" href="/mk/аудио-и-видео/">Аудио и видео</a></li><li><a class="link-muted" href="/mk/образование-и-јазици/">Образование и јазици</a></li><li><a class="link-muted" href="/mk/игри/">Игри</a></li></ul> </nav> <nav aria-label="Информации"> <p class="font-semibold">Информации</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/mk/за-нас/">За нас</a></li> <li><a class="link-muted" href="/mk/контакт/">Контакт</a></li> <li><a class="link-muted" href="/mk/политика-за-приватност/">Политика за приватност</a></li> <li><a class="link-muted" href="/mk/услови-за-користење/">Услови за користење</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>