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

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

หลายคนคิดว่า 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 ข้อ ได้แก่ ความสวยงามและประสิทธิภาพ ลองเปลี่ยนทิศทางการไล่ระดับสีเพื่อให้ดูดีขึ้นกัน การตั้งค่าแอตทริบิวต์ "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 ที่ไม่ได้บีบอัดนี้มีเพียง 2,922 ไบต์ ซึ่งเล็กมากสำหรับเอฟเฟกต์กราฟิกที่ดูสมจริงเช่นนี้ ผู้ใช้และแพ็กเกจอินเทอร์เน็ตของคุณจึงใช้งานได้อย่างราบรื่น

ขั้นตอนถัดไป

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

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

แหล่งข้อมูลอื่นๆ ที่มีประโยชน์

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