บทสอน SVG

 (svg-tutorial.com)
6 คะแนน โดย GN⁺ 2023-12-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

สรุปบทสอน SVG

  • เป็นบทสอน SVG ที่สร้างโดย Hunor Márton Borbély ซึ่งให้เรียนรู้การเขียนโค้ดภาพ SVG แบบเป็นขั้นตอน ตั้งแต่รูปทรงพื้นฐานไปจนถึงแอนิเมชันที่ซับซ้อน
  • ครอบคลุมหัวข้อที่หลากหลาย เช่น การวาดรูปทรงพื้นฐาน ต้นคริสต์มาส คุกกี้ขิง บ้าน รวมถึงแนะนำความสามารถต่าง ๆ ของ SVG เช่น clip path, gradient, เส้นโค้งเบซิเยร์ และการวาดข้อความตามเส้นทาง
  • นอกจากนี้ยังมีวิธีผสาน SVG เข้ากับเทคโนโลยีอื่น ๆ เช่น การวาดนาฬิกาด้วย JavaScript การเพิ่ม interaction ให้กับองค์ประกอบ SVG และการสร้างไดอะแกรม SVG ด้วย JavaScript

ความเห็นของ GN⁺

  • บทสอนนี้เป็นแหล่งข้อมูลที่ดีสำหรับวิศวกรซอฟต์แวร์ระดับเริ่มต้นในการเรียนรู้การเขียนภาพ SVG อย่างเป็นระบบ ตั้งแต่พื้นฐานไปจนถึงเทคนิคขั้นสูง
  • โดยเฉพาะอย่างยิ่ง มีตัวอย่างที่นำไปใช้ได้จริง เช่น วิธีสร้างนาฬิกาที่แสดงเวลาจริง หรือการเพิ่ม interaction ให้กับองค์ประกอบ SVG ซึ่งน่าจะมอบประสบการณ์การเรียนรู้ที่มีประโยชน์และน่าสนใจอย่างมากแก่ผู้เรียน
  • สำหรับผู้ที่ต้องการเรียนรู้ SVG บทสอนนี้น่าจะเป็นสื่อการเรียนรู้ที่น่าสนใจ ซึ่งช่วยขยายความเข้าใจด้านการออกแบบกราฟิกบนเว็บ และเพิ่มความสามารถในการใส่องค์ประกอบภาพที่มีเอกลักษณ์ลงในหน้าเว็บได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-12-08
ความคิดเห็นบน Hacker News
  • การผสาน SVG กับ React ยังถูกประเมินค่าต่ำเกินไป สามารถใช้ฟีเจอร์และ abstraction ทั้งหมดของ React ได้ และเรนเดอร์กราฟิกอะไรก็ได้แทน DOM ลองใช้สำหรับการเรนเดอร์กราฟและชาร์ตแล้วพบว่าในบางสถานการณ์มันเหนือกว่า Canvas อย่างมาก ตัวอย่างเช่น มีประโยชน์เมื่อจำเป็นต้องมีการโต้ตอบแบบง่าย ๆ แต่ไม่ต้องการกราฟิกซับซ้อนอย่างการจัดการระดับพิกเซล
  • SVG เป็นฟอร์แมตที่ยืดหยุ่น และคุ้มค่าที่จะใช้เวลาเรียนรู้ผ่านบทช่วยสอนที่เกี่ยวข้อง เมื่อใช้ SVG ร่วมกับคอมโพเนนต์ React ก็สามารถสร้าง UI ที่ยอดเยี่ยมซึ่งทำได้ยากด้วย HTML เพียงอย่างเดียว
  • เคยใช้คอมโพเนนต์ "Circle of Fifths" แบบอินเทอร์แอกทีฟที่สร้างด้วย React ในไซด์โปรเจ็กต์ด้านทฤษฎีดนตรี คอมโพเนนต์นั้นใช้งานได้จริง และบล็อกโพสต์เกี่ยวกับกระบวนการสร้าง Circle of Fifths ด้วย SVG ก็มีประโยชน์มาก
  • ในตัวอย่างการใช้ <clip-path> ของ SVG การนิยามวงกลมใหญ่ซ้ำสองครั้งนั้นไม่มีประสิทธิภาพ เพราะเวลาปรับขนาดต้องแก้ทั้งสองจุด ดังนั้นเมื่อใช้ defs อยู่แล้ว ควรนิยามวงกลมเพียงครั้งเดียวแล้วนำกลับมาใช้ซ้ำจะดีกว่า
  • การเขียน inline SVG ด้วย SVG และ React นั้นสนุก และการใช้แท็ก <foreignObject> ก็ทำให้ใช้ SVG ภายใน HTML ได้ จึงมีประโยชน์กับงานที่ HTML ทำได้ดีกว่า เช่น ลิงก์ รูปภาพ และการจัดสไตล์ flexbox พื้นฐาน
  • เมื่อหลายปีก่อน ตอนทำงานด้านอินเทอร์เฟซและใช้ SVG ได้ทำให้นักออกแบบประหลาดใจด้วยการแค่ค้นหาแล้วแทนที่โค้ดสีในไฟล์ SVG เพื่อทำ color scheme สองแบบ
  • ขอบคุณสำหรับฟีดแบ็กเชิงบวกเกี่ยวกับบทช่วยสอน และได้แก้ไขข้อผิดพลาดที่พบแล้ว ตอนนี้ยังคงปรับจูนรายละเอียดอยู่ และสงสัยว่ามีใครรู้ไหมว่าทำไมพรีวิวภาพขนาดย่อบน Twitter ถึงยังไม่ทำงาน
  • มีข้อบ่นเล็กน้อยเกี่ยวกับคำว่า SVG "แท็ก" ตอนเริ่มต้นกับ HTML ใหม่ ๆ เคยเรียกทุกอย่างว่า "แท็ก" แต่หลังจาก XHTML ปรากฏขึ้นก็เริ่มเรียกว่า "องค์ประกอบ" แม้ในใจยังคิดว่าเป็น "แท็ก" แต่ตอนนี้ก็พูดว่า "องค์ประกอบ"
  • ชอบตัวอย่างเกี่ยวกับเส้นโค้งและการคลิปเป็นพิเศษ ชอบ path เพราะมันทำได้แทบทุกอย่างและไม่เยิ่นเย้อเท่าวิธีอื่น วาดรูปไม่เก่งและไม่ชอบรูปภาพ จึงสร้างไซด์โปรเจ็กต์ทั้งหมดด้วย SVG เพื่อประสิทธิภาพและความสะดวก และบทช่วยสอนนี้ทำให้ตระหนักว่ายังมีหลายส่วนที่ควรรีแฟกเตอร์
  • อยากเห็นตัวอย่างที่ใช้ข้อความและรูปภาพร่วมกัน ตอนนี้กำลังต่อสู้กับปัญหานี้อยู่ และการจัดแนวนั้นเป็นเรื่องที่ยาก เคยลองใช้ Inkscape มาแล้ว แต่สุดท้ายก็เอนเอียงไปทางการเขียน XML เพื่อสร้างสิ่งที่ต้องการ
  • สงสัยว่าการเขียน SVG ด้วยมือโดยตรงเป็นแนวปฏิบัติทั่วไปหรือไม่ หรือโดยทั่วไปมักวาดใน Figma แล้วสร้างไฟล์ SVG ออกมามากกว่า