SVG оновчлогч ба жижигрүүлэгч — үнэгүй
SVG файлын хэмжээг мэдэгдэхүйц багасгахын тулд мета өгөгдлийг устгаж, зайг нэгтгэж, аравтын бутархайг тойруулах — ерөнхийдөө 30-70% багасдаг. Харааны урьдчилан харалт юу ч эвдэрч байгаа эсэхийг шалгадаг.
Файлаа энд чирж оруулах эсвэл дарж сонгоно уу
SVG · таны төхөөрөмж дээр боловсруулагдсан
эсвэл клипбордоос буулгахын тулд Ctrl+V дарна уу
Таны файлууд таны төхөөрөмжөөс хэзээ ч гардаггүй. Бүх боловсруулалт таны хөтчид орон нутагт хийгддэг.
Түгээмэл хэрэглээ
- SVG дүрс сүлжээ дүүргэлт үйлдэлДүүргүүлэхээс өмнө дүрсийн ямар нэгэн шаардлагагүй метадатыг тайлаарай — ердийн 50-80% бууралт.
- Брэнд эмблем SVG-г сайжруулахSVG эмблем файлын хэмжээг хурдан сүлжээ ачаалал болон чанарыг сулруулахгүй бууруулах.
- Дүрэлэл болон баатар SVG-г сайжруулахТом дүрэлэл (баатрууд, сэтгүүлэлийн зурах) сайжруулалт файлын хэмжээ 30-70% савалж авч болно.
- JavaScript сугалаа хэмжээг бууруулахSVG React бүрэлдэхүүн болгон импортлож эсвэл кодод суулгасан үед SVG сайжруулалт таны JS сугалаа бууруулна.
- Figma / Sketch SVG экспортыг цэвэрлэхFigma болон Sketch SVG экспортууд өргөн метадатаа оруулдаг. Үйлдэлт ашиглахаасаа өмнө үүнийг сарнах.
Хэрхэн ажилладаг
Энэ хэрэгсэл гараар бичсэн оптимайзер ашиглан SVG файлын хэмжээг бүхэлдээ таны хөтчид бууруулдаг — номын сан, сервер хамааралгүй. Энэ хоёр дамжлагыг хослуулдаг: attribute-түвшний нарийн ажилд хөтчийн байгуулагдмал DOMParser/XMLSerializer, тайлбар арилгах, metadata арилгах, хоосон зайн нурлагад онилсон regex орлуулга.
- 1DOMParser SVG-г цэвэрлэдэгЯмар ч оптимизацийн өмнө хөтчийн DOMParser SVG-г XML болгон уншиж элемент бүрийг гүйдэг. Script tag, үйл явдал гарын авагч (ямар ч on* attribute), анимацийн элемент, гадаад URL лавлагаа нөхцөлгүйгээр арилдаг — та ямар оптимизацийн сонголтыг сонгосноос үл хамааран энэ ажилладаг.
- 2DOM-суурьтай аравтын дугуйруулгаХэрэв аравтын дугуйруулга идэвхтэй бол оптимайзер задарсан DOM-г хоёр дахь удаа гүйж, зөвхөн мэдэгдэж буй тоон attribute (path d өгөгдөл, координат, transform утга, зурлагын өргөн гэх мэт)-д дугуйруулгыг хэрэглэдэг, .5.5 гэх мэт нэгтгэсэн path утгыг гэмтээхгүйгээр бие даасан хөвөгч-цэгийн тоог тохируулах regex ашиглан.
- 3Regex дамжлага сериализацлагдсан тэмдэглэгээг цэвэрлэдэгXMLSerializer нормалчлагдсан XML гаргадаг, дараа нь онилсон мөрийн орлуулга HTML тайлбар, Inkscape/Sodipodi засварлагчийн metadata, XML тодорхойлолт, илүүдэл үндсэн attribute (version="1.1" шиг), tag хоорондын хоосон зайг арилгадаг — дамжлага бүр нарийн хамрах хүрээтэй тул текст node агуулга хэзээ ч хөндөгддөггүй.
- 4Gzip хэмжээ, экспортын форматХөтчийн CompressionStream API оролт, гаралт хоёулангийн бодит gzip хэмжээг тооцоолдог, учир нь энэ нь вэб дээрх дамжуулалтын өртгийг бодитоор тодорхойлдог зүйл. Оптимизацилагдсан SVG-г татах, түүхий SVG хэлбэрээр хуулах, React JSX-бэлэн camelCase attribute болгон хөрвүүлэх эсвэл CSS data URI болгон кодлож болно — бүх хөрвүүлэлт локалиар явагддаг.
Таны SVG таны хөтчийн табанд бүхэлдээ уншигдаж боловсруулагддаг — файлын байт таны төхөөрөмжөөс хэзээ ч гардаггүй.
Холбоотой хэрэгслүүд
CSS багасгагч ба засварлагч
Файлын хэмжээг багасгахын тулд CSS-г жижигрүүлэх эсвэл уншихад хялбар болгохын тулд жижигрүүлсэн CSS-г засварлах. Агшин зуур, хөтчид.
GIF шахагч
Хөдөлгөөнт GIF-ийн хэмжээг багасгана: Discord-ын 256 KB эможи, 512 KB стикер гэх мэт хэмжээний хязгаарт багтаах, эсвэл өнгө, өргөн, фреймээ өөрөө сонгоно. Хөтөч дотроо ажиллана; GIF байршуулагдахгүй.
PDF шахагч
PDF файлыг шахаж хэмжээг нь багасгана. Чанарын түвшин сонгоно — өндөр шахалт нь жижиг файл өгөх боловч зургийн чанар буурна.