ຜົນປະໂຫຍດຂອງການນໍາໃຊ້ Scalable Vector Graphics
Scalable Vector Graphics, ຫຼື SVG, ມີບົດບາດສໍາຄັນໃນການອອກແບບເວັບໄຊທ໌໌ໃນມື້ນີ້. ຖ້າທ່ານບໍ່ປະຈຸບັນນໍາໃຊ້ SVG ໃນການອອກແບບເວັບໄຊຕ໌ຂອງທ່ານ, ນີ້ແມ່ນເຫດຜົນບາງຢ່າງທີ່ວ່າທ່ານຄວນເລີ່ມຕົ້ນເຮັດເຊັ່ນນັ້ນ, ເຊັ່ນດຽວກັບການປ່ຽນແປງທີ່ທ່ານສາມາດນໍາໃຊ້ສໍາລັບຕົວທ່ອງເວັບທີ່ອາຍຸທີ່ບໍ່ສະຫນັບສະຫນູນໄຟລ໌ເຫຼົ່ານີ້.
Resolution
ຜົນປະໂຫຍດທີ່ໃຫຍ່ທີ່ສຸດຂອງ SVG ແມ່ນຄວາມເປັນເອກະລາດ. ເນື່ອງຈາກໄຟລ໌ SVG ແມ່ນຮູບພາບກາຟິກແທນຮູບພາບ raster ທີ່ມີ pixels ລວງ, ພວກເຂົາສາມາດປັບຂະຫນາດໄດ້ໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບຮູບພາບໃດໆ. ນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະເມື່ອທ່ານກໍາລັງສ້າງເວັບໄຊທ໌ທີ່ຕອບສະຫນອງທີ່ຕ້ອງການ ເບິ່ງດີແລະເຮັດວຽກດີໃນລະດັບຄວາມກວ້າງແລະຂະຫນາດຫນ້າຈໍຕ່າງໆ .
ໄຟລ໌ SVG ສາມາດຂະຫຍາຍຫຼືຫຼຸດລົງເພື່ອຮອງຮັບຂະຫນາດການປ່ຽນແປງແລະຄວາມຕ້ອງການຮູບຮ່າງຂອງເວັບໄຊທ໌ທີ່ຕອບສະຫນອງຂອງທ່ານແລະທ່ານບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບຮູບພາບຕ່າງໆທີ່ມີຄຸນນະພາບທີ່ມີການລະເມີດຂັ້ນຕອນໃດໆ.
File Size
ຫນຶ່ງໃນສິ່ງທ້າທາຍທີ່ມີການນໍາໃຊ້ຮູບພາບ raster (JPG, PNG, GIF) ໃນ ເວັບໄຊທ໌ຕອບສະຫນອງ ແມ່ນຂະຫນາດໄຟລ໌ຂອງຮູບພາບເຫຼົ່ານັ້ນ. ເນື່ອງຈາກວ່າຮູບພາບ raster ບໍ່ຂະຫນາດວິທີທີ່ vector ຕົວໃດເຮັດ, ທ່ານຈໍາເປັນຕ້ອງໃຫ້ຮູບພາບຂອງ pixels ລວງຂອງທ່ານຢູ່ໃນຂະຫນາດໃຫຍ່ທີ່ສຸດທີ່ພວກມັນຈະຖືກສະແດງ. ນີ້ແມ່ນຍ້ອນວ່າທ່ານສະເຫມີສາມາດເຮັດໃຫ້ຮູບພາບຂະຫນາດນ້ອຍກວ່າແລະຮັກສາຄຸນນະພາບຂອງມັນ, ແຕ່ດຽວກັນບໍ່ແມ່ນຄວາມຈິງສໍາລັບການເຮັດພາບທີ່ໃຫຍ່ກວ່າ. ຜົນໄດ້ຮັບສຸດທ້າຍແມ່ນວ່າທ່ານມັກຈະມີຮູບພາບທີ່ມີຂະຫນາດໃຫຍ່ກ່ວາພວກເຂົາຖືກສະແດງຢູ່ໃນຫນ້າຈໍຂອງຄົນ, ຊຶ່ງຫມາຍຄວາມວ່າພວກເຂົາກໍາລັງຖືກບັງຄັບໃຫ້ດາວໂຫລດໄຟລ໌ຂະຫນາດໃຫຍ່.
SVG ແກ້ໄຂບັນຫານີ້. ເນື່ອງຈາກວ່າຮູບພາບ vector ແມ່ນສາມາດຂະຫຍາຍໄດ້, ທ່ານສາມາດມີຂະຫນາດໄຟລ໌ຂະຫນາດນ້ອຍຫຼາຍບໍ່ວ່າຈະເປັນຮູບພາບຂະຫນາດໃຫຍ່ທີ່ຈໍາເປັນຕ້ອງໄດ້ສະແດງໃຫ້ເຫັນ. ນີ້ສຸດທ້າຍຈະມີຜົນກະທົບທາງບວກກ່ຽວກັບການປະຕິບັດໂດຍລວມຂອງສະຖານທີ່ແລະຄວາມໄວດາວໂຫລດ.
CSS Styling
ລະຫັດ SVG ສາມາດຖືກເພີ່ມໂດຍກົງກັບ HTML ຂອງຫນ້າ. ນີ້ແມ່ນເອີ້ນວ່າ "inline SVG". ຫນຶ່ງໃນຜົນປະໂຫຍດຂອງການນໍາໃຊ້ inline SVG ແມ່ນວ່າເນື່ອງຈາກກາຟິກຖືກແຕ້ມໂດຍຕົວທ່ອງເວັບໂດຍອີງໃສ່ລະຫັດຂອງທ່ານ, ບໍ່ຈໍາເປັນຕ້ອງເຮັດການຮ້ອງຂໍ HTTP ທີ່ຈະເອີ້ນເອົາໄຟລ໌ຮູບພາບ. ຜົນປະໂຫຍດອີກປະການຫນຶ່ງແມ່ນວ່າ SVG inline ສາມາດຖືກ styled ກັບ CSS.
ຕ້ອງການປ່ຽນສີຂອງໄອຄອນ SVG? ແທນທີ່ຈະຕ້ອງເປີດຮູບພາບໃນບາງປະເພດຂອງຊອບແວການດັດແກ້ແລະສົ່ງອອກແລະອັບໂຫລດໄຟລ໌ອີກເທື່ອຫນຶ່ງ, ທ່ານສາມາດປ່ຽນໄຟລ໌ SVG ດ້ວຍເສັ້ນທາງ CSS ເທົ່ານັ້ນ.
ນອກນັ້ນທ່ານຍັງສາມາດນໍາໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ CSS ອື່ນໆໃນຮູບພາບ SVG ເພື່ອປ່ຽນໃຫ້ຢູ່ໃນສະຖານະພາບຫມຸນຫຼືສໍາລັບຄວາມຕ້ອງການໃນການອອກແບບບາງຢ່າງ. ທ່ານສາມາດ animate ກາຟິກເຫລົ່ານັ້ນເພື່ອເພີ່ມການເຄື່ອນໄຫວແລະການໂຕ້ຕອບບາງຢ່າງກັບຫນ້າ.
ພາບເຄື່ອນໄຫວ
ເນື່ອງຈາກໄຟລ໌ SVG inline ສາມາດໄດ້ຮັບການແຕ່ງຕັ້ງດ້ວຍ CSS, ທ່ານສາມາດໃຊ້ CSS animations ກັບພວກເຂົາເຊັ່ນກັນ. CSS ການຫັນປ່ຽນແລະການປ່ຽນແປງແມ່ນສອງວິທີງ່າຍໆທີ່ຈະເພີ່ມຊີວິດບາງຢ່າງໃຫ້ແກ່ໄຟລ໌ SVG. ທ່ານສາມາດໄດ້ຮັບປະສົບການແບບ Flash ທີ່ຄ້າຍຄືກັນໃນຫນ້າເວັບທີ່ບໍ່ມີຜົນຕໍ່ ການລົງທືນທີ່ມາພ້ອມກັບ Flash ໃນເວັບໄຊທ໌ມື້ນີ້.
ການນໍາໃຊ້ SVG
ມີປະສິດທິພາບເປັນ SVG, ຮູບພາບເຫຼົ່ານີ້ບໍ່ສາມາດທົດແທນທຸກຮູບແບບຮູບພາບອື່ນໆທີ່ທ່ານກໍາລັງໃຊ້ຢູ່ໃນເວັບໄຊທ໌ຂອງທ່ານ. ຮູບພາບທີ່ຕ້ອງການຄວາມເລິກສີເລິກຈະຍັງຕ້ອງມີ JPG ຫຼືບາງໄຟລ໌ PNG, ແຕ່ຮູບພາບທີ່ງ່າຍໆເຊັ່ນຮູບສັນຍາລັກແມ່ນເຫມາະສົມຢ່າງສົມບູນທີ່ຈະຖືກປະຕິບັດເປັນ SVG.
SVG ຍັງສາມາດເຫມາະສົມສໍາລັບຮູບປະກອບທີ່ສັບສົນຫຼາຍ, ເຊັ່ນ: ໂລໂກ້ຂອງບໍລິສັດຫຼືຕາຕະລາງແລະຕາຕະລາງ. ທັງຫມົດຂອງຮູບພາບຈະໄດ້ຮັບຜົນປະໂຫຍດຈາກການຂະຫຍາຍຕົວ, ສາມາດໄດ້ຮັບການອອກແບບດ້ວຍ CSS, ແລະຂໍ້ໄດ້ປຽບອື່ນໆທີ່ລະບຸໄວ້ໃນບົດຄວາມນີ້.
ສະຫນັບສະຫນູນສໍາລັບຕົວທ່ອງເວັບທີ່ອາຍຸ
ສະຫນັບສະຫນູນໃນປັດຈຸບັນສໍາລັບ SVG ແມ່ນດີຫຼາຍໃນຕົວທ່ອງເວັບເວັບໄຊຕ໌ທີ່ທັນສະໄຫມ. ຕົວທ່ອງເວັບທີ່ພຽງແຕ່ທີ່ຂາດການສະຫນັບສະຫນູນສໍາລັບກາຟິກເຫຼົ່ານີ້ແມ່ນຮຸ່ນເກົ່າຂອງ Internet Explorer (ເວີຊັນ 8 ແລະລຸ່ມ) ແລະສອງສາມລຸ້ນເກົ່າຂອງ Android. ທັງຫມົດ, ຈໍານວນຂະຫນາດນ້ອຍຫຼາຍຂອງປະຊາກອນຄົ້ນຫາຍັງນໍາໃຊ້ຕົວທ່ອງເວັບເຫຼົ່ານີ້, ແລະຈໍານວນທີ່ຍັງສືບຕໍ່ shrink. ນີ້ຫມາຍຄວາມວ່າ SVG ສາມາດນໍາໃຊ້ໄດ້ຢ່າງປອດໄພໃນເວັບໄຊທ໌ມື້ນີ້.
ຖ້າທ່ານຕ້ອງການໃຫ້ສະຫນັບສະຫນູນສໍາລັບ SVG, ທ່ານສາມາດໃຊ້ເຄື່ອງມືເຊັ່ນ Grumpicon ຈາກກຸ່ມ Filament. ຊັບພະຍາກອນນີ້ຈະໃຊ້ໄຟລ໌ຮູບພາບ SVG ຂອງທ່ານແລະສ້າງການປ່ຽນແປງ PNG ສໍາລັບຕົວທ່ອງເວັບທີ່ມີອາຍຸ.
ດັດແກ້ໂດຍ Jeremy Girard ໃນວັນທີ 1/27/17