วิธีอ่านไฟล์ Svg ใน Javascript

ด้วยการเปิดตัว HTML5 กราฟิกแบบเวกเตอร์ ที่ปรับขนาดได้ (SVG) ได้กลายเป็นรูปแบบมาตรฐานสำหรับกราฟิกแบบเวกเตอร์บนเว็บ ภาพ SVG สามารถสร้างและแก้ไขได้ด้วยโปรแกรมแก้ไขข้อความใดๆ แต่มักจะสะดวกกว่าหากสร้างด้วยซอฟต์แวร์วาดภาพ เช่น Inkscape JavaScript สามารถใช้เพื่อรวมภาพ SVG ในเอกสาร HTML ได้หลายวิธี: เป็นองค์ประกอบแบบอินไลน์ เป็นวัตถุ เป็น iframe เป็นฝัง ในบทความนี้เราจะพิจารณาสองวิธีแรก แบบอินไลน์และวัตถุ อินไลน์ วิธีที่ง่ายที่สุดในการรวมภาพ SVG ในเอกสาร HTML คือการใช้องค์ประกอบ องค์ประกอบนี้เป็นคอนเทนเนอร์สำหรับกราฟิก SVG องค์ประกอบมีแอตทริบิวต์หลายอย่างที่ควบคุมขนาดและตำแหน่งของรูปภาพ คุณลักษณะความกว้างและความสูงกำหนดความกว้างและความสูงของภาพ SVG แอตทริบิวต์ viewBox กำหนดระบบพิกัดของภาพ SVG แอตทริบิวต์ preservAspectRatio กำหนดวิธีปรับขนาดภาพหากไม่ได้ตั้งค่าแอตทริบิวต์ความกว้างและความสูง องค์ประกอบยังสามารถมีองค์ประกอบย่อยที่กำหนดเนื้อหาของภาพ วัตถุ อีกวิธีหนึ่งในการรวมภาพ SVG ในเอกสาร HTML คือการใช้องค์ประกอบ องค์ประกอบนี้เป็นองค์ประกอบคอนเทนเนอร์วัตถุประสงค์ทั่วไป สามารถมีเนื้อหาประเภทใดก็ได้ รวมถึงองค์ประกอบอื่นๆ องค์ประกอบมีสองแอตทริบิวต์ที่ควบคุมการแสดงภาพ แอตทริบิวต์ข้อมูลระบุ URL ของภาพ SVG แอตทริบิวต์ type ระบุประเภท MIME ของรูปภาพ ประเภท MIME สำหรับภาพ SVG คือ image/svg+xml หากองค์ประกอบมีแอตทริบิวต์ความกว้างและความสูง รูปภาพ SVG จะแสดงในขนาดดังกล่าว หากองค์ประกอบไม่มีแอตทริบิวต์ความกว้างและความสูง รูปภาพ SVG จะแสดงในขนาดปกติ องค์ประกอบยังสามารถมีองค์ประกอบย่อยที่กำหนดเนื้อหาทางเลือก เนื้อหานี้จะแสดงหากเบราว์เซอร์ไม่รองรับ SVG หรือหากไม่สามารถโหลดรูปภาพได้ Iframe อีกวิธีหนึ่งในการรวมภาพ SVG ในเอกสาร HTML คือการใช้องค์ประกอบ องค์ประกอบนี้เป็นองค์ประกอบคอนเทนเนอร์วัตถุประสงค์ทั่วไป เดอะ

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

หน้านี้อัปเดตล่าสุดเมื่อวันที่ 24 พฤศจิกายน 2021 เว็บเบราว์เซอร์หลักๆ ทั้งหมด รวมถึง Internet Explorer รองรับการใช้ Scalable Vector Graphics (SVG) มีซอฟต์แวร์แก้ไขรูปภาพหลายตัวที่รองรับรูปแบบดั้งเดิมของ SVG รวมถึง Inkscape ซึ่งใช้รูปแบบนี้

คุณสามารถใช้ Svg ใน Javascript ได้ไหม

HTML, CSS และ JavaScript ทั้งหมดมีอยู่ใน SVG

HTML และ SVG สามารถแสดงโดยใช้ Document Object Model (DOM) ได้เช่นกัน เป็นผลให้สามารถจัดการได้อย่างง่ายดายโดยใช้ JavaScript บทเรียนนี้จะแนะนำวิธีการใช้ SVG ทั้งแบบอินไลน์และภายนอก ตัวอย่างโค้ดที่ตามมาสามารถดูได้ที่ด้านบนของหน้านี้ ทั้งหมดสามารถพบได้บน GitHub หากคุณกำลังสร้าง SVG ภายนอก ไม่ว่าคุณจะใช้โค้ดเดียวกันสำหรับองค์ประกอบและ SVG ก็ไม่ต่างกัน เหตุผลในการทำเช่นนั้นคือ SVG มองไม่เห็น SVG อื่น ๆ บนหน้า เนื่องจากไม่สามารถเข้าถึงเอกสาร HTML ที่ฝังอยู่ในนั้น หลังจากรวมโค้ด JS กับ CDATA แล้ว การแยกวิเคราะห์ XML จะถือว่าเป็นส่วนหนึ่งของ XML

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

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

ฉันจะดู Svg ใน Html ได้อย่างไร

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

Scalable Vector Graphics (SVG) เป็นกราฟิกประเภทหนึ่ง กราฟิกที่ใช้ Extensible Markup Language (XML) เป็นกราฟิกแบบแรกที่ใช้รูปแบบนี้เป็นรูปแบบภาพ CSS และ HTML สามารถใช้ภาพ SVG ได้หลายวิธี เราจะพูดถึงหกวิธีที่แตกต่างกันในบทช่วยสอนนี้ นี่คือตัวอย่างภาพพื้นหลัง CSS โดยใช้ไฟล์ sva แท็ก img ใช้เพื่อแทรกรูปภาพลงในเอกสาร HTML ในลักษณะเดียวกับแท็ก <img> ใช้เพื่อแทรกรูปภาพลงในเอกสาร HTML ครั้งนี้เราใช้ CSS แทน HTML และทำการปรับแต่งเพิ่มเติม

คุณสามารถใช้องค์ประกอบ HTML เช่นเดียวกับ HTML คุณสามารถใช้ตัวเลือก >object> รวมถึงตัวเลือกอื่นๆ ที่คล้ายกันในเบราว์เซอร์ทั้งหมดที่รองรับ Scalable Vector Graphics (SVG) อีกวิธีหนึ่งในการใช้รูปภาพใน HTML และ CSS คือการใช้องค์ประกอบ HTML > embed> ซึ่งใช้ไวยากรณ์ HTML: <embed src=happy.svg> / เบราว์เซอร์สมัยใหม่ส่วนใหญ่ไม่รองรับปลั๊กอินของเบราว์เซอร์ ซึ่งเป็นเหตุผลว่าทำไมการใช้คำสั่ง <embed> จึงไม่ใช่ความคิดที่ดี

เมื่อใช้แท็ก svg> /svg> ภาพ SVG สามารถแทรกลงในเอกสาร HTML ได้โดยตรง คุณใช้วิธีนี้ได้โดยเปิดรูปภาพ SVG ในโค้ด VS หรือ IDE ที่คุณต้องการ คัดลอกโค้ดแล้ววางลงในองค์ประกอบเนื้อหาในเอกสาร HTML ของคุณ หากตรงตามข้อกำหนดทั้งหมดของคุณ คุณควรมีหน้าเว็บที่มีลักษณะเหมือนกับที่แสดงที่นี่ทุกประการ หากคุณพยายามใช้ SVG เช่น *img src=”image.svg” หรือเป็นภาพพื้นหลัง CSS เบราว์เซอร์ของคุณอาจไม่แสดงไฟล์เนื่องจากเซิร์ฟเวอร์อาจแสดงไฟล์ด้วย URL หรือคำอธิบายที่ไม่ถูกต้อง หากต้องการตรวจสอบว่าภาพ SVG ของคุณแสดงอย่างถูกต้องหรือไม่ ให้เปิดเว็บเบราว์เซอร์และไปที่เว็บนั้น หากเนื้อหาปรากฏอย่างถูกต้องในเว็บเบราว์เซอร์ของคุณ เป็นไปได้มากว่าเนื้อหานั้นจะให้บริการโดยเซิร์ฟเวอร์ของคุณตามประเภทเนื้อหา เมื่อเว็บเบราว์เซอร์ไม่แสดงรูปภาพที่เหมาะสม เซิร์ฟเวอร์ของคุณอาจไม่ให้บริการประเภทเนื้อหาที่เหมาะสมแก่ผู้เข้าชมของคุณ ในกรณีนี้ คุณสามารถลองเปลี่ยนประเภทเนื้อหาของไฟล์เป็น image/ svg XML หรือ image/x-svg

รูปภาพ Svg: วิธีใช้บนหน้าเว็บของคุณ

เพียงป้อน แท็ก svg /svg> ลงในเอกสาร HTML ของคุณเพื่อเขียนรูปภาพ คุณสามารถทำได้โดยเปิดไฟล์ SVG ในโค้ด VS ของคุณหรือ IDE อื่น แล้วคัดลอกโค้ดและวางลงในเนื้อหา หากทุกอย่างเป็นไปตามแผน หน้าในตารางด้านล่างควรมีลักษณะเหมือนกับในรูปภาพด้านล่างทุกประการ หากคุณใช้ SVG เช่น img src=image.svg> หรือเป็นภาพพื้นหลัง CSS และไฟล์เชื่อมโยงอย่างถูกต้องและทุกอย่างถูกต้อง แต่เบราว์เซอร์ของคุณไม่แสดงภาพ แสดงว่าเซิร์ฟเวอร์ของคุณอาจให้บริการอยู่ ด้วย URL ที่ไม่ถูกต้อง ขณะนี้เบราว์เซอร์หลักรองรับความสามารถในการเปิดไฟล์ SVG ไม่ว่าคุณจะใช้ Mac หรือ Windows คุณสามารถดูไฟล์ได้โดยคลิกไฟล์ คุณจะสามารถเข้าถึงได้ในเบราว์เซอร์หลังจากดำเนินการแล้ว

ฉันจะดู Svgs ได้อย่างไร

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

รูปแบบ Vector Scalable Graphics (SVG) อธิบายว่าภาพสีจะปรากฏขึ้นโดยใช้ XML เป็นรูปแบบข้อความอย่างไร ตรงกันข้ามกับรูปแบบภาพ JPEG หรือ PNG วิธีนี้มีข้อได้เปรียบเหนือพวกเขา คุณสามารถลดขนาดไฟล์ SVG เพื่อให้ตรงกับความต้องการของคุณโดยไม่สูญเสียคุณภาพ เบราว์เซอร์สมัยใหม่ควรรองรับรูปแบบ Scalable Vector Graphics (SVG) ซึ่งใช้สำหรับการประมวลผลกราฟิก แม้ว่า Microsoft จะไม่ได้จัดเตรียมคุณลักษณะนี้เป็นค่าเริ่มต้น แต่คุณก็สามารถติดตั้งส่วนขยายฟรีได้ คุณสามารถดูตัวอย่างและขยายไฟล์ SVG ของคุณได้โดยคลิกที่บานหน้าต่างแสดงตัวอย่างหรือไอคอนไอคอนขนาดใหญ่ใน File Explorer สิ่งเดียวที่คุณต้องมีคือสี

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

เมื่อวันที่ 1 มกราคม พ.ศ. 2552 Adobe ได้ยุติการพัฒนาและสนับสนุน SVG Viewer ในอุตสาหกรรม SVG กำลังกลายเป็นมาตรฐานอย่างรวดเร็ว แม้ว่า Adobe จะไม่รองรับรูปแบบนี้ การแปลงไฟล์ SVG เป็นรูปแบบไฟล์ที่ใช้กันอย่างแพร่หลาย เช่น PNG หรือ JPG เป็นวิธีที่ยอดเยี่ยมในการทำให้ไฟล์ของคุณปลอดภัยและสามารถเข้าถึงได้

ทำไมคุณควรใช้ไฟล์ Svg

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