Үндсэн агуулга руу очих
LibraTool logoLibraTool

SVG оновчлогч ба жижигрүүлэгч — үнэгүй

SVG файлын хэмжээг мэдэгдэхүйц багасгахын тулд мета өгөгдлийг устгаж, зайг нэгтгэж, аравтын бутархайг тойруулах — ерөнхийдөө 30-70% багасдаг. Харааны урьдчилан харалт юу ч эвдэрч байгаа эсэхийг шалгадаг.

Ачаалагдсаны дараа офлайн ажилладаг

Файлаа энд чирж оруулах эсвэл дарж сонгоно уу

SVG · таны төхөөрөмж дээр боловсруулагдсан

эсвэл клипбордоос буулгахын тулд Ctrl+V дарна уу

Файл хайх
— эсвэл SVG-г доор буулгана уу —

Таны файлууд таны төхөөрөмжөөс хэзээ ч гардаггүй. Бүх боловсруулалт таны хөтчид орон нутагт хийгддэг.

Түгээмэл хэрэглээ

  • 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 орлуулга.

  1. 1
    DOMParser SVG-г цэвэрлэдэг
    Ямар ч оптимизацийн өмнө хөтчийн DOMParser SVG-г XML болгон уншиж элемент бүрийг гүйдэг. Script tag, үйл явдал гарын авагч (ямар ч on* attribute), анимацийн элемент, гадаад URL лавлагаа нөхцөлгүйгээр арилдаг — та ямар оптимизацийн сонголтыг сонгосноос үл хамааран энэ ажилладаг.
  2. 2
    DOM-суурьтай аравтын дугуйруулга
    Хэрэв аравтын дугуйруулга идэвхтэй бол оптимайзер задарсан DOM-г хоёр дахь удаа гүйж, зөвхөн мэдэгдэж буй тоон attribute (path d өгөгдөл, координат, transform утга, зурлагын өргөн гэх мэт)-д дугуйруулгыг хэрэглэдэг, .5.5 гэх мэт нэгтгэсэн path утгыг гэмтээхгүйгээр бие даасан хөвөгч-цэгийн тоог тохируулах regex ашиглан.
  3. 3
    Regex дамжлага сериализацлагдсан тэмдэглэгээг цэвэрлэдэг
    XMLSerializer нормалчлагдсан XML гаргадаг, дараа нь онилсон мөрийн орлуулга HTML тайлбар, Inkscape/Sodipodi засварлагчийн metadata, XML тодорхойлолт, илүүдэл үндсэн attribute (version="1.1" шиг), tag хоорондын хоосон зайг арилгадаг — дамжлага бүр нарийн хамрах хүрээтэй тул текст node агуулга хэзээ ч хөндөгддөггүй.
  4. 4
    Gzip хэмжээ, экспортын формат
    Хөтчийн CompressionStream API оролт, гаралт хоёулангийн бодит gzip хэмжээг тооцоолдог, учир нь энэ нь вэб дээрх дамжуулалтын өртгийг бодитоор тодорхойлдог зүйл. Оптимизацилагдсан SVG-г татах, түүхий SVG хэлбэрээр хуулах, React JSX-бэлэн camelCase attribute болгон хөрвүүлэх эсвэл CSS data URI болгон кодлож болно — бүх хөрвүүлэлт локалиар явагддаг.

Таны SVG таны хөтчийн табанд бүхэлдээ уншигдаж боловсруулагддаг — файлын байт таны төхөөрөмжөөс хэзээ ч гардаггүй.

Холбоотой хэрэгслүүд

Түгээмэл асуултууд