Следвайте този работен пример, след което адаптирайте същите контроли към вашето собствено изображение. Отворете SVG Компресор.
Качете статичен SVG или поставете маркъпа
Отворете SVG компресора и изберете SVG файл или Опитайте примерен файл. Примерът е svg-compressor.svg, 985-байтов знак за орбита с 512 × 512 viewBox, градиентно запълване, заглавие и описание. Използвайте Постави SVG, когато маркъпът вече е в редактор или клипборд.
Инструментът приема до 20 файла по 2 MB всеки. Той анализира пълен SVG документ и премахва стандартните декларации на SVG документа, без да зарежда външни файлове. Деформиран XML, персонализирани декларации на обекти и вътрешни подмножества на документи се отхвърлят. Много сложни файлове също могат да достигнат лимита за елементи или време за обработка.
Този работен процес създава статични векторни графики. Скриптове, манипулатори на събития, външни ресурси, анимация и вградени растерни изображения се премахват. Оригиналната визуализация вече е санирана, така че не трябва да се интерпретира като неограничено изобразяване на всяка функция в изходния файл.
Запазете копие на оригиналния SVG. Интерактивна илюстрация или SVG, съдържащ снимка, е различен случай на употреба от статична векторна икона.
Сравнете резултата и задайте десетична прецизност
Двата панела за визуализация показват санирания оригинал и оптимизирания резултат. Размерите до Оригинал и Оптимизиран, както и обобщението на байтовете, сравняват изходния файл с готовия резултат. Той отчита увеличение, когато оптимизацията прави конкретен файл по-голям, вместо да обещава намаление всеки път.
Отворете Настройки и задайте Десетична прецизност на 2 за примера. Прецизността варира от 1 до 5 и започва от 3. По-ниските стойности могат да опростят числената геометрия, но могат да изместят фини криви, малки пролуки или подравнени ръбове. Увеличете я, когато визуализацията загуби важни детайли.
Този пример използва ясна геометрия, така че прецизност 2 запазва разпознаваемата си форма. Други SVG файлове със сложни десетични координати могат да се променят повече. Прегледът на оптимизирания SVG маркъп показва действителния текст, който ще бъде изтеглен; това не е отделно представяне на оригинала.
Проверете вектора в предвидения му размер за показване и при по-голям изглед. Фино изместване може да бъде трудно забележимо в малка миниатюра.
Примерът в това ръководство
Опитайте пример: svg-compressor.svg, 985 байта, 512 × 512 viewBox. Десетична прецизност 2; запазени достъпни заглавия/описания и активирано съкращаване на вътрешни идентификатори; адаптивни размери и четим изходен маркъп са деактивирани. Изтеглен SVG: 635 байта.
- Източник SVG
- 985 байта
- Оптимизиран SVG
- 635 байта
- Измерено намаление
- 35.5%
- Запазен контекст
- Заглавие, описание и 512 × 512 viewBox
Запазете описанията и вземете предвид външните идентификатори
Оставете включена опцията Запазване на достъпни заглавия и описания за работния пример. Това запазва заглавието и описанието на SVG, като същевременно премахва излишните метаданни на редактора и опростява допустимия маркъп. Това са различни видове информация и не трябва да се третират като взаимозаменяеми.
Съкращаването на вътрешни идентификатори е включено по подразбиране. Оптимизаторът актуализира препратките в рамките на SVG, но външни CSS или JavaScript все още могат да разчитат на оригиналните идентификатори. Изключете тази опция, когато файлът е част от по-голямо приложение, което именува своите елементи, и тествайте готовия SVG в този контекст.
Оставете Отзивчиви размери и Четлив изходен маркъп изключени за примера. Отзивчивите размери премахват фиксираната ширина и височина, когато координатите на viewBox могат да осигурят мащабируемо оразмеряване. Четливият изход добавя отстъпи и е полезен за поддръжка, но може да увеличи размера на текста.
За самостоятелен иконен файл почистването на вътрешни идентификатори обикновено е лесно. За външно скриптирана диаграма запазването на идентификаторите може да е по-важно от няколко спестени байта.
Изтеглете и проверете готовия вектор
Изберете Старт, след това Изтегляне. Готовият изход е 635 байта в сравнение с 985-байтовия източник: 35.5% намаление. Заглавието и описанието му остават, а показаното сравнение е изобразено от истинския източник и изтегления SVG.
Статията изобразява двата вектора при 1,024 пиксела за ясна илюстрация на резултата; техният логически координатен размер остава 512 × 512. По-големият преглед не добавя растерно съдържание към записания SVG. Прегледайте действителния вектор на вашата целева страница, преди да замените съществуващ производствен актив.
Един файл се изтегля като SVG с оригиналното си име. Група файлове се изтегля като един ZIP архив с номерирани наставки за дублиращи се имена на файлове. Обработката се извършва в браузъра. Запазете оригиналния източник, ако искате да изпробвате различни настройки за оптимизация по-късно.
Спестяванията на размера на файла се измерват само спрямо тази извадка. Вече оптимизиран SVG може да покаже малко подобрение или да стане малко по-голям.
Често задавани въпроси
Ще изглежда ли оптимизираният SVG точно по същия начин?
Оптимизаторът се стреми да запази статичния вид, но закръглянето и премахването на неподдържано съдържание може да промени файла. Сравнете прегледите и тествайте запазения SVG във вашия проект.
Какво променя десетичната точност?
Тя контролира точността, използвана за геометрични данни и данни за пътища. По-ниските стойности могат да намалят размера, но могат да изместят фините детайли. Стойността по подразбиране е 3.
Запазват ли се заглавието и описанието?
Да, по подразбиране. Оставете „Запазване на достъпни заглавия и описания“ включено, за да съхраните тези SVG елементи.
Защо липсват скриптове или растерни изображения?
Този инструмент създава статичен векторен изход. Скриптове, събития, външни ресурси, анимации и вградени растерни изображения се премахват умишлено по време на санирането.
Мога ли да запазя идентификатори (ID), реферирани от CSS?
Изключете „Съкращаване на вътрешни ID“, когато външен код зависи от конкретни идентификатори. Проверете оптимизирания файл в целевата страница, преди да замените оригинала.
Качват ли се SVG файлове за оптимизация?
Не. Инструментът извършва анализ и оптимизация в браузъра и изтегля резултата локално.
Мога ли да кача SVG с DOCTYPE?
Стандартна декларация за SVG документ се приема и премахва, без да се извлича нейният външен идентификатор. Персонализирани декларации на обекти и вътрешни подмножества на документи се отхвърлят.
Направете вектора по-лек, с резултат, който можете да инспектирате.
Опитайте примерен файл или използвайте свой собствен и прегледайте резултата, преди да споделите.
