ຕົວເບິ່ງ SVG
ວາງ SVG markup ດິບ ແລະ ເບິ່ງຜົນທີ່ວາດອອກໄດ້ທັນທີ.
ພາບຕົວຢ່າງຈະປິດ scripts ແລະ external references, ແຕ່ຍັງໃຫ້ທ່ານກວດ viewBox ແລະ ລາຍລະອຽດຂະໜາດໄດ້.
SVG preview: ວາງລະຫັດດິບແລະກວດຜົນທັນທີ
viewBox ແລະການກວດຂະໜາດ: ກວດຄວາມໂປ່ງໃສ ແລະ ເນື້ອຫາທີ່ອາດບໍ່ປອດໄພ
ວິທີໃຊ້
- ວາງ SVG code ຫຼື ໂຫຼດໄຟລ໌ `.svg`.
- ສະຫຼັບພື້ນຫຼັງ ແລະ ລະດັບຊູມເພື່ອກວດກາການວາດ.
- ກວດ viewBox, ລາຍລະອຽດຂະໜາດ, ແລະ ຄຳເຕືອນ ແລ້ວບັນທຶກ SVG ຖ້າຈຳເປັນ.
ຕົວຢ່າງ
SVG ໄອຄອນແບບງ່າຍ
ຂໍ້ມູນປ້ອນ
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
ຜົນລັບ
ໄອຄອນວົງມົນສີຟ້າຖືກວາດອອກ ແລະ viewBox ຖືກສະແດງເປັນ `0 0 120 120` ໃນແຜງຂໍ້ມູນ.
FAQ
SVG ຂອງຂ້ອຍຖືກອັບໂຫຼດໄປບ່ອນອື່ນບໍ?
ບໍ່. SVG ທີ່ວາງ ແລະ ໄຟລ໌ທີ່ໂຫຼດຈະຢູ່ໃນ browser ຂອງທ່ານ ແລະ ບໍ່ຖືກສົ່ງໄປ server.
SVG ທີ່ມີ script ຫຼື foreignObject ຈະເກີດຫຍັງຂຶ້ນ?
ພາບຕົວຢ່າງປອດໄພຈະຖອນອົງປະກອບເຫຼົ່ານັ້ນອອກກ່ອນວາດ ແລະ ສະແດງຄຳເຕືອນໃນແຜງຂໍ້ມູນ.
SVG ທີ່ມີຮູບພາບຫຼືຟອນພາຍນອກຈະວາດອອກເໝືອນເດີມບໍ?
ບໍ່ແນ່ສະເໝີໄປ. external references ຖືກປິດ, ດັ່ງນັ້ນຮູບລັກສະນະອາດແຕກຕ່າງຈາກສະພາບດັ່ງເດີມ. ເຄື່ອງມືນີ້ໃຫ້ຄວາມສຳຄັນກັບການກວດກາທ້ອງຖິ່ນຢ່າງປອດໄພ.
ເຮັດໄມ SVG ຂອງຂ້ອຍຈຶ່ງບໍ່ວາດອອກ?
ສາເຫດທົ່ວໄປແມ່ນ XML ບໍ່ຖືກຕ້ອງ, attribute ບໍ່ຖືກ, ຫຼື root element ບໍ່ແມ່ນ `svg`. ກວດຂໍ້ຄວາມຜິດພາດທີ່ເຄື່ອງມືສະແດງ.
ເຮັດໄມຈຶ່ງຕ້ອງສະຫຼັບພື້ນຫຼັງ?
ພື້ນທີ່ໂປ່ງໃສ ແລະ ໄອຄອນສີອ່ອນອາດດູແຕກຕ່າງຫຼາຍຕາມພື້ນຫຼັງ, ດັ່ງນັ້ນເຄື່ອງມືຈຶ່ງໃຫ້ທ່ານທົດສອບ checker, ຂາວ, ແລະ ດຳໄດ້ໄວ.
ໝາຍເຫດ
- ເພື່ອຄວາມປອດໄພ, external URL references ແລະ ອົງປະກອບອັນຕະລາຍຖືກປິດກ່ອນວາດ.
- SVG ທີ່ພຶ່ງ external fonts ຫຼື ຮູບພາບອາດບໍ່ດູເໝືອນໃນສະພາບຕົ້ນສະບັບ.
- ໄຟລ໌ SVG ຂະໜາດໃຫຍ່ຫຼາຍຈະສະຫຼັບອອກຈາກ live preview ອັດຕະໂນມັດ ແລະ ຂໍໃຫ້ທ່ານ render ເອງ.