الرسومات المتجهة هي طريقة لتوصيل سلسلة من الأشكال والإحداثيات والمسارات إلى سياق العرض. إنها مجموعة من التعليمات حول كيفية رسم صورة. عندما يتم تكبير هذه الصورة أو تصغيرها، تتم إعادة رسم مجموعة النقاط والخطوط التي تمثلها الصورة لتغيير حجمها. ستتم إعادة رسم منحنى متجانس بين نقطتين على نحو مماثل تمامًا للطريقة التي تتم بها إعادة رسم الحد المحدد في CSS على عنصر HTML عندما يتم تغيير حجم هذا العنصر في إطار العرض.
الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) هي لغة ترميزية مستندة إلى XML تم تطويرها من قِبل فريق W3C. إنه تنسيق صورة متجه مصمم للشبكة الحديثة.
سيسمح لك أي برنامج تصميم مخصص لتعديل العمل الفني المتّجهي بتصدير صورة بتنسيق SVG. ولكن نظرًا كونه لغة ترميزية موحّدة يمكن للإنسان قراءتها، يمكن أيضًا إنشاء SVG وتعديله باستخدام أي برنامج لتعديل النصوص، بغض النظر عن البرنامج المستخدَم لإنشائه، على الرغم من أن ذلك يصبح بسرعة غير واقعية بالنسبة إلى الصور ذات أي تعقيدات حقيقية. يمكن تصميم SVG باستخدام CSS أو يحتوي على JavaScript ينشئ سلوكيات وتفاعلات في الصور ذاتها.
وحتى أبعد من الجاذبية الواضحة للمصممين والمطورين، يعد تنسيق SVG أيضًا تنسيقًا قويًا بشكل لا يصدق من حيث تجربة المستخدم النهائي. غالبًا ما تكون المعلومات الوصفية الواردة في مصدر SVG مضغوطة بشكل كبير مقارنةً بالمعلومات التي تعتمد على شبكة البكسل في تنسيقات الصور النقطية، في حال استخدام أشكال بسيطة — المبالغة في التبسيط إلى حد ما، فإنّ الفرق بين إخبار المتصفح "ارسم خطًا أحمر بحجم 1 بكسل بين 1×1 و1×5" و"1×1 هو بكسل أحمر. 1×2 هو بكسل أحمر. 1×3 هو بكسل أحمر. 1×4 هو بكسل أحمر. 1×5 بكسل هو بكسل أحمر". ويتمثل الجانب الآخر في أن الطبيعة الوصفية لتنسيق SVG تتطلب مزيدًا من التفسير من المتصفح. لهذا السبب، قد ينتج عن عرض رسومات SVG المعقدة المزيد من الضرائب. وعلى نفس المنوال، قد تعني الصورة شديدة التعقيد مجموعة مطوَّلة من التعليمات وحجم نقل كبير.
قد يتطلب الأمر بعض التجربة والخطأ قبل أن تتمكن من التعرف على الفور على مرشح مصدر صورة على أنه يعرضه SVG بشكل أفضل بدلاً من تنسيق نقطي تقليدي. ومع ذلك، هناك بعض الإرشادات: يتم دائمًا عرض عناصر الواجهة مثل الرموز بشكل جيد من خلال تنسيق SVG. من المحتمل أن يكون العمل الفني الذي يحتوي على خطوط حادة وألوان خالصة وأشكال محددة بوضوح مرشحًا قويًا لتنسيق SVG.
يشكّل تنسيق SVG موضوعًا مهمًا للغاية، إذ إنّه لغة ترميزية كاملة تم تصميمها لتتواجد إلى جانب لغة HTML، مع توفير خيارات وإمكانات تصميم فريدة. للحصول على مقدمة أكثر تفصيلاً عن SVG، اطّلع على البرنامج التعليمي MDN SVG.