ຂ້ອຍຈະຫຼຸດຂະໜາດໄຟລ໌ SVG ໄດ້ແນວໃດ?

ລາກໄຟລ໌ .svg ມາວາງ ຫຼື ວາງໂຄ້ດຕົ້ນສະບັບ, ໃຊ້ໂຕເລືອກເລີ່ມຕົ້ນ, ແລ້ວປຽບທຽບຂະໜາດ ຕົ້ນສະບັບ ກັບ ໄດ້ຮັບການປັບປຸງ. ຈາກນັ້ນໃຊ້ ດາວໂຫລດ .svg ຫຼື ສຳເນົາ ເພື່ອນຳຜົນໄດ້ຮັບທີ່ມີຂະໜາດນ້ອຍລົງໄປໃຊ້.

ໂດຍຄ່າເລີ່ມຕົ້ນແລ້ວ ຕົວປັບແຕ່ງ SVG ຈະລຶບຫຍັງອອກແດ່?

ໂດຍຄ່າເລີ່ມຕົ້ນ ມັນຈະລຶບຄຳເຫັນ, metadata ລວມທັງ title, desc ແລະ ຂໍ້ມູນ Inkscape ຫຼື Sodipodi, ຊ່ອງຫວ່າງສ່ວນເກີນ, attribute ເລີ່ມຕົ້ນທີ່ຊໍ້າຊ້ອນ ແລະ XML declaration, ພ້ອມທັງປັດເສດຕົວເລກທົດສະນິຍົມໃຫ້ເຫຼືອ 2 ຕຳແໜ່ງ.

ເປັນຫຍັງ element ID ຈຶ່ງຍັງຄົງຢູ່ຫຼັງຈາກປັບແຕ່ງແລ້ວ?

ລຶບ element id attributes ຖືກປິດໄວ້ໂດຍຄ່າເລີ່ມຕົ້ນ ເນື່ອງຈາກແອນິເມຊັນ CSS ຫຼື JavaScript ອາດຈະອ້າງອີງເຖິງ ID ເຫຼົ່ານັ້ນ. ເປີດໃຊ້ມັນສະເພາະເມື່ອບໍ່ມີສິ່ງໃດໃນໜ້າເວັບຂອງທ່ານອີງໃສ່ ID ເຫຼົ່ານັ້ນເທົ່ານັ້ນ.

ເປັນຫຍັງແອນິເມຊັນ SVG ຂອງຂ້ອຍຈຶ່ງຫາຍໄປ?

ແທັກ Script, attribute ປະເພດ on-event, ການອ້າງອີງພາຍນອກ ແລະ ອົງປະກອບແອນິເມຊັນ SMIL ເຊັ່ນ animate ແລະ set ຈະຖືກລຶບອອກເພື່ອຄວາມປອດໄພ, ສະນັ້ນ SVG ທີ່ປັບປຸງແລ້ວຈະກາຍເປັນພາບນິ້ງ.

ຂ້ອຍສາມາດໃຊ້ SVG ທີ່ປັບປຸງແລ້ວໃນ React ຫຼື CSS ໄດ້ບໍ່?

ໄດ້. ນອກຈາກ ສຳເນົາ ແລະ ດາວໂຫລດ .svg ແລ້ວ, ຍັງມີ ສຳເນົາເປັນ JSX, ເຊິ່ງຈະປ່ຽນ attribute ເປັນ camelCase, ແລະ ສຳເນົາ CSS background. ການສະແດງຕົວຢ່າງພາບຈະຊ່ວຍໃຫ້ທ່ານກວດສອບໄດ້ວ່າມັນຍັງສະແດງຜົນຢ່າງຖືກຕ້ອງ.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ໄຟລ໌ຂອງຂ້ອຍຖືກອັບໂຫຼດບໍ?

ບໍ່. ໄຟລ໌ຂອງທ່ານຖືກເປີດ ແລະ ປະມວນຜົນພາຍໃນບຣາວເຊີຂອງທ່ານ ແລະ ບໍ່ຖືກສົ່ງໄປ LibraTool. ບາງເຄື່ອງມືຈະດາວໂຫຼດເອັນຈິນປະມວນຜົນ ຫຼື ໂມເດວ AI ໄປບຣາວເຊີກ່ອນ; ການດາວໂຫຼດນັ້ນບໍ່ມີຂໍ້ມູນຂອງທ່ານ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ. ໄຟລ໌ໃຫຍ່ຫຼາຍອາດຊ້າ ຫຼື ໜ່ວຍຄວາມຈຳເຕັມເທິງໂທລະສັບ, ດັ່ງນັ້ນໃຫ້ໃຊ້ຄອມພິວເຕີສຳລັບໄຟລ໌ເຫຼົ່ານັ້ນ.

✨

ເພີ່ມປະສິດທິພາບ & ຫຍໍ້ SVG ຟຣີ

ລຶບ metadata, ຫຼຸ່ນຊ່ອງຫວ່າງ ແລະ ຮອນທດສະນິຍົມ ເພື່ອຫຼຸ່ນຂະໜາດ SVG ຢ່າງຫຼວງຫຼາຍ — ໂດຍທົ່ວໄປ 30-70%. ຕົວຢ່າງ visual ກວດວ່າ ບໍ່ມີຫຍັງເພ.

ຂະໜາດໄຟລ໌ຂຶ້ນກັບອຸປະກອນຂອງທ່ານໄຟລ໌ເປັນສ່ວນຕົວບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ວາງໄຟລ໌ບ່ອນນີ້, ຫຼື ກົດເພື່ອເລືອກ

SVG · ປະມວນຜົນຢູ່ໃນອຸປະກອນຂອງທ່ານ

ຫຼືກົດ Ctrl+V ເພື່ອວາງຈາກຄລິບບອດ

ຊອກຫາໄຟລ໌

— ຫຼືວາງ SVG ຂ້າງລຸ່ມ —

ໄຟລ໌ຂອງທ່ານບໍ່ເຄີຍອອກຈາກອຸປະກອນຂອງທ່ານ. ການປະມວນຜົນທັງໝົດເກີດຂຶ້ນຢູ່ໃນຕົວທ່ອງເວັບຂອງທ່ານ.

ການນຳໃຊ້ທົ່ວໄປ

ໂສ ວ ວ ສໍ າ ລັ ບ ນ ໍ ະ ກໍ າ ສໍ າ ລັ ບ SVG ສະ ວັ ສ ດ ຣລຶບ metadata ທີ່ບໍ່ຈຳເປັນອອກຈາກ SVG ໄອຄອນກ່ອນນຳໃຊ້ຈິງ — ຫຼຸດໄດ້ປົກກະຕິ 50-80%.
ສາມາຣະທີ່ລອຍ SVG ສະວັສດຣຫຼຸດຂະໜາດໄຟລ SVG ທີ່ຕາຕະລາງສໍາລັບການໂຫລດເວບໄຟທີ່ໄວລົບໂດຍບໍ່ສຼດຄຸນໄພ.
ເຫຼະວົງຈອນ ແລະ ສາມາຣະທີ່ລອຍ SVGສໍາລັບເຫຼະວົງຈອນຂະຫນາດໃຫຍ່ (ສາມາຣະທີ່ລອຍ ກາຟິກ decorative), ການສາມາຣະທີ່ລອຍສາມາດຕັດຊື່ຂະໜາດໄຟລ 30-70%.
ຫຼຸດຂະໜາດຜູກໃສ JavaScriptເມື່ອ SVG ຖືກນໍາເຂົ້າເປັນ React ອົກສະປະກອບ ຫຼື ອຸດສະລາຍເປັນລະຫັດ, ການສາມາຣະທີ່ລອຍ SVG ຫຼຸດ JS ຜູກຂອງທ່ານ.
ເນື່ອກ Figma / Sketch SVG ສົ່ງອອກໄຟລ໌ SVG ທີ່ສົ່ງອອກຈາກ Figma ແລະ Sketch ມີ metadata ຈຳນວນຫຼາຍ. ລຶບອອກກ່ອນໃຊ້ໃນ production.

ມັນເຮັດວຽກແນວໃດ

ເຄື່ອງມືນີ້ຫຼຸດຂະໜາດໄຟລ໌ SVG ໂດຍໃຊ້ຕົວປັບປຸງທີ່ຂຽນຂຶ້ນເອງທີ່ເຮັດວຽກຢູ່ໃນບຣາວເຊີຂອງທ່ານທັງໝົດ — ບໍ່ມີ library, ບໍ່ມີເຊີເວີ. ມັນລວມ 2 ຂັ້ນຕອນ: DOMParser/XMLSerializer ໃນຕົວຂອງບຣາວເຊີສຳລັບການເຮັດວຽກລະດັບ attribute ຢ່າງລະອຽດ, ແລະ ການແທນທີ່ດ້ວຍ regex ແບບເປົ້າໝາຍສຳລັບການລົບຄຳເຫັນ, ການລົບ metadata, ແລະ ການຫຍໍ້ຊ່ອງວ່າງ.

1
DOMParser ທຳຄວາມສະອາດ SVG
ກ່ອນການປັບປຸງໃດໆ, DOMParser ໃນຕົວຂອງບຣາວເຊີຈະອ່ານ SVG ເປັນ XML ແລະ ຍ່າງຜ່ານທຸກ element. ແທັກ script, ຕົວຈັດການເຫດການ (attribute on* ໃດກໍ່ຕາມ), element ແອນິເມຊັນ, ແລະ ການອ້າງອິງ URL ພາຍນອກຈະຖືກລົບອອກໂດຍບໍ່ມີເງື່ອນໄຂ — ນີ້ຈະເກີດຂຶ້ນບໍ່ວ່າທ່ານຈະເລືອກຕົວເລືອກປັບປຸງໃດ.
2
ການປັດເສດທົດສະນິຍົມແບບອີງ DOM
ຖ້າເປີດການປັດເສດທົດສະນິຍົມ, ຕົວປັບປຸງຈະຍ່າງຜ່ານ DOM ທີ່ວິເຄາະແລ້ວອີກຄັ້ງ ແລະ ນຳໃຊ້ການປັດເສດສະເພາະກັບ attribute ຕົວເລກທີ່ຮູ້ຈັກ (ຂໍ້ມູນ d ຂອງ path, ພິກັດ, ຄ່າ transform, ຄວາມກວ້າງເສັ້ນ, ແລະອື່ນໆ), ໂດຍໃຊ້ regex ທີ່ຈັບຄູ່ຕົວເລກທົດສະນິຍົມແຕ່ລະຕົວໂດຍບໍ່ທຳລາຍຄ່າ path ທີ່ຕໍ່ກັນເຊັ່ນ .5.5.
3
ຂັ້ນຕອນ regex ທຳຄວາມສະອາດ markup ທີ່ serialize ແລ້ວ
XMLSerializer ຈະສ້າງ XML ທີ່ເປັນມາດຕະຖານ, ຈາກນັ້ນການແທນທີ່ string ແບບເປົ້າໝາຍຈະລົບຄຳເຫັນ HTML, metadata ຕົວແກ້ໄຂ Inkscape/Sodipodi, ການປະກາດ XML, attribute ຄ່າເລີ່ມຕົ້ນທີ່ຊ້ຳຊ້ອນ (ເຊັ່ນ version="1.1"), ແລະ ຊ່ອງວ່າງລະຫວ່າງແທັກ — ແຕ່ລະຂັ້ນຕອນຈຳກັດຂອບເຂດແຄບເພື່ອບໍ່ໃຫ້ແຕະຕ້ອງເນື້ອຫາ text node ເລີຍ.
4
ຂະໜາດ gzip ແລະ ຮູບແບບການສົ່ງອອກ
CompressionStream API ຂອງບຣາວເຊີຄິດໄລ່ຂະໜາດ gzip ແທ້ຈິງຂອງທັງຂໍ້ມູນປ້ອນເຂົ້າ ແລະ ຜົນລັບ, ເນື່ອງຈາກນັ້ນຄືສິ່ງທີ່ກຳນົດຄ່າໃຊ້ຈ່າຍໃນການສົ່ງຜ່ານເວັບແທ້ຈິງ. SVG ທີ່ປັບປຸງແລ້ວສາມາດດາວໂຫຼດ, ສຳເນົາເປັນ SVG ດິບ, ແປງເປັນ attribute camelCase ພ້ອມໃຊ້ໃນ React JSX, ຫຼື encode ເປັນ CSS data URI — ການແປງທັງໝົດເກີດຂຶ້ນໃນເຄື່ອງ.

SVG ຂອງທ່ານຖືກອ່ານ ແລະ ປະມວນຜົນຢູ່ໃນແທັບບຣາວເຊີຂອງທ່ານທັງໝົດ — bytes ຂອງໄຟລ໌ບໍ່ອອກຈາກອຸປະກອນຂອງທ່ານເລີຍ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🗜️

ຫຍໍ້ & ຈັດຮູບແບບ CSS

ຫຍໍ CSS ເພື່ອຫຼຸດຂະໜາດໄຟລ໌ ຫຼື ເຮັດ CSS ທີ່ຖືກຫຍໍໃຫ້ອ່ານໄດ້ງ່າຍ. ທັນທີ, ໃນບຣາວເຊີ.

ລອງໃຊ້

🗜️

ເຄື່ອງບີບອັດ GIF

ເຮັດ GIF ເຄື່ອນໄຫວໃຫ້ນ້ອຍລົງ: ໃຫ້ຢູ່ໃນຂີດຈຳກັດຂະໜາດ ເຊັ່ນ ອີໂມຈິ 256 KB ຫຼື ສະຕິກເກີ 512 KB ຂອງ Discord, ຫຼື ເລືອກສີ, ຄວາມກວ້າງ ແລະ ເຟຣມເອງ. ເຮັດວຽກໃນບຼາວເຊີຂອງທ່ານ; GIF ບໍ່ຖືກອັບໂຫລດ.

ລອງໃຊ້ໄຟລ໌ຢູ່ໃນທ້ອງຖິ່ນ

📄

ເຄື່ອງບີບອັດ PDF

ບີບອັດໄຟລ໌ PDF ເພື່ອຫຼຸດຂະໜາດ. ເລືອກລະດັບຄຸນນະພາບ — ການບີບອັດຫຼາຍຂຶ້ນໝາຍຄວາມວ່າໄຟລ໌ນ້ອຍລົງ ແຕ່ຄວາມແທ້ຈິງຂອງຮູບພາບຕ່ຳລົງ.