บทสอน SVG

 (svg-tutorial.com)
6 คะแนน โดย GN⁺ 2023-12-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นสื่อการเรียนรู้ SVG สำหรับวาดภาพเป็นโค้ดโดยตรงภายใน HTML ซึ่งสามารถเรียนตามได้เป็นลำดับตั้งแต่รูปทรงพื้นฐานไปจนถึงการโต้ตอบ
  • ลำดับการเรียนรู้เริ่มจากองค์ประกอบพื้นฐานอย่าง viewBox, polygon, polyline แล้วขยายไปสู่ path, เส้นโค้งเบเซียร์ และ arc
  • ส่วนของการแปลงครอบคลุมการหมุน การย้าย การนำกลับมาใช้ซ้ำ การสเกล และการแปลงทั่วไป ส่วน CSS จะเชื่อมไปถึงแอนิเมชัน การทำ hover แอนิเมชันตามเส้นทาง และ SVG แบบ inline ใน CSS
  • ในหัวข้อขั้นสูงจะครอบคลุมข้อความ clip-path และกราเดียนต์ พร้อมฝึกทำงานจริงด้วย JavaScript เช่น นาฬิกาที่แสดงเวลาจริง การโต้ตอบ ไดอะแกรมที่อิงข้อมูล และการแยกภาพออกเป็นหลายคอมโพเนนต์
  • ยังมีลิงก์ไปยังตัวแก้ไขสำหรับ line, circle, rect, polyline, polygon, text รวมถึง quadratic/cubic Bézier curve และ arc เพื่อให้ลองทดลองกับแต่ละองค์ประกอบได้ทันที

โครงสร้างของบทสอน

องค์ประกอบ SVG และ path segment สำหรับทดลอง

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

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

 
GN⁺ 2023-12-08
ความคิดเห็นจาก Hacker News

  • การจับคู่ SVG + React ยังถูกประเมินค่าต่ำเกินไป สามารถใช้ทั้งพลังและ abstraction ของ React ได้เหมือนเดิม ขณะเดียวกันก็เรนเดอร์กราฟิกตามต้องการแทน DOM ได้ และสำหรับงานบางประเภท เช่น การเรนเดอร์กราฟหรือชาร์ต ก็มองว่าดีกว่า Canvas มาก
    โดยเฉพาะเมื่อไม่ต้องการงานกราฟิกที่ซับซ้อนระดับจัดการทีละพิกเซล และมีแค่ปฏิสัมพันธ์เล็กน้อย ถ้าจะทำเอฟเฟ็กต์ hover บน Canvas ต้องคำนวณเองว่าเมาส์อยู่เหนือองค์ประกอบไหน ซึ่งค่อนข้างยุ่งยาก แต่ใน SVG ใช้ความสามารถที่มีมาให้ในตัวอย่าง onmouseover ได้เลย

    • เห็นด้วย การที่สามารถผูก click listener กับ SVG และจัดสไตล์ด้วย CSS ได้เหมือน HTML ปกติ บางทีก็ให้ความรู้สึกเหมือนเวทมนตร์ และ React / JSX ก็ทำให้ใช้งานสิ่งนี้ได้ง่าย
    • มีสื่อแนะนำเริ่มต้นดี ๆ สำหรับหัวข้อนี้ไหม? React เองก็ยังอยู่ระดับแทบจะมือใหม่ แต่คิดว่าน่าจะเป็นเรื่องที่ลองเจาะลึกแล้วสนุกมาก
      ถ้ามีตัวอย่างเดโมที่ช่วยชี้ทิศทางหรือให้แรงบันดาลใจได้ก็คงดี
    • เคยใช้ Preact.js และ SVG ทำคอมโพเนนต์สำหรับแบ่งส่วนภาพ + ติดแท็กฝั่งไคลเอนต์ แล้วออกมาดีมาก แนะนำสำหรับแอปประเภทนี้
    • ใช่เลย แม้ว่า HTML Canvas มักจะมีประสิทธิภาพดีกว่ามากในหลายกรณี แต่ถ้าไม่ได้จะสร้าง Figma ตัวถัดไป การทำงานด้วย SVG สะดวกกว่ามาก
    • กำลังเขียนโค้ดแพตเทิร์นสำหรับตัดด้วย GlowForge ด้วย React & SVG อยู่ และมันทำงานได้ดีมาก

  • โดยรวมเป็นสื่อที่ยอดเยี่ยม และตัวอย่างก็ชัดเจนมาก แต่อย่างหนึ่งคือโค้ดที่แนะนำในส่วน clip-path เขียนวงกลมใหญ่ซ้ำสองครั้ง ทำให้ถ้าจะเปลี่ยนขนาดวงกลมต้องแก้สองจุด
    ในเมื่อใช้ defs อยู่แล้ว ก็น่าจะดีกว่าถ้าเขียนในแบบที่นำ definition เดิมกลับมาใช้ซ้ำ

    • จริง ๆ ไม่ต้องมีองค์ประกอบที่สองด้วยซ้ำ แค่เรนเดอร์วงกลมตามปกติแล้วอ้างอิงมันภายใน clipPath ก็พอ
      ส่วนตัวแล้วอยากตัดการห่อด้วย <g> ออกด้วย ไม่เคยเข้าใจเหตุผลของการแนะนำโครงสร้างแบบนั้น และนอกจากกรณีที่พบได้น้อยมากซึ่งอยากใส่องค์ประกอบที่จะถูกเรนเดอร์ไว้ข้างนอก <defs> ก็ดูเหมือนไม่ได้อะไรเพิ่ม ในกรณีแบบ defs/circle ตามตัวอย่าง ปกติควรใช้ <symbol> มากกว่า
    • เห็นด้วย เป็นไอเดียที่ดี อาจเพิ่มโน้ตที่เกี่ยวข้องได้

  • เจ๋งมาก SVG เป็นฟอร์แมตที่สะอาดและยืดหยุ่น ซึ่งเกี่ยวข้องโดยตรงกับ side project ที่กำลังทำอยู่ เลยตั้งใจว่าจะใช้เวลาตามทำทูโทเรียลนี้ให้ครบ
    ก่อนหน้านี้ก็สนุกมากกับการทำคอมโพเนนต์ React ที่อิง SVG แบบที่คนอื่นพูดถึง React และ JSX ทำให้ใส่ปฏิสัมพันธ์ได้ง่าย และ SVG ก็ทำให้สร้าง UI ที่ทำด้วย HTML อย่างเดียวได้ไม่ง่าย
    เคยปล่อยคอมโพเนนต์ React สำหรับเรนเดอร์ Circle of Fifths แบบอินเทอร์แอ็กทีฟสำหรับ side project ด้านทฤษฎีดนตรี ยังมีอะไรต้องทำอีกมาก แต่ตอนนี้ใช้งานได้แล้ว: https://github.com/epiccoleman/react-circle-of-fifths
    และยังเคยเขียนบทความเกี่ยวกับการสร้าง Circle of Fifths ด้วย SVG โดยชอบช่วงคำอธิบายระหว่างทางที่พาไล่ตามกระบวนการวาดองค์ประกอบที่ซับซ้อนเป็นพิเศษ: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    ตอนนี้กำลังทำตัวสร้างไดอะแกรม fretboard ด้วยแนวทางคล้ายกันอยู่ และการกลับมาเปิดบทความเก่าเป็นข้อมูลอ้างอิงก็มีประโยชน์มาก ข้อดีของการเขียนบันทึกงานไว้คือสามารถ “เล่นซ้ำ” วิธีที่แก้ปัญหาได้

  • ชอบสื่อนี้มาก เคยทำ inline SVG ใน React อยู่ไม่กี่ตัวแล้วใส่ปฏิสัมพันธ์ลงไป สนุกกับการลองเล่นมันมาก
    โดยเฉพาะแท็ก <foreignObject> ที่มีประโยชน์มาก เพราะสามารถใส่ HTML ปกติลงไปใน SVG ได้ ทำให้จัดการเรื่องที่ HTML ถนัดกว่า เช่น ลิงก์ รูปภาพ หรือการจัดสไตล์ flexbox พื้นฐาน ภายในงานศิลป์ SVG ได้
    ขอเสริมให้ผู้เขียนนิดหนึ่งว่า ลิงก์บางอันในเว็บใช้ไม่ได้ ทั้ง bio.link ด้านล่างหน้า และลิงก์เดโมเส้นโค้ง Bézier แบบอินเทอร์แอ็กทีฟใน Day 11 “How to Draw Quadratic Bézier Curves with SVG” ก็ล่มอยู่

    • ลิงก์เดโมแบบอินเทอร์แอ็กทีฟแก้แล้ว คิดว่าอาจเป็นเพราะเว็บนั้นทำด้วย Vue เลยทำให้ deep link ทำงานได้ไม่ดีเสมอไป
      ส่วน bio.link ยังไม่เห็นว่ามีปัญหา อยากทราบว่าเจอ error แบบไหน
    • ลิงก์ “next example” ด้านล่างของหน้า https://svg-tutorial.com/svg/transform ก็ชี้ไปที่ /svg/path เลยขึ้น 404 และคิดว่าลิงก์ที่ถูกต้องน่าจะเป็น /svg/use
    • เหมือนจะมีอะไรพังอยู่ตลอด เดี๋ยวจะไปเช็ก
      foreignObject นี่ฉันก็ไม่รู้จักมาก่อน เห็นแล้วดีมากจริง ๆ

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

    • ไม่เคยคิดถึงวิธีนั้นเลย เป็นทิปที่เจ๋งมากและวันหนึ่งคงช่วยประหยัดเวลาได้เยอะ
    • น่าสนใจ แต่ช่วยอธิบายเพิ่มหน่อยได้ไหมว่า “เดินข้ามโถงไปเพื่อเอา hex code ของอีกสี” หมายถึงอะไร?

  • ยอดเยี่ยมมาก โดยเฉพาะตัวอย่าง เส้นโค้ง และ clipping ที่ยังเป็นเรื่องยากสำหรับฉันอยู่
    โดยส่วนตัวชอบ path เพราะแทบจะทำได้ทุกอย่างและใช้คำน้อยกว่าวิธีอื่น
    เรียนรู้มันมานานแล้วแต่ก็ยังรู้สึกว่ายังมีอะไรให้เรียนอีกมาก ฉันวาดรูปไม่เก่งเอามาก ๆ และก็ไม่ได้ชอบรูปภาพเท่าไรนัก เลยทำ side project ทั้งอันด้วย SVG เพราะความสะดวกและประสิทธิภาพ
    พอเห็นสื่อนี้วันนี้แล้วรู้สึกว่าน่าจะต้องรีแฟกเตอร์เยอะพอสมควร: https://eddiots.com/1

    • ดีใจที่มันมีประโยชน์ การ์ตูนก็ดีมาก

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

  • ดีมากเลย ตอนนี้ปัญหาที่ผมกำลังสู้ด้วยคือข้อความ + รูปภาพ เลยอยากได้ตัวอย่างที่เกี่ยวข้องสักหนึ่งหรือสองอัน
    เรื่องการจัดแนวนี่ปวดหัวจริง ๆ ลองใช้ Inkscape แล้วเหมือนกัน แต่ถ้าจะทำสิ่งที่ต้องการได้จริง ๆ ก็ดูจะใกล้เคียงกับการ “เขียน XML เองโดยตรง” มากกว่า

    • ผมยังไม่ได้ลองกับข้อความมากนัก นอกจากตัวอย่างที่ให้ข้อความวิ่งตามเส้น
      ผมรู้จัก text-anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      แล้วก็มีคนแนะนำว่าแท็ก foreignObject อาจมีประโยชน์ในที่นี้: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • เรื่องข้อความนี่จุกจิกแน่นอน ผมรีบเขียนโค้ด Python ด้วย svgwrite เพื่อสร้างตารางขึ้นมา แล้วการวางข้อความให้ตรงตำแหน่งที่ต้องการนี่เหมือนนรกเลย
      สุดท้ายก็ลงเอยด้วยการปรับค่าหลายอย่างแบบคร่าว ๆ แล้วบอกตัวเองว่า “แค่นี้ก็พอแล้ว”
      เห็นด้วยกับคำขอที่อยากได้ตัวอย่างการจัดวางข้อความที่ไม่ใช่เรื่องพื้น ๆ
      [0] ลิงก์ GitHub อยู่ในโปรไฟล์
    • ฟีเจอร์จัดแนวของ Inkscape ใช้ได้ดีกับผม ถ้าต้องการความแม่นยำมากขึ้นก็จะกด ctrl+shift+x แล้วกรอกพิกัดเองโดยตรง
      ตัวแก้ไข XML ของ Inkscape เด้งปิดค่อนข้างบ่อยในสภาพแวดล้อมของผม แต่ถ้าจำได้ว่าให้เซฟทุกครั้งก่อนแก้ก็ยังพอใช้งานได้

  • ปกติเขาทำกันยังไง? คนส่วนใหญ่เขียน SVG เอง หรือว่าวาดใน Figma อะไรทำนองนั้นก่อนแล้วค่อยสร้างไฟล์ SVG?

    • ผมเรียนมาทางกราฟิกดีไซน์ เลยปกติจะวาดตรง ๆ ใน Inkscape หรือไม่ก็นำเข้าจากโปรแกรมอื่น
      ต้องทำงานพอสมควรเพื่อให้ขนาดไฟล์จาก http://shapeoko.github.io/Docs/ ลดลงมาอยู่ในระดับที่สมเหตุสมผล
      ต่อมาผมยังทำกลไกที่คลิกภาพแล้วเปิดในหน้าต่างใหม่ได้ด้วย: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      แล้วก็ทำให้คลิกชื่อชิ้นส่วนในรายการอะไหล่แล้วชิ้นส่วนนั้นถูกไฮไลต์ในไดอะแกรมได้ด้วย
    • คนสายดีไซน์ก็คงใช้ตัวแก้ไขที่ถนัดอย่าง Illustrator, Sketch หรือ Inkscape ส่วนคนเขียนโค้ดก็อาจแก้ด้วยซอฟต์แวร์พวกนั้นได้นิดหน่อย แต่ถ้ามีปฏิสัมพันธ์เข้ามาเกี่ยวข้องก็มักจะแก้ SVG โดยตรง
      ถ้าเป็นรูปทรงซับซ้อนหรือเส้นโค้ง บางครั้งผมจะเอาไปใส่ในตัวแก้ไขออนไลน์เพื่อดูภาพ และเครื่องมือนี้ดีมาก: https://yqnn.github.io/svg-path-editor/
    • ถ้าเป็นกราฟิกที่ซับซ้อนกว่านี้ ก็น่าจะยังเหมาะกับการใช้เครื่องมือของนักออกแบบมากกว่า แต่ถ้าเป็นกราฟิกง่าย ๆ ก็เขียนเองได้
      ถ้าต้องการลูกศรหรือไอคอนเมนูแฮมเบอร์เกอร์ ก็เขียนโค้ดได้เลย บางทีก็เริ่มจากกระดาษกับปากกา แล้วค่อย ๆ ปรับพิกัดจนกว่าจะดูดีพอ
    • เมื่อมีโมเดลเวกเตอร์แบบทรานส์ฟอร์เมอร์รุ่นใหม่อย่างของ Adobe การสร้าง SVG ก็น่าจะง่ายกว่าที่เคยเป็นมา: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • ในโปรเจกต์ที่ผมทำ ผมจะสร้างหรือแก้ไฟล์ด้วย Inkscape แล้วลิงก์มันเหมือนเป็นรูปภาพทั่วไป
      บางครั้งก็เคยฝังไว้ในหน้าเพราะหน้าสแตติกบางหน้าต้องการกราฟิกเฉพาะตัว แต่กราฟิกในกรณีนั้นก็ไม่ได้ซับซ้อนมาก

  • หนึ่งในสิ่งที่เพิ่งตระหนักได้ไม่นานคือ ในแอปพลิเคชัน React เราสามารถใส่แท็ก SVG แบบอินไลน์เหมือนเป็นแท็ก JSXได้
    ผมไม่แน่ใจว่านี่ถือเป็นการรองรับโดยตรงจริง ๆ หรือเป็นเพราะ Webpack จัดการให้ แต่ในบางกรณีความรู้สึกของการทำคอมโพเนนต์ SVG ที่มีลอจิกอยู่ข้างในมันดีมาก ตอนนี้ผมสามารถเปลี่ยนรูปร่าง สี หรือการตัดบางส่วนของ SVG ด้วยลอจิกฝั่ง React ได้

    • มันเหมาะถ้าเป็น SVG แบบง่าย ๆ หรือกรณีที่ต้องการแปลงหลายแบบ
      แต่ถ้าใส่โค้ด SVG แบบอินไลน์ เบราว์เซอร์จะไม่สามารถแคชรูปภาพได้ ถ้า SVG มีขนาดใหญ่หรือมีรูปแบบแปลงแค่ไม่กี่แบบ การมีเอนด์พอยต์แยกตามรูปแบบของภาพอาจจะดีกว่า
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • ใช่แล้ว ตั้งแต่ HTML5 เป็นต้นมา SVG ใส่แบบอินไลน์ได้เลย ไม่ต้องมี Webpack อะไร แค่ใส่ก็ทำงานแล้ว
      ตัวอย่างหนึ่งในทิวทอเรียลนี้ก็เป็นไดอะแกรมที่ขับเคลื่อนด้วยข้อมูลซึ่งสร้างจาก React การเอาสองอย่างนี้มารวมกันทำอะไรเจ๋ง ๆ ได้มากทีเดียว