نظرة على الرسومات المتجهة القابلة للتطوير (SVG)

تم تطبيق الرسومات المتجهة على نطاق واسع في وسائل الإعلام المطبوعة. في موقع ويب ، يمكننا أيضًا إضافة رسومات متجهة باستخدام SVG أو متجه تحجيم الجرافيك. نقلا عن المواصفات الرسمية في W3.org ، يوصف SVG بأنه:

لغة لوصف الرسومات ثنائية الأبعاد في XML. يسمح SVG بثلاثة أنواع من الكائنات ßgraphic: الأشكال الرسومية المتجهة (مثل المسارات التي تتكون من خطوط ومنحنيات مستقيمة) والصور والنصوص.

لقد كانت موجودة بالفعل منذ عام 1999 وحتى 16 أغسطس 2011 ، أصبحت توصية W3C. ومع ذلك ، لا تزال SVG قليلة الاستخدام إلى حد كبير ، في حين أن هناك الكثير من المزايا في استخدام Vector بدلاً من الصورة النقطية لتقديم رسومات أو صور على موقع ويب.

مزايا SVG

فيما يتعلق بتقديم الرسومات على مواقع الويب ، توفر SVG بعض الميزات على الصورة النقطية ، والتي يتضمن بعضها:

قرار مستقل

تعتمد الصورة النقطية / الرسومات النقطية على الدقة - وهي مبنية على وحدات البكسل. ستبدو الرسومات المعروضة منقطة عند تغيير حجمها عند مستوى تكبير معين. لا يحدث ذلك مع الرسم البياني المتجه ، وهو قرار مستقل بطبيعته ، حيث يتم التعبير عن الرسم بمعادلة رياضية تجعله للتحجيم في أي مستوى التكبير مع الحفاظ على الجودة, حتى في عرض شبكية العين.

تخفيض طلب HTTP

يمكن تضمين SVG مباشرة في مستند HTML باستخدام SVG العلامة ، لذلك لا يحتاج المتصفح إلى تقديم طلب لخدمة الرسم. هذا يؤدي أيضًا إلى تحسين أداء التحميل للموقع.

التصميم والبرمجة

التضمين مباشرة مع SVG ستتيح لنا العلامة أيضًا تصميم الرسم بسهولة من خلال CSS. في وسعنا تغيير خصائص الكائن مثل لون الخلفية ، والتعتيم ، والحدود ، وما إلى ذلك بنفس الطريقة التي نقوم بها مع علامة HTML العادية. وبالمثل ، يمكننا أيضًا معالجة الرسم عبر JavaScript.

يمكن أن تكون متحركة وتحريرها

يمكن تنشيط كائن SVG عندما يستخدم عنصر الرسوم المتحركة أو من خلال مكتبة JavaScript مثل jQuery. يمكن أيضًا تحرير كائن SVG باستخدام أي محرر نصوص برمجي أو أي برنامج رسومي مثل Inkscape (مجاني) أو Adobe Illustrator.

حجم ملف أصغر

يحتوي ملف SVG على حجم ملف أصغر مقارنةً بالنقطية التي تحتوي على عرض تقديمي مشابه للرسم.

رسم الأشكال الأساسية باستخدام SVG

وفقا للمواصفات ، يمكننا رسم بعض الأشكال الأساسية مثل المستطيل ، الدائرة ، الخط ، القطع الناقص ، polyline والمضلع باستخدام SVG وحتى يتمكن المستعرض من تقديم رسم SVG ، يجب إدراج جميع عناصر الرسوم هذه داخل العلامة. دعونا نرى الأمثلة أدناه لمزيد من التفاصيل:

خط

ليرسم خط في SVG يمكننا استخدام جزء. يستخدم هذا العنصر لرسم خط مستقيم واحد ، لذلك سيتكون فقط من نقطتين, بداية و النهاية.

كما ترون أعلاه ، يتم التعبير عن إحداثيات نقطة بداية السطر مع السمتين الأوليين X1 و X2, بينما يتم التعبير عن تنسيق نقطة النهاية للخط Y1 و Y2.

هناك أيضا اثنين من السمات الأخرى ، و السكتة الدماغية و عرض السكتة الدماغية التي تستخدم لتحديد لون الحدود وعرض الحدود ، على التوالي. بدلاً من ذلك ، يمكننا أيضًا تحديد هذه السمات ضمن نمط مضمّن ، مثل:

في النهاية فقط يفعل نفس الشيء.

• عرض تجريبي “خط”

شكل متعدد الخطوط

انها مماثلة تقريبا ل , لكن مع عنصر يمكننا رسم خطوط متعددة بدلا من واحد فقط. هنا مثال:

العنصر لديه نقاط السمات التي تخزن جميع الإحداثيات التي تشكل الخطوط.

• عرض تجريبي “شكل متعدد الخطوط”

مستطيل

رسم مستطيل هو أيضا بسيط مع هذا جزء. نحتاج فقط إلى تحديد العرض والارتفاع ، مثل ذلك:

• عرض تجريبي “مستطيل”

دائرة

يمكننا أيضا رسم دائرة مع جزء. في المثال التالي ، سنقوم بإنشاء دائرة بها 100 نصف القطر الذي يعرف مع ص صفة، عزا:

أول اثنين من السمات, CX و قبرصي يتم تحديد تنسيق مركز الدائرة. في المثال أعلاه ، وضعناها 102 سواء بالنسبة لل س و ذ تنسيق ، إذا لم يتم تحديد هذه السمات, 0 سيتم اتخاذها كقيمة افتراضية.

• عرض تجريبي “دائرة”

الشكل البيضاوي

يمكننا رسم القطع الناقص . يعمل بشكل مشابه تمامًا للدائرة ، لكن هذه المرة يمكننا التحكم بشكل خاص في س خط دائرة نصف قطرها و ذ خط دائرة نصف قطرها مع آر إكس و راي صفة، عزا؛

• عرض تجريبي “الشكل البيضاوي”

المضلع

مع ال عنصر ، يمكننا رسم جوانب متعددة من الأشكال مثل مثلث ، مسدس وحتى مستطيل. هنا مثال:

• عرض تجريبي “المضلع”

باستخدام Vector Graphics Editor

كما ترون ، من السهل جدًا رسم الكائنات البسيطة باستخدام SVG في HTML. ومع ذلك ، عندما يصبح الكائن أكثر تعقيدًا ، فإن هذه الممارسة لم تعد مثالية وستعطيك صداعًا.

لحسن الحظ ، كما ذكرنا أعلاه ، يمكننا استخدام محرر رسومات متجه مثل أدوبي المصور أو إنكسكيب للقيام بهذه المهمة. إذا كنت معتادًا على هذه البرامج ، فمن المؤكد أنه من الأسهل كثيرًا رسم الكائنات باستخدام واجهة المستخدم الرسومية الخاصة بهم بدلاً من تشفير الرسم بنفسك في علامة HTML.

إذا كنت تعمل مع إنكسكيب, يمكنك حفظ الرسم المتجه كـ SVG عادي ، ثم فتحه في محرر نصوص. الآن ، يجب أن تجد رموز SVG في الملف. انسخ جميع الرموز والصقها داخل مستند HTML.

أو ، يمكنك أيضا تضمين .SVG ملف من خلال واحد من هذه العناصر ؛ تضمين, IFRAME و موضوع, على سبيل المثال؛

النتائج ستكون في النهاية هي نفسها.

في هذا المثال ، أستخدم Apple iPod من OpenClipArt.org.

• عرض تجريبي “بود”

دعم المتصفح

فيما يتعلق بدعم المستعرض ، تم دعم SVG جيدًا في جميع المتصفحات الرئيسية ، باستثناء IE8 والإصدارات السابقة. ولكن يمكن حل هذه المشكلة باستخدام مكتبة JavaScript هذه ، والتي تسمى Raphael.js. لتسهيل الأمور ، سنستخدم هذه الأداة ، ReadySetRaphael.com لتحويل رمز SVG الخاص بنا إلى تنسيق يدعمه Raphael. إليك الطريقة.

بادئ ذي بدء ، تحميل وتشمل Raphael.js مكتبة إلى مستند HTML الخاص بك. ثم ، قم بتحميل .SVG الملف إلى الموقع ، انسخ والصق الشفرة التي تم إنشاؤها داخل التحميل التالي وظيفة.

 window.onload = function () // رمز رافائيل يذهب هنا 

داخل ال الجسم العلامة ، ووضع ما يلي شعبة مع RSR سمة معرف

هذا كل شيء ، لقد انتهيت. تحقق من المثال من الرابط أدناه.

• عرض تجريبي “رافائيل”

افكار اخيرة

هذا هو الأساسيات مع SVG. نأمل الآن أن يكون لديك فهم عادل لهذا الموضوع. إنها أفضل طريقة لتحسين موقعك لأي دقة شاشة ، حتى للاستخدام على شاشة Retina.

كما هو الحال دائمًا ، إذا كنت شخصًا مغامرًا ، فقد وضعنا هنا بعض المراجع والمناقشات لمزيد من البحث في هذا الموضوع..

• مقدمة إلى المدارس SVG - W3
• قرار مستقل مع مجلة SVG - Smashing
• لماذا لا تستخدم SVG؟ - NetTuts

شكرا للقراءة ونأمل أن تستمتع بهذا المنشور.

• عرض تجريبي
• تحميل المصدر