20 เครื่องมือ SVG ที่มีประโยชน์สำหรับกราฟิกที่ดีกว่า

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

ที่นี่ 20 เครื่องมือที่คุณสามารถใช้ทำงานกับ SVG ได้อย่างรวดเร็วและมีประสิทธิภาพ. เรามีเครื่องมือออนไลน์ส่วนใหญ่ที่สามารถช่วยในการเพิ่มประสิทธิภาพการแปลงการสร้างรูปแบบและอื่น ๆ.

ระบบพิกัด SVG แบบโต้ตอบ

เมื่อคุณทำงานกับ SVG คุณจะไม่สามารถทิ้งพิกัดไว้ได้ นี่คือเครื่องมือโต้ตอบที่ยอดเยี่ยมโดย Sara Souiden เพื่อช่วยคุณ เรียนรู้ว่า SVG ทำงานอย่างไร. ใช้ Viewbox และ preserveAspectRatio บน SVG นำโดยเส้นสีส้มและสีม่วงและไม้บรรทัดที่มีประโยชน์คุณสามารถเล่นในขณะที่เรียนรู้วิธีการทำงานของ SVG พิกัด.

b64

b64 เป็นเครื่องมือง่ายๆในการ ปรับภาพให้เหมาะสมจากนั้นเปลี่ยนเป็นรูปแบบ base64. คุณสามารถวางภาพ SVG ของคุณ (รูปแบบอื่น ๆ เช่น JPG และ PNG ทำงานได้เช่นกัน) จากนั้นจับ CSS ด้วยภาพพื้นหลัง base64 เป็นผลลัพธ์.

SVGO

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

คุณสามารถติดตั้ง SVGO ได้ทาง npm, $ [sudo] npm install -g svgo หรือใช้เวอร์ชัน GUI ที่มีการลากและวางเพื่อดำเนินการเพิ่มประสิทธิภาพ SVG ของคุณ.

SVG OMG

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

SVG ทันที

เมื่อคุณทำงานกับ Illustrator SVG ที่ส่งออกจะมีข้อมูลบางอย่างที่ไม่จำเป็น ด้วยเครื่องมือนี้คุณจะ รับ SVG เวอร์ชันที่ปรับแล้วของคุณ จากพื้นที่ทำงาน Illustrator ของคุณ เครื่องมือนี้เพิ่มแผงที่มีตัวเลือกบางตัวเพื่อปรับ SVG ให้เหมาะสม คุณสามารถรับ SVG Now ได้จากหน้า Add-on ของ Creative Cloud.

ตัวแปลง SVG เป็น PNG

ต้องการที่จะ ส่งออกไฟล์ SVG ไปยังรูปแบบ PNG? หากไม่เปิดแอปพลิเคชันเช่น Illustrator ให้ทำเช่นนั้น ใช้เครื่องมือ SVG to PNG Converter นี้เพื่อรับเอาท์พุทภาพในรูปแบบ PNG และ PNG Base64 data URI หากคุณต้องการ.

SVG Circus

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

SVG Sprite

SVG Sprite เป็นโมดูล Node.js ซึ่งปรับให้เหมาะสม พวงของไฟล์ SVG, และ อบให้เป็นประเภทสไปรต์ SVG รวมถึง CSS sprite แบบดั้งเดิมสำหรับภาพพื้นหลังและ / หรือภาพเบื้องหน้าสแต็ค SVG และอื่น ๆ.

เสมือน

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

รูปแบบธรรมดา

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

เครื่องกำเนิดไฟฟ้า Trianglify

สร้างรูปแบบทางเรขาคณิต SVG ที่สวยงาม กับ เครื่องกำเนิดไฟฟ้า Trianglify. คุณสามารถตั้งค่าการสุ่มสี / ตัวแปรขนาดของเมล็ดและเลือกจานสีเพื่อใช้งาน เครื่องมือนี้เป็น Trianglify รุ่น GUI.

SVG Gradient

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

ส่งออก PSD เป็น SVG

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

เปลี่ยนชื่อเลเยอร์เวกเตอร์ด้วยส่วนขยาย SVG (เช่น layer1 กลายเป็น layer1.svg) และตอนนี้คุณสามารถเรียกใช้สคริปต์จาก ไฟล์> สคริปต์> PS เป็น SVG.

ตัวกรอง SVG

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

SVG Morpheous

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

เครื่องกำเนิดเส้นทางคลิป

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

Chartist.js

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

เครื่องกำเนิดไฟฟ้าแบบเส้นประ SVG

นี่เป็นเครื่องมือง่ายๆ สร้างเส้นประ การใช้ SVG จังหวะ dasharray. ก่อนอื่นให้เลือกประเภทของเส้นประหนึ่งจากรายการจากนั้นปรับแต่งในแง่ของความกว้างความสูงการหมุนหรือสี หลังจากนั้นคุณสามารถคว้ารหัส HTML และ CSS เพื่อใช้เส้นประนี้ในโครงการของคุณ.

วิธีการวาด: เครื่องมือแก้ไข SVG แบบง่าย

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

ส่งออก Flash เป็น SVG แบบเคลื่อนไหว

แม้ว่ามันจะไม่ได้รับความนิยมอีกต่อไป แต่ก็มีโอกาสที่คุณบางคนอาจมีปัญหากับการปล่อยแฟลช ถ้าเป็นเช่นนั้นคุณสามารถ เปลี่ยนภาพเคลื่อนไหวแฟลชของคุณให้เป็น SVG เพื่อให้มันใช้งานได้กับเทคโนโลยีใหม่ ๆ. เครื่องมือนี้เป็นส่วนเสริมในแอปพลิเคชัน Flash และสามารถทำงานกับ CS5, CS6 และ CC.

คุณสามารถส่งออกไปยัง SVG ได้เมื่อมีรูปทรง, สัญลักษณ์ Bitmaps, Classic Motion Tweens, Shape tweens (สำหรับคนอื่น ๆ , มีความสำเร็จที่พิสูจน์ได้).