วิธีการใช้ความโปร่งใสกับ SVG

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

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

รูปร่าง SVG กึ่งทึบบนพื้นหลังสี

วิธีส่งออก SVG ด้วยพื้นหลังโปร่งใส

นักออกแบบคุ้นเคยกับการคิดในแง่ของภูมิหลังที่โปร่งใสหรือมองเห็นได้ เราคิดเกี่ยวกับการเคาะพื้นหลังออก รูปภาพ PNG และรูปภาพ GIF ทำงานเช่นนั้น—คุณจะสร้างโดยใช้พื้นหลังหรือเลือกพื้นหลังโปร่งใสในโปรแกรม เช่น Illustrator หรือ Photoshop เพื่อทำให้พื้นหลังนั้นแตก

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

แล้วมีปัญหาอะไรไหม? ง่ายที่จะลงเอยด้วยพื้นหลังโปร่งใสโดยไม่ได้ตั้งใจเมื่อบันทึกหรือส่งออกไฟล์ SVG! รูปภาพต่อไปนี้อาจมีพื้นหลังสีขาว หรืออาจมีพื้นหลังโปร่งใส คุณไม่สามารถบอกได้เพียงแค่ดูที่หน้าจอ Illustrator; คุณต้องเลือก View→Show Transparency Grid

กราฟิกนี้อาจมีพื้นหลังสีขาวหรืออาจไม่มีพื้นหลัง

เมื่อเปิดใช้งาน Transparency Grid ดังที่แสดง คุณจะเห็นว่านกมีสี่เหลี่ยมสีขาวอยู่ด้านหลัง และพื้นหลังสีขาวนั้นจะ “เข้ากับ” กราฟิก หากคุณบันทึกไฟล์เป็น SVG หรือส่งออกเป็น SVG

การดูตารางความโปร่งใสจะแสดงสี่เหลี่ยมสีขาวด้านหลังกราฟิก

ให้ฉันเน้นและส่องแสงเรื่องนี้จากอีกมุมหนึ่ง เมื่อฉันส่งออกรูปภาพนี้เป็น SVG กล่องโต้ตอบส่งออกสำหรับหน้าจอที่แสดง จะไม่มีตัวเลือกสำหรับการเลือกสีโปร่งใส

คุณไม่สามารถเลือกสีโปร่งใสใน SVG ได้เนื่องจากไม่มีสีพื้นหลัง

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

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

หากต้องการใช้เทคนิคนั้นเพื่อสร้างพื้นหลังแบบกำหนดเองในขณะที่คุณพัฒนางานศิลปะ SVG ให้ทำตามขั้นตอนเหล่านี้:

เลือกไฟล์→ตั้งค่าเอกสาร

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

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

กำหนดสีพื้นหลังตัวอย่างด้วยตารางโปร่งใส

เลือกแผงสีตารางที่สองจากสองแผง และกำหนดสีเดียวกันให้กับแผง
จำไว้ว่าคุณสามารถใช้ eyedropper ตัวเลือกสีเพื่อคว้าสีนั้น

คลิกตกลงในกล่องโต้ตอบการตั้งค่าเอกสาร

ทั้งหมดที่ฉันได้ทำในชุดก่อนหน้าของขั้นตอนคือกำหนดวิธีการที่จะแสดงความโปร่งใสกริดเมื่อมีการเปิดใช้งาน ดังนั้น หากไม่ได้เปิดใช้งานตารางความโปร่งใส ให้เลือกมุมมอง→ตารางความโปร่งใส

ในรูปนี้ ฉันเลือกอาร์ตบอร์ดที่มีกราฟิก และฉันกำลังดูตัวอย่างโปรเจ็กต์โดยใช้สีพื้นหลังจำลอง

การแสดงตัวอย่างสีพื้นหลังของเอาต์พุตด้วยตารางความโปร่งใสที่กำหนดเอง

ใช้เอฟเฟกต์ความโปร่งใสกับ SVG

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

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

เปรียบเทียบเอาต์พุต PNG (บนสุด) กับ SVG เมื่อใช้ความโปร่งใส

ต่อไปนี้คือสรุปข้อดีของการใช้ SVG สำหรับเอฟเฟกต์ความโปร่งใส:

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

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

<="" code="">