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

การทำงานกับไฟล์ SVG

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

คำอธิบายทั่วไปของส่วนขยาย

ประเภทไฟล์ SVG ย่อมาจาก Scalable Vector Graphics ซึ่งก็คือกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ ภาษามาร์กอัป VML และ PGML ใช้เพื่ออธิบายรูปภาพ โดยพื้นฐานแล้วนี่คือ เอกสารข้อความซึ่งในแต่ละรูปจะมีการอธิบายพิกัดของจุดยอดและเส้นที่ผ่านไปตลอดจนสีขององค์ประกอบที่แตกต่างกัน เวอร์ชันแรกของรูปแบบนี้เปิดตัวในปี 2544 และเวอร์ชันที่สองกำลังได้รับการพัฒนาอย่างแข็งขัน นั่นคือมีแนวโน้มและพัฒนา ข้อดีประการหนึ่งคือขนาดไฟล์เล็กซึ่งสามารถบันทึกภาพวาดที่ค่อนข้างซับซ้อนได้ ดังนั้นในปัจจุบันมีการใช้ไอคอน รูปสัญลักษณ์ โลโก้ และองค์ประกอบอื่นๆ ของเว็บไซต์มากขึ้นเรื่อยๆ ในรูปแบบนี้ ไม่ใช่ในรูปแบบแรสเตอร์ ทำให้ไซต์โหลดเร็วขึ้น คุณลักษณะเฉพาะของรูปแบบ SVG ได้แก่ การโต้ตอบและภาพเคลื่อนไหว ส่วนแรกอนุญาตให้รูปภาพตอบสนองต่อการกระทำของผู้ใช้ เช่น การคลิกเมาส์หรือการย้ายองค์ประกอบบางอย่าง แอนิเมชันช่วยให้คุณสร้างสถานการณ์ที่ค่อนข้างซับซ้อนได้ เมื่อรวมเข้าด้วยกันแล้ว คุณสามารถสร้างองค์ประกอบกราฟิกที่สวยงามและมีชีวิตชีวาสำหรับเว็บไซต์ได้ สามารถฝังลงในภาพแรสเตอร์ปกติในรูปแบบ PNG, jpg และรูปแบบอื่น ๆ ได้

นามสกุลไฟล์ .SVG

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

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

มีอะไรอีกที่อาจทำให้เกิดปัญหากับไฟล์ได้?

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

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

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

แต่คำถามไม่เพียงเกี่ยวกับขนาดและคุณภาพเท่านั้น การพัฒนาการออกแบบสำหรับหน้าเว็บกลายเป็นเรื่องที่นักออกแบบต้องรู้จักเทคโนโลยีและผลิตภัณฑ์ซอฟต์แวร์ที่หลากหลาย เนื่องจากสำหรับประเภทที่แตกต่างกัน ข้อมูลกราฟิกคุณต้องใช้รูปแบบไฟล์ที่หลากหลายและเทคโนโลยีที่แตกต่างกันเพื่อสร้างมันขึ้นมา สำหรับกราฟิกแบบคงที่ จะใช้รูปแบบ GIF, JPG หรือ PNG ซึ่งสามารถสร้างได้ในแพ็คเกจกราฟิกที่หลากหลาย สำหรับวัตถุที่เป็นภาพเคลื่อนไหว จะใช้รูปแบบภาพเคลื่อนไหว GIF และ Flash และวัตถุดังกล่าวได้รับการพัฒนาในแอปพลิเคชันซอฟต์แวร์เฉพาะทาง (เฉพาะสำหรับรูปแบบแต่ละประเภทเหล่านี้) ตามกฎแล้วองค์ประกอบแบบโต้ตอบ (โรลโอเวอร์, ลิงก์ ImageMap ฯลฯ ) ถูกสร้างขึ้นในแอปพลิเคชันพิเศษและแสดงถึงชุดของภาพกราฟิกซึ่งเป็นการเชื่อมต่อที่สร้างขึ้นในไฟล์ที่มีรหัส HTML ที่ช่วยเสริมองค์ประกอบเหล่านั้น

วิธีแก้ปัญหาที่ประสบความสำเร็จสำหรับปัญหาเหล่านี้อาจเป็นการเปลี่ยนไปใช้รูปแบบกราฟิก SVG (Scalable Vector Graphics scalable vector graphics) ตามภาษา XML ซึ่งทำให้รูปภาพ SVG ใดๆ สามารถแสดงเป็นชุดได้ บรรทัดคำสั่ง(รูปที่ 1) และไฟล์ SVG เองก็สามารถเปิดได้ในโปรแกรมแก้ไขข้อความใด ๆ รวมถึง Notepad อันนี้ถ้าเทียบกัน เทคโนโลยีใหม่ได้รับการพัฒนาโดย Adobe สำหรับเว็บโดยเฉพาะ และปัจจุบันเป็นที่สนใจอย่างมากสำหรับอุปกรณ์พกพา โดยให้การสร้างสรรค์กราฟิกแบบคงที่ ภาพเคลื่อนไหว และแบบโต้ตอบคุณภาพสูง ดังนั้นจึงไม่น่าแปลกใจที่ได้รับการสนับสนุนอย่างแข็งขันจากสมาคม W3C (http://www.w3.org/Graphics/SVG) ในปี 2546 มาตรฐาน SVG 1.1 ได้รับการรับรองโดย W3C เป็นคำแนะนำ และ ช่วงเวลานี้ข้อมูลจำเพาะ SVG 1.2 กำลังได้รับการพัฒนา (http://www.w3.org/TR/SVG12/)

ด้วยภาพที่สอดคล้องกัน

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

ข้อดีและข้อเสียของการใช้รูปแบบ SVG

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

• รูปภาพคุณภาพสูงโดยไม่คำนึงถึงขนาด ซึ่งอธิบายโดยลักษณะเวกเตอร์ของรูปแบบ SVG ภาพสามารถย่อหรือขยายได้ไม่จำกัดโดยไม่สูญเสียคุณภาพ (รูปที่ 2) ตามขนาดการแสดงผล ซึ่งช่วยให้คุณได้รับ ภาพคุณภาพสูงข้อมูลกราฟิกบน หลากหลายชนิดอุปกรณ์ต่างๆ (เดสก์ท็อป พ็อกเก็ตคอมพิวเตอร์ ฯลฯ) และยังทำให้สามารถตรวจสอบรายละเอียดส่วนบุคคลได้อย่างละเอียดยิ่งขึ้น ซึ่งเป็นสิ่งสำคัญ เช่น เมื่อทำงานกับภาพวาดทางเทคนิค
• มาก ขนาดที่เล็กกว่าเมื่อเปรียบเทียบกับรูปแบบ GIF, JPG, PNG และภาพเคลื่อนไหว GIF และยิ่งกว่านั้นด้วยรูปแบบ Flash เช่น หากไฟล์ทดสอบสำหรับบทความ รูปแบบ GIFซึ่งบีบอัดในโหมดการบีบอัด LZW คือ 26 KB ขนาดของไฟล์ SVG ที่เกี่ยวข้องใช้ 1220 ไบต์ และเมื่อบีบอัดในรูปแบบ SVGZ จะมีขนาดเพียง 685 ไบต์

แต่ไม่ใช่แค่นั้นเท่านั้น เมื่อเปรียบเทียบกับตัวเลือกแบบดั้งเดิมสำหรับการแสดงเว็บแบบกราฟิก การใช้รูปแบบ SVG มีข้อดีอื่นๆ ที่ปฏิเสธไม่ได้อีกมากมาย

ดังนั้น สำหรับนักพัฒนา ข้อดีที่สำคัญคือ:

• ความสามารถในการรวมองค์ประกอบแบบคงที่ภาพเคลื่อนไหวและการโต้ตอบในรูปแบบเดียวตลอดจนการรวมกันของวัตถุเวกเตอร์และแรสเตอร์
• ปรับปรุงการจัดการข้อความ รวมถึงการจัดช่องไฟ ข้อความโค้ง และการใช้แบบอักษรไม่จำกัด
• การควบคุมความแม่นยำของสีที่มีประสิทธิภาพมากขึ้นและโอกาสในการใช้การไล่ระดับสีในภาพเว็บมากขึ้น ความละเอียดสูง, เงา, ฟิลเตอร์ ฯลฯ ;
• ลักษณะข้อความของรูปแบบ SVG และการรองรับสไตล์ชีตแบบเรียงซ้อนซึ่งช่วยให้กระบวนการอัปเดตเว็บไซต์ง่ายขึ้นอย่างมากและอนุญาตให้ทำการเปลี่ยนแปลงได้หากจำเป็นโดยไม่ต้องใช้วิธีใด โปรแกรมพิเศษ;
• บูรณาการกับฐานข้อมูลที่สร้างตามมาตรฐาน XML (Extensible Markup Language) และ CSS (Cascading Style Sheets) ซึ่งช่วยให้คุณสามารถบันทึกภาพ SVG ในฐานข้อมูลและสร้างโดยใช้ภาพเหล่านั้น หน้าเว็บแบบไดนามิกแตกต่างกันไปตามแพลตฟอร์ม การตั้งค่าส่วนบุคคล ฯลฯ
• ไม่มีปัญหาในการจัดทำดัชนี ไฟล์ SVG ได้รับการจัดทำดัชนีโดยเครื่องมือค้นหาใดๆ (ไม่เหมือนกับไฟล์ SWF เช่น)

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

อย่างไรก็ตาม ตามปกติแล้ว เทคโนโลยี SVG ก็มีข้อเสียและร้ายแรงมากเช่นกัน นอกเหนือจากข้อดีแล้ว

• ผู้ผลิตอินเทอร์เน็ตเบราว์เซอร์รองรับรูปภาพ SVG ไม่ดี ด้วยเหตุนี้ หากต้องการดูกราฟิก SVG จากเบราว์เซอร์ ผู้ใช้จะถูกบังคับให้ติดตั้งปลั๊กอินของบริษัทอื่นเพิ่มเติมที่มีความสามารถนี้ เช่น SVG Viewer จาก Adobe ตามทฤษฎีแล้ว นี่ไม่ใช่เรื่องยาก ปลั๊กอินที่เกี่ยวข้องนั้นติดตั้งง่าย ฟรี ขนาดเล็ก และสามารถดาวน์โหลดได้อย่างรวดเร็วจากอินเทอร์เน็ต ในทางปฏิบัติทุกอย่างมีความซับซ้อนมากขึ้นเนื่องจากผู้ใช้อินเทอร์เน็ตส่วนใหญ่ไม่ทราบว่ามีความสามารถเหล่านี้อยู่ดังนั้นจึงไม่สามารถดูได้ ประเภทนี้กราฟิกที่ไม่มีปลั๊กอินจะไม่สามารถมองเห็นได้ อย่างไรก็ตาม สถานการณ์กำลังค่อยๆ เปลี่ยนไป และในปีที่ผ่านมา นักพัฒนาเว็บเบราว์เซอร์ชั้นนำ 2 รายได้แนะนำการรองรับรูปแบบ SVG ในช่วงฤดูใบไม้ผลิ Opera Software ได้เปิดตัวเบราว์เซอร์ Opera เวอร์ชัน 8 ซึ่งรองรับ SVG 1.0 Tiny ในเวอร์ชันของ Opera 9.0 ที่ปรากฏในภายหลังเล็กน้อย มีการนำการรองรับบางส่วนสำหรับรูปแบบ SVG 1.0 Basic มาใช้ นักพัฒนารายที่สองที่รวมการรองรับ SVG คือ Mozilla Organisation โมดูลโปรเจ็กต์ Mozilla SVG ซึ่งให้การชมกราฟิก SVG ของข้อกำหนด 1.1 ถูกรวมอยู่ในเบราว์เซอร์ Firefox 1.5 นอกจากนี้ในกลางปี ​​​​2548 นักพัฒนาเบราว์เซอร์ Safari ที่ทำงานบนคอมพิวเตอร์ที่ใช้ Mac OS X ได้เริ่มทำงานอย่างแข็งขันเพื่อแนะนำการสนับสนุน SVG 1.1
• เมื่อเปรียบเทียบกับรูปแบบกราฟิกอื่นๆ รูปแบบ SVG ยังคงได้รับการสนับสนุนจากนักพัฒนาซอฟต์แวร์กราฟิกได้ไม่ดี แม้ว่าแพ็คเกจกราฟิกชั้นนำ เช่น Adobe Illustrator, Corel DRAW ฯลฯ จะช่วยให้คุณสามารถส่งออกกราฟิกไปยังไฟล์ SVG ได้ แน่นอนว่าไฟล์ SVG สามารถสร้างได้ในโปรแกรมแก้ไขข้อความใด ๆ แต่สิ่งนี้ไม่สามารถทำได้ในแง่ของความเร็วและต้นทุนในการพัฒนา สะดวกในการแก้ไขไฟล์ในโปรแกรมแก้ไขข้อความหากจำเป็น (ซึ่งเป็นไปได้ก็ต่อเมื่อคุณมีความรู้อย่างลึกซึ้งเกี่ยวกับเทคโนโลยี XML) แต่การสร้างไฟล์ตั้งแต่เริ่มต้นนั้นไม่ฉลาดเนื่องจากจะต้องใช้เวลาและความพยายามมากเกินไป ในการทำเช่นนี้ เราต้องการเครื่องมือที่ง่ายและสะดวกสำหรับการพัฒนากราฟิกอย่างรวดเร็วในรูปแบบ Scalable Vector Graphics พร้อมความสามารถในการแก้ไขโค้ดโปรแกรมที่สอดคล้องกับรูปภาพในสภาพแวดล้อมเดียวกัน แต่มีผลิตภัณฑ์ดังกล่าวน้อยมากและไม่ใช่ รู้จักกันดี

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

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

ปลั๊กอินสำหรับการดูกราฟิก SVG

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

มีตัวเลือกอื่นสำหรับการดูกราฟิก SVG ตัวอย่างเช่นคุณสามารถใช้โมดูลที่เกี่ยวข้องจาก Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/ ผ้าบาติก) แพ็คเกจ KDE KSVG (http://www.kde.org) ฯลฯ รายการแอปพลิเคชันทั้งหมดที่ให้การดูภาพ SVG มีให้ที่: http://wiki.svg.org/Viewer_Implementations

โปรแกรมดู Adobe SVG

ผู้พัฒนา:อะโดบี ซิสเต็มส์ อิงค์

ขนาดการกระจาย: 2.25 ลบ

วิธีการจัดจำหน่าย:ฟรีแวร์ (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)

ราคา:ฟรี

ทำงานภายใต้การควบคุม: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

การสนับสนุนเบราว์เซอร์: Internet Explorer 4.0 หรือสูงกว่า, Netscape Navigator หรือ Communicator 4.5 ถึง 4.78 (ยกเว้น 6.x)

โปรแกรมดู Corel SVG

ผู้พัฒนา:บริษัท คอเรล

ขนาดการกระจาย: 4.9 ลบ

วิธีการจัดจำหน่าย:ฟรีแวร์ (สามารถดาวน์โหลดโมดูลได้จาก: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)

ราคา:ฟรี

ทำงานภายใต้การควบคุม: Windows 98/NT/2000/ฉัน/XP

การสนับสนุนเบราว์เซอร์: Microsoft Internet Explorer 5.5 และสูงกว่า, Netscape Navigator หรือ Communicator เวอร์ชัน 4.79, 7.02

โปรแกรมสำหรับสร้างกราฟิก SVG

โปรแกรมทั้งหมดสำหรับการสร้างกราฟิก SVG สามารถแบ่งออกเป็นสามกลุ่มใหญ่ แพ็คเกจแรกประกอบด้วยแพ็คเกจกราฟิกสองมิติยอดนิยมที่เน้นการทำงานกับกราฟิกแบบเวกเตอร์และในขณะเดียวกันก็ให้คุณส่งออกรูปภาพเป็นรูปแบบ SVG ที่ได้รับความนิยมมากที่สุดคือ Adobe Illustrator และ CorelDRAW; นอกจากนี้การส่งออกไปยังระดับหนึ่งหรืออีกระดับหนึ่งยังรองรับแอปพลิเคชันอื่น ๆ อีกมากมาย: AutoCAD, Microsoft Visio เป็นต้น ข้อได้เปรียบหลักของแอปพลิเคชันกลุ่มนี้คือมีเครื่องมือขั้นสูงสำหรับการสร้างภาพเวกเตอร์และช่วยให้คุณได้รับเอฟเฟกต์พิเศษผ่านการใช้งาน ความโปร่งใส การเติมไล่ระดับสี ฟิลเตอร์ต่างๆ ฯลฯ แต่แอปพลิเคชันเหล่านี้จำเป็นต้องได้รับการฝึกอบรมพิเศษอย่างจริงจัง ดังนั้นจึงออกแบบมาสำหรับนักออกแบบมืออาชีพเป็นหลัก นอกจากนี้ โดยทั่วไปแล้วพวกเขาไม่ได้มุ่งเน้นไปที่การออกแบบ SVG (แม้ว่าจะอนุญาตให้คุณรับกราฟิกในรูปแบบ Scalable Vector Graphics) ในขณะที่ให้การสร้างภาพและการแสดงภาพที่สะดวกสบาย แต่แอปพลิเคชันเหล่านี้ไม่อนุญาตให้ปรับแต่งข้อความ ระดับที่เกี่ยวข้องกับกราฟิก SVG สิ่งสำคัญคือการสนับสนุนรูปแบบ Scalable Vector Graphics ไม่ได้ถูกนำมาใช้อย่างสมบูรณ์ ด้วยเหตุนี้องค์ประกอบภาพเวกเตอร์บางรายการจึงสามารถส่งออกไปยัง SVG ได้โดยไม่มีข้อผิดพลาด

ผลิตภัณฑ์ซอฟต์แวร์กลุ่มที่สองประกอบด้วยแพ็คเกจที่ออกแบบมาเพื่อการสร้างกราฟิก SVG โดยเฉพาะ มีความสามารถน้อยกว่ามากในแง่ของการพัฒนาภาพเวกเตอร์ แม้ว่าจะมีเครื่องมือที่จำเป็นทั้งหมดก็ตาม แต่มีเครื่องมือที่สะดวกสำหรับการแก้ไขซอร์สโค้ดและช่วยให้คุณสามารถทำงานกับออบเจ็กต์ SVG พร้อมกันทั้งในระดับสายตาและระดับโค้ด และคุณสามารถสลับระหว่างตัวเลือกเหล่านี้เพื่อนำเสนอข้อมูลได้อย่างง่ายดาย แอปพลิเคชันทั้งหมดจากกลุ่มนี้เรียบง่ายและเข้าถึงได้มาก และไม่ต้องใช้เวลาในการเรียนรู้มากนัก นอกจากนี้ยังมีการกระจายค่อนข้างน้อย (เมื่อเทียบกับแอปพลิเคชันของกลุ่มแรก) ดังนั้นจึงสามารถซื้อผ่านทางอินเทอร์เน็ตได้โดยไม่มีปัญหาใด ๆ อย่างไรก็ตามมีโปรแกรมน้อยมากที่มีความสามารถดังกล่าวและด้านล่างเราจะพิจารณารายละเอียดเพียงสี่โปรแกรมที่น่าสนใจที่สุดและออกแบบมาสำหรับผู้ใช้ประเภทต่างๆ กับ รายการทั้งหมดแอปพลิเคชั่นสำหรับสร้างกราฟิก SVG สามารถพบได้ที่: http://wiki.svg.org/Design_Tools

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

แอปพลิเคชั่นกราฟิกที่มีคุณสมบัติครบถ้วนที่ให้คุณสร้างกราฟิก SVG

อะโดบี อิลลัสเตรเตอร์ CS2

ผู้พัฒนา:อะโดบี ซิสเต็มส์ อิงค์

ขนาดการกระจาย: Macintosh เวอร์ชัน 428.9 MB, Windows เวอร์ชัน 398.6 MB

วิธีการจัดจำหน่าย:แชร์แวร์ (แพ็คเกจเวอร์ชันสาธิต 30 วันสามารถดูได้ที่: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

ราคา:$665

ทำงานภายใต้การควบคุม: Windows 2000 พร้อม Service Pack 3 หรือ Windows XP, Mac OS X เวอร์ชัน 10.2.4 ถึง 10.2.7, Java Runtime Environment 1.4.1

ตั้งแต่เวอร์ชัน 9 เป็นต้นไป Adobe Illustrator (รูปที่ 3) ได้ดำเนินการนำเข้าและส่งออกไฟล์ SVG และในระดับที่สูงกว่ามากเมื่อเทียบกับแอปพลิเคชันกราฟิกที่คล้ายกัน แพ็คเกจนี้รองรับข้อกำหนด SVG ที่มีอยู่ทั้งหมด, การเข้ารหัส ISO 8859-1, UTF-8 และ UTF-16, ตัวเลือกการส่งออกข้อความที่หลากหลาย และช่วยให้คุณสามารถส่งออกรูปภาพทั้งในรูปแบบ SVG ปกติและ SVGZ ที่บีบอัด

ในกราฟิก SVG ที่สร้างขึ้นในสภาพแวดล้อม คุณสามารถใช้การไล่ระดับสี ความโปร่งใส รวมถึงชุดเอฟเฟกต์ SVG ที่ออกแบบมาเป็นพิเศษทั้งหมด (เอฟเฟกต์=>ฟิลเตอร์ SVG) ในรูปแบบของเงา การเบลอ ฯลฯ ต่างๆ รูปภาพที่มีเอฟเฟกต์ดังกล่าวยังคงอยู่ ชัดเจนเมื่อดูในเว็บเบราว์เซอร์ที่มีการขยายขนาดใดๆ นอกจากกราฟิกแบบคงที่แล้ว Illustrator ยังช่วยให้คุณสร้างกราฟิกเชิงโต้ตอบในรูปแบบ SVG ได้ด้วย เพื่อจุดประสงค์นี้จึงมีการจัดจานสีการโต้ตอบ SVG พิเศษไว้ (สามารถเปิดได้จากเมนู Window=>การโต้ตอบ SVG) ซึ่งการดำเนินการสำหรับวัตถุเชิงโต้ตอบ มีการระบุ เป็นที่น่าสังเกตว่าการทำงานกับองค์ประกอบ SVG แบบโต้ตอบใน Illustrator ต้องใช้ความรู้เกี่ยวกับ Java Script และความเข้าใจในหลักการพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ นอกจากนี้ การใช้รูปแบบ Scalable Vector Graphics ในโปรแกรมนี้ คุณสามารถสร้างกราฟิกที่ขับเคลื่อนด้วยข้อมูลแบบไดนามิกได้

CorelDRAW กราฟิกสวีท 12

ผู้พัฒนา:บริษัท คอเรล

ขนาดการกระจายขนาด: 200 MB

วิธีการจัดจำหน่าย:แชร์แวร์ (สามารถดาวน์โหลดเวอร์ชันสาธิตได้จากเว็บไซต์ร้านค้าออนไลน์เช่นที่: http://allsoft.ru/Download.php?ver=17605)

ราคา:$290 (Allsoft.ru)

ทำงานภายใต้การควบคุม:วินโดว์ NT/2000/XP

แอปพลิเคชันที่รู้จักกันดีสำหรับการพัฒนากราฟิกเวกเตอร์ระดับมืออาชีพ CorelDRAW (รูปที่ 4) ซึ่งรวมอยู่ใน CorelDRAW Graphics Suite 12 ให้การนำเข้าและส่งออกในรูปแบบ SVG และ SVGZ ในระดับพื้นฐาน ดังนั้นจึงสามารถใช้เพื่อสร้างคงที่และโต้ตอบได้ กราฟิก SVG

เป็นไฟล์ SVG ใน CorelDRAW

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

มยุรา เสมอ 4.3

ผู้พัฒนา:มยุรา ซอฟต์แวร์

ขนาดการกระจาย: 1.3 ลบ

วิธีการจัดจำหน่าย:แชร์แวร์ (เวอร์ชันสาธิต http://www.mayuradraw.com/mdraw.zip)

ราคา: 39 ดอลลาร์

ทำงานภายใต้การควบคุม: Windows 95/98/ฉัน/NT/2000/XP

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

แพ็คเกจพิเศษสำหรับการสร้างกราฟิก SVG

EvolGrafiX XStudio 6.1.1

ผู้พัฒนา:อีโวกราฟิเอ็กซ์

ขนาดการกระจาย: 7.25 ลบ

วิธีการจัดจำหน่าย: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)

ราคา:ใบอนุญาตเชิงพาณิชย์ $449, ใบอนุญาตทางวิชาการ $249

ทำงานภายใต้การควบคุม:วินโดวส์ 2000/XP

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

ข้าว. 6. ผสมผสานการสร้างภาพเข้ากับการแก้ไขซอร์สโค้ด
ใน EvolGrafiX XStudio

แอปพลิเคชั่นมีความสามารถที่จำเป็นทั้งหมดสำหรับการสร้างและประมวลผลภาพเวกเตอร์และในกรณีนี้คล้ายกับแพ็คเกจ Adobe Illustrator มาก ในเวลาเดียวกัน XStudio มุ่งเน้นไปที่การเตรียมกราฟิก SVG แบบคงที่ โต้ตอบ และเคลื่อนไหวได้โดยตรง ดังนั้นควบคู่ไปกับเครื่องมือคลาสสิกสำหรับการทำงานกับวัตถุเวกเตอร์ จึงเสริมด้วยความสามารถเฉพาะของ SVG แถบเครื่องมือ Document Object Model (DOM) ในตัวให้การแสดงวัตถุ SVG แบบลำดับชั้น โปรแกรมแก้ไข XML ที่สะดวกช่วยให้คุณแก้ไขซอร์สโค้ดในระดับข้อความ และโปรแกรมแก้ไขสคริปต์ช่วยให้คุณสามารถเสริมด้วยสคริปต์ Java การทำงานกับโค้ดได้รับการจัดระเบียบอย่างสะดวกมาก: ส่วนโค้ดของวัตถุที่เลือกจะถูกไฮไลต์โดยอัตโนมัติ สามารถค้นหาข้อความและตั้งค่าบุ๊กมาร์กได้ ฯลฯ การเปลี่ยนแปลงโค้ดใด ๆ จะปรากฏทันทีในหน้าต่างการรับชมด้วยภาพ และการเปลี่ยนแปลงทางภาพจะสะท้อนให้เห็นใน หน้าต่างตัวแก้ไข

อิงค์สเคป

นักพัฒนา: IOSN (นานาชาติ โอเพ่นซอร์สเครือข่าย เครือข่ายโอเพ่นซอร์สนานาชาติ)

ขนาดการกระจาย: 8.7 ลบ

ราคา:ฟรี

ทำงานภายใต้การควบคุม: Windows 9x/NT/2000/XP, Mac OS X, ลินุกซ์

Inkscape (รูปที่ 7) มีแนวโน้มมากที่สุด โปรแกรมแก้ไขเวกเตอร์ขึ้นอยู่กับโมเดล Open Source ซึ่งเป็นหลายแพลตฟอร์มและเป็นเครื่องมืออันทรงพลังสำหรับการพัฒนากราฟิกตามมาตรฐาน Scalable Vector Graphics ด้วยตัวเอง ฟังก์ชั่นการทำงานกับภาพเวกเตอร์รวมถึงอินเทอร์เฟซ Inkscape นั้นคล้ายกับ CorelDRAW มาก รองรับช่องอัลฟ่า การทำงานกับเลเยอร์ การใช้ข้อความต่อเนื่อง การเติมไล่ระดับสีที่งดงาม ฟิลเตอร์และเอฟเฟกต์จำนวนมาก การแปลงต่างๆ ทำงานสะดวกด้วยรูปทรงและวัตถุ การจัดกลุ่มวัตถุ และอื่นๆ อีกมากมาย คุณสามารถนำเข้าข้อมูลจากไฟล์ JPEG, PNG และ TIFF และฝังลงในรูปภาพ SVG ได้

โปรแกรมแก้ไข Inkscape ในตัว

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

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

Corel เว็บวาด

ผู้พัฒนา:บริษัท คอเรล

ขนาดการกระจาย: 15.6 ลบ

วิธีการจัดจำหน่าย:แชร์แวร์ (สาธิต 30 วัน http://www5.jasc.com/pub/wdw102ev.exe)

ราคา:เวอร์ชันดาวน์โหลด 179 ดอลลาร์, เวอร์ชันซีดี 199 ดอลลาร์

ทำงานภายใต้การควบคุม: Windows 98/NT4/2000/ฉัน/XP

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

แอปพลิเคชั่นนี้มีชุดเครื่องมือกราฟิกมาตรฐานมากมาย ซึ่งโดยทั่วไปสำหรับแอปพลิเคชั่นกราฟิกเวกเตอร์ที่มีคุณสมบัติครบถ้วน: รูปร่างพื้นฐาน (วงรี สี่เหลี่ยมผืนผ้า ดาว ฯลฯ) ปากกา รูปหลายเหลี่ยม เส้นหลายเส้น ข้อความ ฯลฯ นอกเหนือจากวัตถุเวกเตอร์แล้ว WebDraw ยังช่วยให้คุณสามารถเสริมวัตถุ SVG ด้วยวัตถุภายนอกได้ ภาพแรสเตอร์. นอกเหนือจากการเติมแบบปกติและการซ้อนทับสไตล์สำเร็จรูปแล้ว คุณยังสามารถใช้การไล่ระดับสีที่ซับซ้อน การเติม รวมถึงรูปแบบที่สร้างขึ้นด้วยตัวเองได้ เพื่อให้ได้ภาพที่มีประสิทธิภาพมากขึ้น คุณสามารถใช้ฟิลเตอร์ทั้งแบบธรรมดา (การเบลอและเงา) และแบบซับซ้อน (พื้นผิวและแสง) เส้นกริด เส้นบอกแนว และไม้บรรทัดช่วยให้คุณวางวัตถุได้อย่างแม่นยำ และแถบเครื่องมือ Document Object Model (DOM) ในตัวจะแสดงวัตถุ SVG ในมุมมองแผนผังแบบลำดับชั้นเพื่อการจัดการที่ง่ายดาย

WebDraw มาพร้อมกับเส้นสตอรี่บอร์ดแอนิเมชันสากล Animation Timeline ซึ่งสร้างขึ้นบนพื้นฐานของ SVG DOM (Document Object Model) ซึ่งช่วยให้คุณสามารถเลือกและสร้างภาพเคลื่อนไหวเกือบทุกคุณลักษณะหรือคุณสมบัติของวัตถุทุกประเภทได้ตลอดเวลา . กลไกการลากและวางทำให้คุณสามารถแก้ไขจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว รวมถึงระยะเวลาของแต่ละขั้นตอนของภาพเคลื่อนไหวได้โดยตรงในไทม์ไลน์ เนื่องจากการแทรกคีย์ไทม์ของแอนิเมชันทุกครั้งที่คุณตั้งค่าตัวเลือกแอนิเมชั่นสำหรับแอตทริบิวต์หรือคุณสมบัติของออบเจ็กต์ จึงสามารถย้ายไปยังพื้นที่อื่นๆ ของกระดานเรื่องราวเพื่อวัตถุประสงค์ในการ การตั้งค่าอัตโนมัติการกระจายเอฟเฟกต์ภาพเคลื่อนไหวในช่วงเวลาหนึ่ง

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

ตัวแก้ไข Sketsa SVG 3.2.3

ผู้พัฒนา:กียุต

ขนาดการกระจาย: 5.99 ลบ

วิธีการจัดจำหน่าย: แชร์แวร์ (สาธิตที่เพิ่มแท็กให้กับรูปภาพ http://www.kiyut.com/products/sketsa/sketsa.zip)

ราคา:$49

ทำงานภายใต้การควบคุม: Windows 2000/XP, Java VM (JRE) 1.5 และสูงกว่า (http://www.java.com/getjava), UNIX และ Linux

แอปพลิเคชัน Sketsa (รูปที่ 9) เป็นหนึ่งในโปรแกรมแก้ไข SVG ที่ได้รับความนิยมมากที่สุด และช่วยให้คุณสร้างกราฟิก SVG ระดับมืออาชีพ รวมถึงการปรับให้เหมาะสมในรูปแบบ SVGZ แพ็คเกจนี้ผสมผสานความเรียบง่ายและความสะดวกในการใช้งานเข้ากับคุณสมบัติที่หลากหลายและเข้ากันได้กับระบบ Windows, Mac และ Linux

Sketsa รองรับชุดเครื่องมือแบบคลาสสิกสำหรับแอปพลิเคชันเวกเตอร์ใดๆ ซึ่งช่วยให้คุณสามารถสร้างและแปลงวัตถุเวกเตอร์โดยอิงตามทั้งรูปทรงและกราฟิกดั้งเดิมและข้อความ ซึ่งหากต้องการก็สามารถเสริมด้วยภาพแรสเตอร์ได้อย่างง่ายดาย คุณสามารถควบคุมความโปร่งใส ใช้การเติมไล่ระดับสีและฟิลเตอร์ได้ ทั้งหมดนี้เสริมความสำเร็จด้วยความสามารถพิเศษของ SVG ซึ่งทำให้รูปภาพใดๆ สามารถแก้ไขได้ไม่เพียงแต่ด้วยสายตาเท่านั้น แต่ยังรวมถึงใน โหมดข้อความ. หากต้องการแก้ไขโค้ด SVG แพ็คเกจจะมีโปรแกรมแก้ไขข้อความ XML ในตัว เพื่อความสะดวกในการจัดการออบเจ็กต์ มีแถบเครื่องมือ Document Object Model (DOM) ในตัว ซึ่งเป็นชุดของออบเจ็กต์ที่มีลักษณะคล้ายต้นไม้ตามลำดับชั้นในเอกสาร SVG ซึ่งช่วยให้คุณสามารถเลือกออบเจ็กต์เอกสารใดๆ เพื่อแก้ไขคุณสมบัติได้

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

รูปแบบ SVG คืออะไรและใช้ที่ไหน

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

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

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

โปรแกรมแก้ไขที่ดีที่สุดสำหรับการทำงานกับไฟล์ SVG

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

อะโดบี อิลลัสเตรเตอร์

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

บ็อกซ์ซี่ SVG

คุณยังสามารถเปิดรูปภาพ SVG ได้โดยใช้แอปพลิเคชัน Boxy SVG ที่สร้างขึ้นเป็นพิเศษสำหรับการทำงานกับรูปแบบนี้ โปรแกรมแก้ไขนี้ด้อยกว่า Adobe Illustrator หลายประการ แต่คุณจะพบทุกสิ่งในนั้น เครื่องมือพื้นฐานเพื่อสร้างและแก้ไขภาพ SVG แอปพลิเคชันรองรับการทำงานกับรูปร่างและวัตถุ การนำเข้าแบบอักษรและรูปภาพในรูปแบบยอดนิยม การทำงานกับไลบรารี Pixabay การดูและแก้ไขซอร์สโค้ด SVG และ CSS Boxy SVG มีให้บริการทั้งในรูปแบบบริการออนไลน์และเป็นแอปพลิเคชันสำหรับ Windows 10, MacOS และ Chrome OS

เวกเตอร์

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

อิงค์สเคป

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

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

วิธีเปิด SVG ออนไลน์

หากคุณต้องการโปรแกรมแก้ไข SVG ออนไลน์ ให้ใช้ Boxy SVG, Vectr และ Inkscape เวอร์ชันเว็บ ชุดการทำงานของรุ่นดังกล่าวเกือบจะเหมือนกับรุ่นเดสก์ท็อป ตัวอย่างเช่น แอปพลิเคชัน Inkscape สามารถเรียกใช้เป็นส่วนหนึ่งของโครงการ www.rollapp.com/app/inkscape

หากคุณกำลังมองหาสิ่งที่ง่ายกว่านี้ ลองใช้โปรแกรมแก้ไขเวกเตอร์ออนไลน์ Sketchpad ซึ่งมีอยู่ที่ Sketch.io/sketchpad Sketchpad มีเครื่องมือต่างๆ เช่น แปรง เส้น ลูกศร พื้นฐาน ภาพตัดปะ ปากกา ดินสอสี แอร์บรัช การเติม ฯลฯ มีการทำงานกับเลเยอร์ จานสี และการไล่ระดับสี

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

เครื่องมือแปลงไฟล์ SVG เป็น PNG

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

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

ตัวอย่างเช่นในรูปนี้จะเน้นไว้ ไฟล์ my-file.svgจากนั้นคุณจะต้องคลิกขวาที่ไฟล์นี้แล้วเลือกตัวเลือกในเมนูไฟล์ "สแกนด้วย AVG". เมื่อคุณเลือกตัวเลือกนี้ AVG Antivirus จะเปิดและสแกนไฟล์เพื่อหาไวรัส

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

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

คำแนะนำ:ลองอัปเดต No Cash GBA (No$GBA) เป็นเวอร์ชันล่าสุดเพื่อให้แน่ใจว่าคุณมีแพตช์และอัปเดตล่าสุด

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

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

หากไฟล์ของคุณเป็น SVG ที่เกี่ยวข้องกับฮาร์ดแวร์บนคอมพิวเตอร์ของคุณเพื่อเปิดไฟล์ที่คุณอาจต้องการ อัพเดตไดรเวอร์อุปกรณ์ที่เกี่ยวข้องกับอุปกรณ์นี้

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

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

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

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

ถ้าคุณ ทำตามขั้นตอนทั้งหมดที่อธิบายไว้ข้างต้นเรียบร้อยแล้วและไฟล์ SVG ของคุณยังคงเปิดไม่ได้ คุณอาจต้องเรียกใช้ อัพเดตอุปกรณ์. ในกรณีส่วนใหญ่ แม้ว่าจะใช้ฮาร์ดแวร์เวอร์ชันเก่า พลังการประมวลผลก็ยังเพียงพอสำหรับแอปพลิเคชันผู้ใช้ส่วนใหญ่ (เว้นแต่ว่าคุณกำลังทำงานที่ต้องใช้ CPU จำนวนมาก เช่น การเรนเดอร์ 3D การสร้างแบบจำลองทางการเงิน/วิทยาศาสตร์ หรือ งานมัลติมีเดียเข้มข้น) ดังนั้น, เป็นไปได้ว่าคอมพิวเตอร์ของคุณมีหน่วยความจำไม่เพียงพอ(หรือที่เรียกกันทั่วไปว่า "RAM" หรือ แกะ) เพื่อดำเนินการเปิดไฟล์

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

เวกเตอร์

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

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

อาจเกิดข้อผิดพลาดเมื่อโหลดภาพประกอบที่ซับซ้อนลงใน Vectr (แผนที่หรือไดอะแกรมรายละเอียด) ตัวแก้ไขไม่สามารถจัดการกราฟิกที่ซับซ้อนได้ดีเสมอไป อย่างไรก็ตาม สำหรับ SVG ที่เรียบง่ายกว่า (ไอคอน โลโก้ ฯลฯ) โปรแกรมแก้ไขนี้ก็เพียงพอแล้ว

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

ถ้าเข้า. เวอร์ชันออนไลน์ไม่มีฟังก์ชันที่คุณต้องการ คุณสามารถดาวน์โหลดแอปพลิเคชันเวอร์ชันเดสก์ท็อปได้ ตัวแก้ไขพร้อมใช้งานสำหรับ Windows, Mac, Linux และ Chromebook

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

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

ด้วยเหตุนี้ Vectr จึงเพิ่งเปิดตัวเวอร์ชันของตัวแก้ไขในรูปแบบนี้ ปลั๊กอินสำหรับ WP.

RollApp

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

หากต้องการใช้ RollApp คุณต้องมีบัญชี คุณสามารถลงทะเบียนใหม่หรือเข้าสู่ระบบด้วย ใช้ Google,เฟซบุ๊ก,อเมซอน. สะดวกมาก ฉันเกลียดการสร้างบัญชีใหม่หลายพันบัญชีเพื่อดูแอป

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

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

BoxySVG

หากคุณอ่าน SitePoint มาเป็นเวลานาน คุณควรจะคุ้นเคยกับโปรแกรมแก้ไขนี้ BoxySVGเพราะในช่วง 12 เดือนที่ผ่านมาเราได้พูดคุยเกี่ยวกับเขาแล้ว ฉันจะไม่ทำการตรวจสอบโดยละเอียดเนื่องจากได้ดำเนินการไปแล้ว บทความนี้.

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานของ JavaScript พร้อมตัวอย่างวิธีสร้างเว็บแอปพลิเคชันแบบลงมือปฏิบัติจริง

สิ่งสำคัญคือตั้งแต่การตรวจสอบของ Alex BoxySVG ได้เพิ่มตัวตรวจสอบโค้ด ทำให้เป็นหนึ่งในเครื่องมือ SVG ที่เกี่ยวข้องมากที่สุดสำหรับนักพัฒนาเว็บ

จันวาส

สองสามปีที่ผ่านมา จันวาสเป็นโปรแกรมแก้ไข SVG ที่ได้รับความนิยมอย่างมาก น่าเสียดาย, เมื่อเร็วๆ นี้ตัวแก้ไขนี้ไม่ได้รับการพัฒนา แต่ถึงกระนั้นก็ยังใช้งานได้ เว็บกำลังก้าวไปข้างหน้า แต่ Janvas หยุดนิ่ง ความสนใจในตัวมันจึงจางหายไป Alex จาก SitePoint ทำงานร่วมกับเครื่องมือนี้มาบ้างในปี 2013-2014 (รวมถึงเวอร์ชันที่ต้องชำระเงิน) และยังได้ตอบคำถามบน Google+ เพจมาระยะหนึ่งแล้ว Janvas เป็นเครื่องมือที่ทรงพลังทีเดียว

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

มีข่าวดี - เวอร์ชันใหม่จะเปิดตัวในรูปแบบของแอปพลิเคชัน Chrome เราหวังว่าพวกเขาจะแก้ไขปัญหาได้

วาดSVG

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

ด้วย DrawSVG คุณสามารถวาด แก้ไข และเรนเดอร์วัตถุได้ คุณสามารถวาดรูปทรงง่ายๆ ได้ เช่น เส้นโค้ง Bezier ข้อความตรงและโค้ง ลายเส้นและการเติมหลายสไตล์ เป็นต้น SVG ยังสามารถส่งออกไปยัง PNG

แก้ไข SVG

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

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

การใช้ SVG-edit ทำให้คุณสามารถวาดรูปร่างง่ายๆ (เส้น สี่เหลี่ยม วงกลม รูปหลายเหลี่ยม เส้นด้วยมือเปล่า ฯลฯ) ใช้เส้นทาง เลเยอร์ การไล่ระดับสี คุณสามารถดูและแก้ไขแหล่งที่มา SVG ส่งออกเป็น PNG, JPEG, BMP , WEBP, ฯลฯ

บทสรุป

นอกจากตัวแก้ไข SVG ทั้ง 6 ตัวแล้ว ยังมีตัวแก้ไขอื่นๆ อีก แต่มีเพียงไม่กี่ตัวเท่านั้นที่มีฟังก์ชันการทำงานมากกว่าตัวแก้ไขทั้ง 5 ตัวที่แสดงด้านบน

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

PS: คุณสามารถลองได้เช่นกัน ฟิกม่า. เป็นเครื่องมือสร้าง UI มากกว่าเครื่องมือแก้ไข SVG อย่างไรก็ตาม มันมีชุดเครื่องมือที่ยอดเยี่ยมและสร้างโค้ด SVG ที่ได้รับการปรับปรุงอย่างเหมาะสม