เครื่องมือสร้างรูปทรง SVG

เครื่องมือนี้คือ แอปพลิเคชันฟรีที่ให้คุณสร้างรูปทรง SVG เช่น คลื่นและ Blob (วงกลมแบบออร์แกนิก) ได้อย่างง่ายดายผ่านการใช้งานแถบเลื่อนที่ใช้งานง่าย คุณสามารถสร้าง "เส้นแบ่งแบบคลื่นระหว่างส่วนประกอบ" หรือ "รูปทรงแบบออร์แกนิกที่วางไว้ด้านหลังรูปภาพฮีโร่" — เทรนด์ที่กำลังเป็นที่นิยมในการออกแบบเว็บไซต์ในปัจจุบัน — ได้ทันทีโดยไม่ต้องพึ่งพาซอฟต์แวร์ออกแบบเฉพาะทาง

กราฟิกที่สร้างขึ้นจะถูกส่งออกเป็น "ข้อมูล SVG" ซึ่งมีน้ำหนักเบามากและยังคงคุณภาพของภาพได้แม้ในหน้าจอความละเอียดสูงโดยไม่เบลอ นอกจากนี้ ระบบยังสร้างโค้ดแบบอินไลน์สำหรับการฝังใน HTML โดยตรง โค้ด CSS เพื่อใช้เป็นภาพพื้นหลัง และคลาสยูทิลิตี้ของ Tailwind CSS ให้โดยอัตโนมัติ ช่วยเพิ่มประสิทธิภาพในการพัฒนา Frontend อย่างมาก

เนื่องจากกระบวนการสร้างกราฟิกทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ จึงมีความปลอดภัยแม้ในการทำงานในสภาพแวดล้อมที่มีข้อมูลเป็นความลับ และคุณมีอิสระที่จะใช้วัสดุนี้ทั้งเพื่อวัตถุประสงค์เชิงพาณิชย์และไม่ใช่เชิงพาณิชย์

SVG (Scalable Vector Graphics)

ข้อมูลภาพในรูปแบบเวกเตอร์ที่แสดงรูปภาพโดยใช้จุด เส้นตรง และสูตรทางคณิตศาสตร์ แตกต่างจาก JPEG หรือ PNG ตรงที่ภาพจะไม่แตกไม่ว่าคุณจะซูมมากแค่ไหน และมีขนาดไฟล์ที่เล็กมาก จึงเหมาะสำหรับการออกแบบเว็บไซต์

Blob

ในอุตสาหกรรมไอทีและการออกแบบ หมายถึง "รูปร่างอ่อนนุ่มคล้ายอะมีบา" นี่เป็นองค์ประกอบการออกแบบที่ได้รับความนิยมอย่างมากในระยะหลังเพื่อใช้เป็นส่วนพื้นหลังของเว็บไซต์ หรือมาสก์การตัดภาพ (Clipping mask) สำหรับรูปภาพ

viewBox

แอตทริบิวต์ที่ระบุในแท็ก SVG ที่กำหนด "สัดส่วนและพิกัดของผืนผ้าใบ (Canvas)" ในการวาดรูปภาพ SVG การตั้งค่านี้อย่างเหมาะสม จะช่วยให้รูปภาพสามารถขยายหรือย่อขนาดให้พอดีกับความกว้างของคอนเทนเนอร์ได้อย่างยืดหยุ่นเมื่อฝังอยู่ใน HTML

Tailwind CSS

เฟรมเวิร์ก CSS แบบ Utility-first ที่ใช้สำหรับการจัดการสไตล์โดยการเขียนชื่อคลาสลงใน HTML โดยตรง เครื่องมือนี้สามารถส่งออกโค้ดในรูปแบบ `bg-[url('...')]` ของ Tailwind ได้โดยตรง ซึ่งจะตั้งค่ารูปภาพ SVG ที่แปลงเป็น Data URI เป็นรูปภาพพื้นหลัง

Perlin Noise

อัลกอริทึมที่สร้างตัวเลขสุ่มเทียมที่ดูเป็นธรรมชาติและราบรื่น ภายในเครื่องมือนี้ มีการประยุกต์ใช้อัลกอริทึมการสร้างสัญญาณรบกวนและการประมาณค่าที่คล้ายคลึงกันเพื่อคำนวณเส้นโค้งที่ราบรื่นและสวยงาม แม้จะถูกสุ่มขึ้นมา สำหรับทั้งคลื่นและ Blob

Q.ฉันควรใช้ PNG หรือ SVG?

สำหรับการออกแบบเว็บไซต์ ขอแนะนำให้ใช้ SVG เนื่องจากสามารถรักษาคุณภาพของภาพให้คมชัดได้ในทุกความละเอียดและมีขนาดไฟล์ที่เล็กมาก ในทางกลับกัน ให้ใช้ PNG สำหรับระบบที่ไม่อนุญาตให้อัปโหลด SVG โดยตรงหรือสำหรับรูปภาพ OGP โดยรูปภาพ PNG ที่ดาวน์โหลดจากเครื่องมือนี้จะถูกส่งออกด้วยความละเอียด 2 เท่า ซึ่งพร้อมสำหรับหน้าจอ Retina

Q.ฉันจะทำให้คลื่นปรับขนาดตามความกว้างของหน้าจอโดยอัตโนมัติได้อย่างไร?

เมื่อคุณใช้โค้ด SVG หรือ CSS ที่สร้างขึ้น คลื่นจะถูกออกแบบมาให้ตอบสนองโดยอัตโนมัติ (ปรับขนาดตามความกว้างของหน้าจอ) ตามค่าเริ่มต้น โดยภายใน SVG จะใช้การตั้งค่า `preserveAspectRatio="none"`

Q.ข้อมูลรูปทรงที่สร้างขึ้นจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ ข้อมูลจะไม่ได้ถูกส่งไปที่ใดเลย กระบวนการทั้งหมดตั้งแต่การสร้างรูปทรง การส่งออกโค้ด SVG ไปจนถึงการเรนเดอร์รูปภาพ PNG จะเสร็จสมบูรณ์ภายในเบราว์เซอร์ของคุณ (บนคอมพิวเตอร์หรือสมาร์ทโฟน) คุณสามารถใช้งานได้อย่างปลอดภัย

Q.ฉันสามารถใช้รูปทรงที่สร้างขึ้นเพื่อวัตถุประสงค์เชิงพาณิชย์ได้หรือไม่?

ได้ คุณสามารถใช้รูปทรง SVG และรูปภาพ PNG ที่สร้างจากเครื่องมือนี้สำหรับวัตถุประสงค์เชิงพาณิชย์และไม่ใช่เชิงพาณิชย์ได้ฟรี โดยไม่จำเป็นต้องให้เครดิต

Q.ฉันจะใช้ SVG ที่สร้างขึ้นใน CMS เช่น WordPress ได้อย่างไร?

คุณสามารถใช้ปลั๊กอินที่อนุญาตให้อัปโหลดรูปภาพ SVG ลงในคลังสื่อโดยตรง หรือวางโค้ด 'อินไลน์ (Inline)' หรือ 'CSS' จากเครื่องมือนี้ลงในหน้าจอตัวแก้ไข HTML/CSS ของคุณโดยตรงได้

รูปทรง SVG ที่สร้างขึ้นสามารถนำไปใช้ในสถานการณ์การออกแบบเว็บไซต์ต่างๆ ได้หลากหลาย ด้านล่างนี้คือกรณีการใช้งานที่พบบ่อย