SVG оңтайландырушы және кішірейткіш — тегін
SVG файл өлшемін айтарлықтай кішірейту үшін метадеректерді жойыңыз, бос орындарды біріктіріңіз және ондықтарды дөңгелектеңіз — әдетте 30-70% қысқару. Визуалды алдын ала қарау ештеңе бұзылмайтынын тексереді.
Файлды осы жерге тастаңыз немесе таңдау үшін басыңыз
SVG · құрылғыңызда өңделеді
немесе алмасу буферінен қою үшін Ctrl+V басыңыз
Файлдарыңыз ешқашан құрылғыңызды тастамайды. Барлық өңдеу шолғышыңызда жергілікті түрде жүзеге асырылады.
Жиі қолданылуы
- Веб сайт Белгілері үшін SVG ОңайлатуБелгі SVG-ден жіберілмеге дейін қажеті жоқ метадатаны алып салыңыз - типтік 50-80% төмендету.
- Брендт Logo SVG-лерін ОңайлатуСапасын құрбандықа түспеген жағдайда тез веб сайт ауырлығы үшін SVG логотип файлының өлшемін төмендетіңіз.
- Суреттерді және Hero SVG-лерін ОңайлатуІрі суреттер (батырлар, сәндік графика) үшін оңайлату файлың өлшемінің 30-70% ығысуы мүмкін.
- JavaScript Шоқы Өлшемін ТөмендетіңізSVG-лер React компоненттері ретінде импортталғанда немесе коддың ішінде сызық ішіндегі болғанда, оңайлату JS шоқты жиынтықтайды.
- Figma / Sketch SVG Экспорттарын ТазалаңызFigma және Sketch SVG экспорттары кең метаданы қамтиды. Өндіктіте пайдалану бұрын алып салыңыз.
Қалай жұмыс істейді
Бұл құрал толығымен браузеріңізде жұмыс істейтін қолмен жазылған оптимизатор пайдаланып SVG файл өлшемін азайтады — кітапхана жоқ, сервер жоқ. Ол екі өтуді біріктіреді: атрибут-деңгейлі дәлдік жұмысы үшін браузердің кірістірілген DOMParser/XMLSerializer және түсініктемені алып тастау, метадеректі жою және бос орынды сығу үшін мақсатты регекс алмастырулары.
- 1DOMParser SVG-ны тазартадыКез келген оптимизациядан бұрын, браузердің DOMParser SVG-ны XML ретінде оқиды және әр элементті аралайды. Скрипт тегтері, оқиға өңдеушілер (кез келген on* атрибуты), анимация элементтері және сыртқы URL сілтемелері шартсыз алынып тасталады — бұл қандай оптимизация опцияларын таңдағаныңызға қарамастан жүреді.
- 2DOM-негізделген ондық дөңгелектеуОндық дөңгелектеу қосулы болса, оптимизатор талданған DOM-ды екінші рет аралайды және дөңгелектеуді тек белгілі сандық атрибуттарға (path d деректері, координаттар, transform мәндері, сызық ендері және т.б.) .5.5 сияқты біріктірілген жол мәндерін бұзбай жеке жылжымалы-нүкте сандарын сәйкестендіретін регекс пайдаланып қолданады.
- 3Регекс өтулері сериаландырылған белгілеуді тазартадыXMLSerializer қалыпқа келтірілген XML шығарады, содан кейін мақсатты жол алмастырулары HTML түсініктемелерін, Inkscape/Sodipodi редактор метадеректерін, XML декларациясын, артық әдепкі атрибуттарды (version="1.1" сияқты) және тег-аралық бос орынды алып тастайды — әр өту тар шектелген, сондықтан мәтін түйінінің мазмұны ешқашан тиілмейді.
- 4Gzip өлшемі мен экспорт форматтарыБраузердің CompressionStream API кіріс пен шығыстың екеуінің де нақты gzip өлшемдерін есептейді, себебі бұл веб-те тасымал құнын шынымен анықтайтын нәрсе. Оптимизацияланған SVG-ны жүктеп алуға, шикі SVG ретінде көшіруге, React JSX-ке дайын camelCase атрибуттарына түрлендіруге немесе CSS деректер URI ретінде кодтауға болады — барлық түрлендірулер жергілікті түрде жүреді.
SVG-іңіз толығымен браузер қойындысында оқылады және өңделеді — файл байттары ешқашан құрылғыңыздан шықпайды.
Байланысты құралдар
CSS кішірейткіш және сәнді түрлендіруші
Файл өлшемін азайту үшін CSS-ті кішірейтіңіз немесе оқуға ыңғайлылығы үшін кішірейтілген CSS-ті сәнді түрге келтіріңіз. Лезде, браузерде.
GIF сығымдағыш
Анимациялы GIF-ті кішірейтіңіз: оны Discord-тың 256 KB эмодзи немесе 512 KB стикер сияқты көлем шегіне сыйғызыңыз немесе түстерді, енін және кадрларды өзіңіз таңдаңыз. Браузерде жұмыс істейді; GIF жүктелмейді.
PDF Қысқышы
PDF файлдарын қысып, өлшемін кішірейтіңіз. Сапа деңгейін таңдаңыз — қысу жоғары болған сайын файл кішірек, бірақ суреттің сапасы төмен болады.