สาดกราฟิกเวกเตอร์ในเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์

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

หลายคนคิดว่า Canvas เป็นเพียงวิธีเดียวในการวาดเวกเตอร์และแรสเตอร์ผสมกันในเว็บ แต่ก็มีทางเลือกอื่นที่มีประโยชน์ วิธีที่ยอดเยี่ยมในการวาดภาพเวกเตอร์คือการใช้ Scalable Vector Graphics (SVG) ซึ่งเป็นส่วนสำคัญของ HTML5

เราทราบดีว่าการออกแบบที่ตอบสนองตามอุปกรณ์เป็นส่วนสำคัญของการจัดการหน้าจอหลายขนาด และ SVG เหมาะสำหรับการจัดการหน้าจอขนาดต่างๆ ได้อย่างง่ายดาย

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

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

เครื่องมือสร้างยอดนิยม เช่น แอปพลิเคชันวาดเขียนใน Google ไดรฟ์, Inkscape, Illustrator, Corel Draw และอื่นๆ อีกมากมายจะสร้าง SVG เพื่อสร้างเนื้อหาได้หลายวิธี เราจะเจาะลึกวิธีใช้เนื้อหา SVG และเคล็ดลับการเพิ่มประสิทธิภาพบางส่วนเพื่อช่วยให้คุณใช้งานได้

พื้นฐานการปรับขนาด

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

โลโก้ HTML5 แสดงอยู่ด้านล่างนี้ คุณคงเดาได้ไม่ยากว่าโลโก้นี้จะสร้างขึ้นเป็นไฟล์ SVG

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

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

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

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

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

แต่แน่นอนว่า PNG และ JPEG ไม่ได้มีรูปเท่ากัน เคล็ดลับการเพิ่มประสิทธิภาพหลายๆ อย่างบอกให้คุณใช้ JPEG แทน PNG แต่นั่นก็ไม่ใช่แนวคิดที่ดีเสมอไป ดูรูปภาพด้านล่างนี้ รูปภาพทางด้านซ้ายเป็นภาพ PNG ที่ส่วนขวาบนของโลโก้ HTML5 ที่ขยาย 6 เท่า รูปภาพด้านขวาเหมือนกันแต่เข้ารหัสด้วย JPEG

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

การสร้างพื้นหลังเวกเตอร์

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

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

คุณจะสังเกตเห็นว่าไม่ว่าหน้าจอจะมีขนาดเท่าใด รูปภาพก็จะได้รับการปรับขนาดอย่างสวยงามโดยมีขอบที่คมชัด

ซึ่งแน่นอนว่าเราต้องการใส่เนื้อหาบางอย่างไว้เบื้องหลัง

แต่อย่างที่คุณเห็น ผลที่ได้อาจไม่ดีนักเนื่องจากเราไม่สามารถอ่านข้อความได้ แล้วเราควรทำอย่างไร

ปรับพื้นหลังให้ดูดีขึ้น

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

#bg {
  opacity: 0.2;
}

ซึ่งจะให้ผลลัพธ์ดังนี้

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

โซลูชันที่ดีกว่า

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

ตอนนี้เราก็เข้าใจหลักการพื้นฐานอยู่บ้างแล้ว ต่อไปเราจะไปต่อกันที่ฟีเจอร์อื่นๆ

การใช้การไล่ระดับสีอย่างมีประสิทธิภาพ

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

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

ปุ่มผลลัพธ์จะลงเอยโดยมีหน้าตาเช่นนี้

โปรดสังเกตว่าการไล่ระดับสีที่เพิ่มเข้ามาเริ่มจากซ้ายไปขวา นี่คือทิศทางการไล่ระดับสีเริ่มต้นใน SVG แต่เราสามารถปรับปรุงให้ดีขึ้นด้วยสาเหตุ 2-3 ประการ ได้แก่ ความสวยงามและประสิทธิภาพ เรามาลองเปลี่ยนทิศทางการไล่ระดับสีเพื่อทำให้ดูดีขึ้นกัน การตั้งค่าแอตทริบิวต์ "x1", "y1", "x2" และ "y2" ในการไล่ระดับสีแบบเส้นตรงจะควบคุมทิศทางของสีเติม

การตั้งค่าเพียงแอตทริบิวต์ "y2" จะช่วยให้เราเปลี่ยนการไล่ระดับสีให้เป็นแนวทแยงได้ ดังนั้นการเปลี่ยนแปลงโค้ดเพียงเล็กน้อยนี้

<linearGradient id="blueshiny" y2="1">

ทำให้ปุ่มของเราเปลี่ยนไป โดยให้มีลักษณะเหมือนกับภาพด้านล่าง

เรายังสามารถเปลี่ยนการไล่ระดับสีจากบนลงล่างได้ง่ายๆ ด้วยการเปลี่ยนโค้ดเล็กๆ น้อยๆ นี้

<linearGradient id="blueshiny" x2="0" y2="1">

จนกลายเป็นรูปภาพด้านล่าง

แล้วการพูดคุยเรื่อง การไล่ระดับสีในมุมต่างๆ ที่คุณถามล่ะ

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

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

หากเราอยากลองกับความรู้เกี่ยวกับการไล่ระดับสีใหม่นี้ เราอาจเพิ่มการไล่ระดับสีแบบเท่ๆ ไว้หลังโลโก้ HTML5 โดยการเพิ่มโค้ดด้านล่างนี้

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

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

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

สร้างภาพเคลื่อนไหวได้ง่ายๆ

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

ตัวอย่างเช่น เราจะแก้ไขโลโก้ HTML5 สีสันสดใสโดยเปลี่ยนคำจำกัดความการไล่ระดับสีแบบเส้นตรงเป็นโค้ดด้านล่าง

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

โปรดดูรูปภาพด้านล่างเพื่อดูผลของการเปลี่ยนแปลงข้างต้น

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

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

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

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

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

จากที่นี่ไปที่ไหน

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

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

แหล่งข้อมูลที่ดีอื่นๆ

• Inkscape แอปพลิเคชันการวาดภาพแบบโอเพนซอร์สที่ใช้ SVG เป็นรูปแบบไฟล์
• เปิดคลิปอาร์ต ซึ่งเป็นคลังคลิปอาร์ตแบบโอเพนซอร์สขนาดใหญ่ที่มีรูปภาพ SVG หลายพันภาพ
• หน้า SVG ของ W3C ที่มีลิงก์ไปยังข้อกำหนด แหล่งข้อมูล ฯลฯ
• Raphaël ไลบรารี JavaScript ที่มอบ API ที่สะดวกในการวาดและทำให้เนื้อหา SVG เคลื่อนไหวโดยมีทางเลือกสำรองที่ยอดเยี่ยมสำหรับเบราว์เซอร์รุ่นเก่า
• แหล่งข้อมูล SVG จาก Slippery Rock University - มีลิงก์ไปยัง SVG Primer ที่ยอดเยี่ยม