वेक्टर ग्राफ़िक, शेप, कोऑर्डिनेट, और पाथ की सीरीज़ को रेंडरिंग के कॉन्टेक्स्ट के बारे में बताने का तरीका है. ये निर्देशों का एक सेट होते हैं. इससे पता चलता है कि किसी इमेज को कैसे बनाया जाए. जब उस इमेज को छोटा या छोटा किया जाता है, तो इमेज में दिखाए गए पॉइंट और लाइनों के सेट को स्केल करने के लिए फिर से तैयार किया जाता है. दो पॉइंट के बीच का आसान कर्व, किसी भी साइज़ पर उतना ही आसानी से फिर से तैयार किया जाएगा—जिस तरह किसी एचटीएमएल एलिमेंट पर सीएसएस से तय किए गए बॉर्डर को फिर से बनाया जाता है. जैसे, व्यूपोर्ट में एलिमेंट को स्केल करना.
स्केलेबल वेक्टर ग्राफ़िक्स (SVG) एक एक्सएमएल-आधारित मार्कअप भाषा है, जिसे W3C ने डेवलप किया है. यह आधुनिक वेब के लिए डिज़ाइन किया गया एक वेक्टर इमेज फ़ॉर्मैट है.
वेक्टर आर्टवर्क में बदलाव करने के लिए इस्तेमाल होने वाले किसी भी डिज़ाइन सॉफ़्टवेयर की मदद से, इमेज को SVG के तौर पर एक्सपोर्ट किया जा सकता है. यह एक ऐसी मार्कअप भाषा है जिसे लोग आसानी से पढ़ सकते हैं. इसलिए, SVG को किसी भी टेक्स्ट एडिटिंग सॉफ़्टवेयर के साथ बनाया और इसमें बदलाव भी किया जा सकता है. भले ही, इसे बनाने के लिए किसी भी सॉफ़्टवेयर का इस्तेमाल किया गया हो. SVG को सीएसएस की मदद से स्टाइल किया जा सकता है या इसमें JavaScript शामिल हो सकती है, जो खुद ही इमेज में व्यवहार और इंटरैक्शन तैयार करती है.
यह बहुत ज़्यादा डिज़ाइनर और डेवलपर को लुभाने वाला फ़ॉर्मैट है. हालांकि, असली उपयोगकर्ता अनुभव के मामले में SVG फ़ाइल का बेहतरीन फ़ॉर्मैट भी है. रास्टर इमेज फ़ॉर्मैट की ज़्यादा निर्देशात्मक पिक्सल ग्रिड-आधारित जानकारी की तुलना में, SVG सोर्स में दी गई जानकारी अक्सर बहुत छोटी होती है. सामान्य आकार के मामले में, इसे थोड़ा ज़्यादा आसान बनाने के लिए, ब्राउज़र को यह बताने के बीच का अंतर "1x1 और 1x5 के बीच 1px की लाल लाइन बनाएं" और "1x1 का मतलब लाल पिक्सल है. 1x2 का मतलब लाल पिक्सल है. 1x3 का मतलब लाल पिक्सल है. 1x4 का मतलब लाल पिक्सल है. 1x5 का मतलब लाल पिक्सल है." दूसरा पहलू यह है कि SVG की जानकारी देने वाली प्रकृति के लिए, ब्राउज़र से ज़्यादा जानकारी—ज़्यादा "विचार" की ज़रूरत होती है. इस वजह से, जटिल SVG फ़ाइल को रेंडर करना ज़्यादा मुश्किल हो सकता है. उसी तरह से, एक जटिल इमेज का मतलब है, निर्देशों का बहुत बड़ा सेट और बड़ा ट्रांसफ़र साइज़.
इससे पहले कि आप किसी इमेज सोर्स कैंडिडेट के बारे में तुरंत पहचान पाएं, इसे सामान्य रास्टर फ़ॉर्मैट की जगह SVG की मदद से बेहतर तरीके से दिखाने के लिए, थोड़ा ट्रायल और गड़बड़ी मिल सकती है. हालांकि, कुछ दिशा-निर्देश हैं: SVG में आइकॉन जैसे इंटरफ़ेस एलिमेंट हमेशा अच्छा काम करते हैं. तेज़ लाइनों, गहरे रंगों, और साफ़ तौर पर तय किए गए आकारों वाला आर्टवर्क, SVG के लिए ज़्यादा बेहतर विकल्प हो सकता है.
SVG एक बड़ा विषय है: यह एक पूरी मार्कअप लैंग्वेज है, जो एचटीएमएल के साथ मिलकर बनाई गई है. इसमें, यूनीक स्टाइलिंग वाले विकल्प और सुविधाएं मौजूद हैं. SVG के बारे में ज़्यादा जानकारी के लिए, MDN SVG ट्यूटोरियल देखें.