การโต้ตอบแบบ SVG: วิธีสร้างกราฟิกที่น่าสนใจสำหรับเว็บ

SVG (Scalable Vector Graphics) เป็นรูปแบบภาพเวกเตอร์ที่มีความยืดหยุ่นสูงสำหรับนักออกแบบและนักพัฒนา ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีใช้การโต้ตอบแบบ SVG เพื่อสร้างกราฟิกที่น่าสนใจและโต้ตอบได้สำหรับเว็บ เราจะเริ่มด้วยการสร้างปุ่มง่ายๆ ใน Illustrator จากนั้นเราจะเพิ่มโค้ด SVG เพื่อให้ปุ่มเป็นแบบโต้ตอบ สุดท้าย เราจะเพิ่ม CSS เล็กน้อยเพื่อจัดรูปแบบปุ่มของเรา มาเริ่มกันเลย!

มาตรฐานเว็บดูเหมือนจะได้รับความสนใจใน Adobe Illustrator แต่ก็ยังมีบางจุดที่จำเป็นต้องปรับปรุง เนื่องจาก SVG เป็นไฟล์ข้อความ ข้อมูลใดๆ ในไฟล์จะถูกรวมไว้และจะทำให้รูปภาพที่ได้ขยายใหญ่ขึ้น สามารถลบ Stray Points, Unpainted Objects และ Text Paths เปล่าได้โดยใช้คำสั่ง 'Clean Up' วัตถุถูกจัดประเภทเป็นโหนด โหนดคือวัตถุที่ SVG (เช่น เส้น รูปหลายเหลี่ยม หรือกลุ่ม) อ้างถึง คลาส Node.js สามารถมีแอตทริบิวต์ได้หลากหลาย รวมถึง ID คลาส และสไตล์ ลักษณะโหนดคำนึงถึงแอตทริบิวต์เหล่านี้ เช่น การเติมและเส้นขีด

สิ่งที่ยากที่สุดในการเพิ่ม Classes ให้กับ โหนด Illustrator คือไม่มีวิธีที่ง่ายในการทำเช่นนั้น ชื่อของวัตถุที่สามารถสื่อข้อมูลหรือผ่านการแปลงเป็นสิ่งสำคัญ ดังที่เราเห็นในตัวอย่างก่อนหน้านี้ การตั้งชื่อเส้นทางด้วยหมายเลขหน่วยเป็นวิธีที่ง่ายที่สุดในการแปลงชื่อเหล่านี้เป็น SVG ID ในการออกแบบที่ต้องใช้หลายพาธ กลยุทธ์ที่ดีคือการจัดกลุ่มพาธตามชื่อ

การโต้ตอบ Svg คืออะไร?

การโต้ตอบ SVG หมายถึงความสามารถในการควบคุมองค์ประกอบภายใน ภาพ SVG ผ่านการเขียนสคริปต์ (ปกติคือ JavaScript) ซึ่งอาจรวมถึงสิ่งต่างๆ เช่น การเปลี่ยนสีขององค์ประกอบเมื่อวางเมาส์เหนือ หรือทำให้องค์ประกอบเคลื่อนไหวเมื่อคลิก

การใช้คุณลักษณะต่อไปนี้ใน SVG (ซึ่งสนับสนุนโดยล่ามของเรา) คุณสามารถสร้างเนื้อหาแบบโต้ตอบได้ แต่ละเหตุการณ์เหล่านี้เป็นการรวบรวมเหตุการณ์ นอกจากนี้ยังมีปัญหา SVGLoad เช่นเดียวกับปัญหา SVGError ในกรณีที่ไม่มีเหตุการณ์ที่มีคำนำหน้า จะมีการใช้เหตุการณ์ที่ไม่มีคำนำหน้า UI EVENTS และ HTML เป็นทั้งตัวอย่างนี้ การสัมมนาการวางแนวอุปกรณ์อาจเป็นที่สนใจของผู้ที่ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของอุปกรณ์ ต่อไปนี้เป็นประเภทเหตุการณ์ที่เกิดขึ้นเมื่อภาพเคลื่อนไหวเปลี่ยนแปลง

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

เส้นทางคลิปเป็นขอบเขตทางเรขาคณิต และคุณสามารถระบุจุดที่อยู่ภายในหรือภายนอกได้อย่างชัดเจน เหตุการณ์พอยน์เตอร์ยังคงต้องถูกบันทึกในพื้นที่ที่หน้ากากมีค่าเป็นศูนย์ เพื่อที่จะจับภาพองค์ประกอบด้วยมาสก์ ในกรณีต่อไปนี้ ต้องพิจารณาปัจจัยต่อไปนี้: เมื่อแปลง ส่วนย่อยของเอกสาร SVG ข้อมูลเมตาจะถูกแปลงเป็นรหัสบรรทัดเดียวที่เหมือนกันทั่วทั้งส่วนย่อยของเอกสาร ส่วนนี้อธิบายวิธีใช้โมเดลโฟกัสเดียวกันกับ HTML ในโฟกัสโดยใช้ SVG เมื่อเหตุการณ์แป้นพิมพ์เกิดขึ้น องค์ประกอบเฉพาะจะกลายเป็นเป้าหมายของเหตุการณ์แป้นพิมพ์ทั้งหมด การใช้:focus pseudo-class เพื่อระบุโฟกัสโดยตัวแทนผู้ใช้แบบโต้ตอบเป็นตัวอย่าง เมื่อผู้ใช้ป้อนข้อมูลลงในแป้นพิมพ์หรืออุปกรณ์อื่นที่ไม่ใช่อุปกรณ์ชี้ตำแหน่ง ตัวแทนผู้ใช้แบบโต้ตอบจะต้องระบุโฟกัสด้วยสายตา (โดยปกติจะมีโครงร่าง) ในเวลาที่โฟกัสเปลี่ยนไป

ตัวแทนผู้ใช้ควรถือว่าองค์ประกอบเป็นแอตทริบิวต์ที่โฟกัสได้สำหรับองค์ประกอบเนื้อหาตามแอตทริบิวต์ที่โฟกัสได้ของ Tiny 1.2 AccessKey เป็นส่วนประกอบของ HTML ที่ไม่มีอยู่ในองค์ประกอบ SVG ในฐานะแอตทริบิวต์ของเหตุการณ์ SVG รองรับการใช้เหตุการณ์ทุกประเภทที่ User Agent รองรับ เอกสารที่มีอินไลน์ HTML และ SVG ในโฟกัสจะได้รับการจัดการโดยรวม (โดยโฟกัสจะรวมกันที่ปลายแต่ละด้าน) ในการตอบสนองต่อเหตุการณ์ แอตทริบิวต์ของเหตุการณ์จะถูกใช้เพื่อกำหนดฟังก์ชันที่จะเรียกใช้ องค์ประกอบแอนิเมชัน แต่ละรายการสามารถมีชุดแอ็ตทริบิวต์เหตุการณ์แอนิเมชันของตนเองได้ องค์ประกอบของสคริปต์ต้องได้รับการตรวจสอบโดยตัวแทนผู้ใช้ก่อนที่จะดำเนินการ

Svg: ทำให้เว็บไซต์ของคุณโต้ตอบได้

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

ฉันจะใช้ไฟล์ Svg ใน Illustrator ได้อย่างไร

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

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

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

Svg กับ รูปแบบภาพอื่น ๆ

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

คุณสร้างลิงก์ที่คลิกได้ใน Illustrator ได้อย่างไร

ใช้กรอบวางลิงก์ไปยังรูปภาพในส่วนของรูปภาพที่คุณต้องการเพิ่มลิงก์ เลือกแก้ไขตัวเลือกสไลซ์จากเมนูคลิกขวาของสไลซ์ที่เพิ่งแทรก ใส่ URL ของคุณในช่องที่ปรากฏหลังจากเลือกลิงก์ของคุณในกล่องโต้ตอบต่อไปนี้ หากคุณต้องการเปิดลิงก์ในหน้าต่างใหม่ ให้ป้อน -blank ลงในช่องข้อความ Target

ฉันจะสร้างลิงก์ให้คลิกได้โดยใช้โปรแกรมวาดภาพประกอบได้อย่างไร การทำลิงค์ให้คลิกได้นั้นมีหลากหลายวิธี ในการเข้าถึงเมนูวัตถุ ให้เลือกลิงก์จากรายการตัวเลือก เครื่องมือลิงก์สามารถใช้เพื่อเชื่อมโยงรูปภาพไปยัง URL Photoshop มีตัวเลือกบางอย่างสำหรับการเพิ่ม JPEG ลงในเอกสาร วัตถุสามารถฝังลงในเอกสารอื่นโดยใช้ Illustrator ในขณะที่การเชื่อมโยงระหว่างวัตถุสามารถทำได้โดยใช้ Illustrator คุณต้องสร้างลิงก์ใน Indesign ก่อนโดยใช้ขั้นตอนด้านล่าง

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

เมื่อเหตุการณ์เกิดขึ้น จะใช้วิธีที่เรียกว่า addEventListener() ชื่อเหตุการณ์เป็นตัวแปรแรก ตามด้วยฟังก์ชันการโทรกลับ เพื่อจุดประสงค์นี้ ชื่อเหตุการณ์จะถูกคลิก HandleClicked เป็นตัวแปรฟังก์ชันการโทรกลับที่ถูกกำหนดแบบไดนามิก ในการระบุว่าเหตุการณ์เป็นเหตุการณ์การคลิกหรือไม่ ฟังก์ชัน handleClicked จะตรวจสอบว่าเหตุการณ์นั้นเป็นเหตุการณ์การคลิกหรือไม่ หากใช่ ให้ตั้งค่าตัวแปรรหัสเหตุการณ์เป็นตัวระบุของเหตุการณ์ ในบรรทัดต่อไปนี้ ตัวแปร id ใช้เพื่อเข้าถึงองค์ประกอบ thediv ที่เชื่อมโยงกับเหตุการณ์การคลิก
หลังจากนั้น ตัวแปรสไตล์ถูกกำหนดให้กับคุณสมบัติสไตล์ขององค์ประกอบ thediv ซึ่งจะเข้าถึงได้ สไตล์เป็นคุณสมบัติขององค์ประกอบ thediv ที่ใช้ในการกำหนดสไตล์ขององค์ประกอบ thediv คุณสมบัตินี้ถูกตั้งค่าเป็น border:0px สีดำทึบ ในกรณีนี้ ในการตั้งค่าตัวแปรเส้นขอบเป็นตัวแปรสไตล์ จะต้องตั้งค่าของตัวแปรเส้นขอบ จากนั้น ค่าของตัวแปร border จะถูกใช้เพื่อตั้งค่าคุณสมบัติ border ขององค์ประกอบ div เป็นค่าของมันในบรรทัดโค้ดต่อไปนี้ คุณสมบัติ border ใช้เพื่อกำหนดเส้นขอบขององค์ประกอบ thediv หลังจากนั้นเอกสารจะปล่อยให้องค์ประกอบ thediv นั้นถูกต้อง องค์ประกอบ Thediv จะถูกลบออกจากเอกสาร

Svg เป็นอิลลัสเตรเตอร์

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

รูปแบบกราฟิกแบบเวกเตอร์สามารถใช้คำอธิบายของวัตถุและเส้นทางตามข้อความได้ ในการนำเข้า SVG ไปยัง Illustrator คุณต้องเปิดไฟล์ก่อน ในทำนองเดียวกัน คุณสามารถใช้แป้นพิมพ์ลัด Ctrl I (Mac) หรือ Cmd I (Windows) เมื่อคุณคลิก กล่องโต้ตอบแปลงเป็นกราฟิกแบบเวกเตอร์ คุณต้องระบุพารามิเตอร์ต่อไปนี้: ขนาดของกราฟิกคือสิ่งที่มันเป็น การหมุนคือการเคลื่อนที่ของภาพ ในตัวเลือกการหมุน สามารถระบุองศาหรือพิกเซลได้ สำหรับไฟล์ โปรดค้นหาชื่อไฟล์ ชื่อไฟล์ที่จะใช้ในการแปลงไฟล์ .svg เป็นไฟล์ a.ai

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

ปลั๊กอินนำเข้า Adobe Svg

ด้วย ปลั๊กอินนำเข้า SVG คุณสามารถนำเข้าและส่งออกไฟล์ SVG ได้ง่ายขึ้นหากคุณใช้ Adobe Illustrator CS6 หรือใหม่กว่า