ส่งออก SVG
ส่งออกไอคอนหรือกราฟิกเป็นไฟล์ SVG เพื่อให้คมชัดทุกขนาดและไฟล์มีขนาดเล็ก
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
ส่งออก SVG คือเรื่องที่ช่วยให้เราเป็นเครื่องมือช่วยสร้างหรือแปลงของที่ใช้ซ้ำ เช่น SVG, icon, formulaได้ถูกทางขึ้น
ระดับ
เหมาะกับคนเริ่มต้น
ใช้เมื่อไหร่
คุณต้องการไอคอนหรือโลโก้ที่ยังคมเมื่อขยายใหญ่บนจอความละเอียดสูง
อ่านแล้วทำอะไรต่อ
เลือกไอคอนรถบรรทุกเดี่ยว ส่งออกเป็น truck.svg แล้วนำไปวางในเมนูระบบโลจิสติกส์
เห็นภาพ: ทริคนี้เป็นยังไง
- 1เลือกวัตถุที่ต้องการไอคอนเดี่ยว ไม่ติดพื้นหลัง
- 2Export as SVGเลือกรูปแบบ SVG
- 3ตั้งชื่อสื่อความหมายเช่น truck.svg
- 4วางในโฟลเดอร์ไอคอน/icons ของโปรเจค
▶ เล่นอัตโนมัติ · ชี้เมาส์เพื่อหยุด · กดแถบด้านบนเพื่อข้ามขั้น
ใช้ตอนไหน?
- คุณต้องการไอคอนหรือโลโก้ที่ยังคมเมื่อขยายใหญ่บนจอความละเอียดสูง
- คุณอยากได้ไฟล์ขนาดเล็กกว่า PNG สำหรับไอคอนเรียบๆ
- คุณต้องการนำกราฟิกไปแก้สีหรือขนาดต่อในโค้ด
ความหมาย
SVG (รูปแบบภาพเวกเตอร์ที่เขียนด้วยโค้ดข้อความ) เก็บภาพเป็นเส้นและรูปทรงแทนจุดสี ทำให้ย่อขยายได้ไม่แตก การส่งออก (export) คือการสั่งให้โปรแกรมออกแบบบันทึกชิ้นงานออกมาเป็นไฟล์ .svg ที่นำไปใช้ต่อบนเว็บหรือในเอกสารได้
ขั้นตอนส่งออก SVG จากโปรแกรมออกแบบ
เลือกชิ้นงานที่ต้องการ แล้วสั่งส่งออกเป็น SVG พร้อมเลือกตัวเลือกให้ไฟล์สะอาด
1. เลือกเฉพาะเลเยอร์/กลุ่มที่ต้องการ (ไม่เลือกพื้นหลังที่ไม่ใช้)
2. Export / Export as... แล้วเลือกรูปแบบ SVG
3. ติ๊ก "Outline text" ถ้ามีตัวอักษร เพื่อกันฟอนต์เพี้ยน
4. ตั้ง viewBox/ขนาดให้พอดีกรอบ ไม่เหลือช่องว่าง
5. บันทึกชื่อไฟล์เป็นภาษาอังกฤษไม่มีเว้นวรรค เช่น truck-icon.svgตัวอย่างการใช้
ส่งออกไอคอนรถบรรทุก
เลือกไอคอนรถบรรทุกเดี่ยว ส่งออกเป็น truck.svg แล้วนำไปวางในเมนูระบบโลจิสติกส์