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

Alex Danilo
X

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

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

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

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

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

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

ข้อมูลเบื้องต้นเกี่ยวกับการปรับขนาด

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

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

โลโก้ HTML5

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

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

แต่ยังไม่หมดแค่นี้ โลโก้ 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

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

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

มีหลายกรณีที่ 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 ที่ยอดเยี่ยม