ปรับปรุงล่าสุด 27 สิงหาคม 2569
วิธีแปลง SVG ให้เป็นโลโก้ 3 มิติ
SVG เป็นไฟล์ที่ดีที่สุดในการเริ่มต้น: 3DLogo.io อ่านเส้นทางของมันโดยตรง ดันออกจนถึงความลึกที่คุณกำหนดและใช้วัสดุ ดังนั้นโลโก้ 3D ที่เสร็จแล้วจะมีเส้นรอบรูปเหมือนกับไฟล์เวกเตอร์ของคุณ อัปโหลด SVG ในตัวแก้ไข เลือกพื้นผิวเช่น โครเมียม ทอง หรือแก้ว และส่งออกเป็น PNG, GLB หรือ ลูป MP4
กลไกมีความสำคัญเพราะมันอธิบายความแตกต่างของคุณภาพ SVG อธิบายยี่ห้อเป็นเส้นโค้งทางคณิตศาสตร์อยู่แล้ว ตัวแก้ไขจะแปลงเส้นโค้งเหล่านั้นเป็นตาข่ายและดันไปตามแกนความลึก ดังนั้นขอบจะคงคมชัดในทุกขนาดและสามารถแกะสลักมุมเอียงได้สะอาด ไม่มีการคาดเดาใด ๆ PNG หรือ JPEG ต้องถูกวาดขึ้นก่อนเพื่อแปลงเป็นเส้นโค้ง ซึ่งเป็นการประมาณตำแหน่งขอบ
SVG ควรประกอบด้วยอะไร
| ความต้องการ | ทำไม และต้องทำอะไร |
|---|---|
| เส้นร่าง ไม่ใช่ข้อความ | ข้อความแบบมีชีวิตของ SVG ไม่มีเส้นรอบรูปให้ดันออก แปลงข้อความเป็นเส้นรอบรูปรายการก่อนส่งออก (Illustrator: ข้อความ > สร้างเส้นรอบรูป; Figma: Flatten; Inkscape: เส้นทาง > วัตถุเป็นเส้นทาง) หากไฟล์ไม่มีรูปร่างที่สามารถวาดได้ ตัวแก้ไขจะแจ้งว่าไม่พบรูปร่างใด ๆ |
| น้อยกว่า 1 MB | การอัปโหลดของ SVG มีขีดจำกัด 1 MB โลโก้มักไม่ต้องการมากไปกว่านี้; ไฟล์ที่ใหญ่ขนาดนี้มักบรรจุภาพราสเตอร์ฝังอยู่หรือจุดเส้นทางนับพันจากภาพเวกเตอร์อัตโนมัติ |
| ไม่มีสคริปต์ฝังหรือการอ้างอิงภายนอก | SVG จะถูกวิเคราะห์ในเบราว์เซอร์ของคุณ ดังนั้นทุกสิ่งที่อาจรันโค้ดหรือต้องการเรียกใช้ทรัพยากรระยะไกลจะถูกปฏิเสธแทนที่จะถูกเขียนใหม่: สคริปต์, foreignObject, เอนทิตี XML, ตัวจัดการเหตุการณ์แบบออนไลน์, URL javascript:, iframe, object, embed, meta, link, ค่าภายนอกของ href และสไตล์ @import หรือ url() ระยะไกล ส่งออก SVG แบบง่าย เพียงแค่มีเส้นทางเท่านั้น |
| ประมาณ 50 เส้นทางหรือน้อยกว่า | จำนวนเส้นทางกำหนดขนาดของตาข่าย ห้าเส้นทางหรือน้อยกว่านั้นดีที่สุด ถึง 20 เส้นทางทำงานได้ดี จาก 21 ถึง 50 อาจช้าในโทรศัพท์เก่า และมากกว่า 50 ตัวแก้ไขจะปฏิเสธไฟล์เพราะตาข่ายจะบล็อกเบราว์เซอร์ รวมรูปทรงที่ซ้อนกันและลบเลเยอร์ที่ซ่อนอยู่เพื่อลดจำนวน |
| viewBox จริง | เครื่องหมายปรับให้เข้ากับผืนผ้าใบจาก viewBox ไฟล์ที่ส่งออกเป็น 4000 px หรือมากกว่านั้นและไม่มี viewBox อาจมีสเกลที่แปลก ๆ; ปรับโต๊ะทำงานให้เข้ากับเครื่องหมายก่อนส่งออก |
วิธีส่งออก SVG ที่ใช้งานได้
- Illustrator: เลือกภาพประกอบ, ข้อความ > สร้างเส้นรอบ (Type > Create Outlines) แล้วไปที่ วัตถุ > เส้นทาง > ล้าง (Object > Path > Clean Up) เพื่อลบจุดหลวม ๆ ไฟล์ > ส่งออก > ส่งออกเป็น > SVG โดยใช้สไตล์ในคุณสมบัติการนำเสนอ (Presentation Attributes) และปิดการใช้งาน ปรับตัวได้ (Responsive) เพื่อให้มีการเขียน viewBox
- Figma: เลือกเฟรม, คลิกขวา > แบนถ้าเหลือข้อความสด จากนั้นส่งออก > SVG โดยปิดการใช้งาน "รวม id attribute" และเปิดใช้งาน "Outline text"
- Inkscape: เส้นทาง > วัตถุเป็นเส้นทาง (Path > Object to Path) สำหรับการเลือกทั้งหมด จากนั้นไปที่ ไฟล์ > บันทึกเป็น > SVG แบบแผน (Plain SVG) ไม่ใช่ SVG ของ Inkscape ซึ่งมีข้อมูลเมตาเพิ่มเติมของตัวแก้ไข
- ในเครื่องมือใด ๆ: หากตรามีการเจาะหรือมีรูปแบบกลับด้าน (ช่องว่างของ "O" หรือ "A") ให้เก็บไว้เป็นเส้นทางผสมเพื่อให้ช่องว่างยังคงอยู่เมื่อตัดโค้งแทนที่จะถูกเติม
วิธีทำบน 3DLogo.io
- เปิดโปรแกรมแก้ไข ไม่จำเป็นต้องมีบัญชีเพื่อเริ่มต้น
- ปล่อยไฟล์ SVG บนแผงการอัปโหลด หรือใช้ปุ่มอัปโหลด
- เลือกการตั้งค่าล่วงหน้าของวัสดุ: โครม, ทอง, แก้ว, โฮโลกราฟิก, โลหะขัด, หรือการไล่เฉดสี
- ปรับความลึกและมุมเบี้ยว จากนั้นเลือกสภาพแวดล้อมและพื้นหลัง เพิ่มการเคลื่อนไหวหากโลโก้จะเคลื่อนที่
- ส่งออก PNG สำหรับภาพนิ่ง, GLB หรือ glTF เพื่อเก็บโมเดล 3D, OBJ หรือ STL สำหรับเครื่องมือเดสก์ท็อปและการพิมพ์ หรือ MP4 สำหรับลูป
เงื่อนไขและข้อจำกัด
สิ่งที่เกิดจากการอัปโหลด SVG คือการรีดออกเป็นสีเดียว สีของแต่ละเส้นทางในไฟล์ต้นฉบับจะไม่ถูกถ่ายโอนเป็นวัสดุแยกออกมา; เครื่องหมายทั้งหมดจะใช้ค่ากำหนดล่วงหน้าที่เลือกไว่ การไล่ระดับสี โหมดผสม ฟิลเตอร์ และหน้ากากการตัดของ SVG จะถูกมองข้าม ดังนั้นรวมเอาส่วนเหล่านี้เข้าด้วยกันในรูปแบบก่อนหน้านี้หรือยอมรับขอบเขตเรียบ การส่งออกฟรีจะมีเครื่องหมายเล็ก ๆ ของ 3dlogo.io และจำกัดภาพที่ 1024 px และวิดีโอที่ 480p
หากไฟล์ถูกปฏิเสธหรือผลลัพธ์ดูผิด หน้าการแก้ไขปัญหา จะแสดงข้อความทุกข้อความที่ตัวแก้ไขสามารถแสดงและวิธีแก้ไขสำหรับแต่ละข้อความ
คำถาม
- สามารถแปลง SVG ใด ๆ ให้เป็นโลโก้ 3D ได้หรือไม่?
- SVG ใดๆ ที่มีน้ำหนักน้อยกว่า 1 MB, มีเส้นทางที่สามารถวาดได้แทนที่จะเป็นข้อความสด, ไม่มีสคริปต์หรือการอ้างอิงภายนอก และมีเส้นทางประมาณ 50 เส้นทางหรือต่ำกว่า เงื่อนไขทั้งสี่นี้ครอบคลุมเกือบทุกตราสัญลักษณ์ที่ส่งออก ข้อยกเว้นที่พบบ่อยคือภาพเวกเตอร์อัตโนมัติที่มีหลายพันเส้นทาง
- ทำไม SVG ของฉันอัปโหลดแต่ไม่แสดงอะไร?
- สาเหตุที่พบบ่อยคือข้อความสดที่ไม่เคยถูกแปลงเป็นเค้าโครง ดังนั้นไฟล์จึงถูกวิเคราะห์ได้ดีแต่ไม่มีรูปทรงใดๆ ให้ยืดหรือดึงขึ้น สาเหตุที่สองคือภาพประกอบที่อยู่ข้างนอก viewBox แปลงข้อความเป็นเค้าโครง, ครอบโต๊ะงานให้พอดีกับตราสัญลักษณ์ และส่งออกอีกครั้ง
- ช่องว่างของตัวอักษรยังเปิดอยู่ใน 3D หรือไม่?
- ใช่ เมื่อคอนทราฟอร์มเป็นส่วนหนึ่งของเส้นทางผสมด้วยกฎการเติมที่ถูกต้อง ซึ่งเป็นสิ่งที่เครื่องมือออกแบบใด ๆ จะตั้งค่าโดยอัตโนมัติ ถ้ามีช่องว่างถูกเติม คอนทราฟอร์มจะถูกส่งออกเป็นรูปร่างซ้อนแยกต่างหาก; เลือกทั้งสองและสร้างเส้นทางผสมก่อนส่งออก
- SVG ดีกว่า PNG สำหรับโลโก้ 3D หรือไม่?
- ใช่ เมื่อคุณสามารถเลือกได้ เส้นทาง SVG จะถูกดึงออกมาด้วยเส้นขอบที่แม่นยำ ดังนั้นขอบและมุมเอียงจะคงคมชัดในทุกขนาดการส่งออก PNG ต้องถูกสร้างเส้นก่อน ซึ่งจะประมาณเส้นขอบและขึ้นอยู่กับความต่าง ใช้ PNG เฉพาะเมื่อไม่มีไฟล์เวกเตอร์
- มีค่าใช้จ่ายหรือไม่?
- ไม่ ตัวแก้ไข, การตั้งค่าล่วงหน้าทุกประเภทของวัสดุ และการส่งออกใน PNG, GLB, OBJ, STL, USDZ และ MP4 เป็น 480p นั้นฟรีและไม่ต้องมีบัญชี การส่งออกฟรีจะมีลายน้ำเล็ก ๆ ของ 3dlogo.io Pro จะลบลายน้ำและเพิ่มภาพเป็น 2K และ 4K และวิดีโอเป็น 720p หรือ 1080p
