freeCodeCamp

10 KiB

Raw Blame History

title	localeTitle
SVG	SVG

SVG

SVG أو Scalable Vector Graphics هو معيار ويب لتعريف الرسومات المستندة إلى المتجهات في صفحات الويب. استنادًا إلى XML ، يوفر معيار SVG ترميزًا لوصف المسارات والأشكال والنص داخل إطار العرض. يمكن تضمين الترميز مباشرةً في HTML لعرضه أو حفظه في ملف .svg وإدراجه مثل أي صورة أخرى. يمكنك كتابة SVG باليد ، ولكن يمكن تصميم رسومات أكثر تعقيدًا في محررات الرسومات المتجهة مثل Illustrator أو InkScape وتصديرها إلى ملفات SVG أو رمز.

اس اف جي اساسيات

يبدأ المطوّرون رسم SVG باستخدام العلامة <svg> ومساحة اسم XML كما يلي:

يتضمن النموذج أيضًا سمة version . سمة version اختيارية ولكن يُنصح باستخدامها مع مواصفات XML.

لن تعرض هذه العينة أي شيء ، وإنما تنشئ مجرد إطار عرض. يمكنك إضافة سمات height width لتعيين حجم عرض لإطار العرض ، مما يؤدي إلى إنشاء لوحة قماشية لك للعمل بها.

باستخدام منفذ العرض ، يمكنك إضافة الرسومات الأساسية والنصوص وعناصر المسار.

يمكنك رؤية الإخراج واللعب باستخدام الكود الموجود في codepen هذا .

في علامة svg الافتتاحية ، نضيف سمة عرض لتعيين عرض إطار العرض إلى 100٪ من عرض الحاوية ، يمكنك استخدام النسب المئوية أو عرض البكسل. تشتمل علامة svg الافتتاحية أيضًا على سمة viewbox تحدد نافذة من خلالها تكون عناصر svg مرئية ، في هذه الحالة ، يمتد صندوق العرض من (0،0) إلى (600،300). في مساحة SVG ، يبدأ المحور X بصفر على اليسار ويزيد إلى اليمين. يبدأ المحور Y بصفر في الأعلى ويزيد باتجاه الأسفل.

العلامة الجديدة الأولى هي العلامة <rect /> التي تحدد مستطيلاً في منفذ العرض SVG. في هذه الحالة ، نحدد مربعًا مكونًا من 10 وحدات من الأعلى واليسار و 100 وحدة طويلة وعريضة. ل fill السمة يحدد لون التعبئة للشكل.

بعد ذلك ، نحدد دائرة أو بيضاوية بعلامة <circle /> . تحدد العينة دائرة متمركزة في (240،60) مع نصف قطر 50 وحدة. و stroke و stroke-width سمات مجموعة لون السكتة الدماغية وحجم الجلطة.

يمكنك إضافة نص إلى الرسم باستخدام علامة text . يرتكز نموذج النص من منتصف النص إلى نقطة في (450 ، 70) ولديه حجم خط يبلغ 20 وحدة. الشيء الجميل حول النص في SVG هو أنه سيتم قياسه مع بقية الرسم ، ولكن لا يزال يمكن قراءته بواسطة المتصفح وبرامج شبكة الويب.

عندما تريد تطبيق نفس السمات أو أنماط CSS على عناصر SVG متعددة ، يمكنك تجميعها باستخدام العلامة <g> . السمات المخصصة ل <g> العلامة، مثل stroke السمة في سبيل المثال، سيتم تطبيقها على جميع العناصر داخل المجموعة. في هذه الحالة ثلاثة عناصر <path /> .

يحدد عنصر <path /> مسار متجه في منفذ العرض. يتم تعريف المسار بواسطة السمة d . في المثال الأول يقرأ تعريف "الانتقال إلى مطلق تنسيق (10، 170)، ورسم خط إلى الإحداثيات النسبية 590 في اتجاه X و 0 في الاتجاه Y.

يمكن استخدام الأوامر التالية لإنشاء المسار الخاص بك:

م = الانتقال إلى L = سطر ل H = خط أفقي إلى V = خط عمودي لـ ض = المسار القريب C = (بيزيك مكعب) منحنى ل S = منحنى سلس إلى س = منحنى بيزيري تربيعي إلى T = منحنى بيزيري تربيعي سلس أ = قوس

عنصر اللوحة

يمكن رسم الرسومات قماش على

جزء. يمكنك إعطاء سمات العرض والارتفاع الخاصة بعنصر sucهان لتحديد حجمه بالبكسل. قماش جديد فارغ ، بمعنى أنه شفاف تمامًا ويظهر ببساطة كمساحة فارغة في المستند. ال

تهدف العلامة إلى دعم أنماط مختلفة من الرسم.للحصول على واجهة رسم فعلية ، نحتاج أولاً إلى إنشاء سياق ، وهو كائن تقدم أساليبه واجهة الرسم. يوجد حاليًا نمطان للرسم معتمد على نطاق واسع: "2d" للرسومات ثنائية الأبعاد و "webgl" للرسومات ثلاثية الأبعاد من خلال واجهة OpenGL.

يتم إنشاء سياق من خلال أسلوب getContext على

جزء.

Before canvas .

< canvas width ="120" height ="60" > </ canvas >

After canvas .

< script > var canvas = document . querySelector (" canvas ") ; var context = canvas . getContext ("2 d ") ; context . fillStyle = " red "; context . fillRect (10 , 10 , 100 , 50) ; `

بعد إنشاء كائن السياق ، يرسم المثال مستطيلًا أحمر 100 وحدات البكسل عريضة و 50 بكسل عالية ، مع الزاوية العلوية اليسرى في الإحداثيات (10،10).

رسم مخطط دائري

يحتوي متغير النتائج على مصفوفة من الكائنات التي تمثل ردود المسح.

var results = [ { name : " Satisfied " , count : 1043 , color : " lightblue "} , { name : " Neutral " , count : 563 , color : " lightgreen "} , { name : " Unsatisfied " , count : 510 , color : " pink "} , { name : " No comment " , count : 175 , color : " silver "} ];

لرسم مخطط دائري ، نرسم عددًا من الشرائح الدائرية ، تتكون كل منها من قوس وزوج من الخطوط إلى مركز هذا القوس. يمكننا حساب الزاوية المأخوذة من كل قوس بقسمة دائرة كاملة (2 π) على العدد الإجمالي للاستجابات ثم ضرب ذلك العدد (زاوية لكل استجابة) بعدد الأشخاص الذين اختاروا اختيارًا معينًا.

`< canvas width ="200" height ="200" > </ canvas > < script > var cx = document . querySelector (" canvas ") . getContext ("2 d ") ; var total = results . reduce ( function ( sum , choice ) { return sum + choice . count ; } , 0) ;

// Start at the top

var currentAngle = -0.5 * Math . PI ; results . forEach ( function ( result ) { var sliceAngle = ( result . count / total ) * 2 * Math . PI ; cx . beginPath () ; // center =100 ,100 , radius =100 // from current angle , clockwise by slice ' s angle cx . arc (100 , 100 , 100 , currentAngle , currentAngle + sliceAngle ); currentAngle += sliceAngle ; cx . lineTo (100 , 100) ; cx . fillStyle = result . color ; cx . fill () ; }) ; </ script > `

هذا يرسم المخطط التالي:

دعم المتصفح

يتوفر دعم المتصفح لـ SVG في جميع المتصفحات الحديثة. هناك بعض المشكلات المتعلقة بالقياس في IE 9 من خلال IE 11 ومع ذلك يمكن التغلب عليها باستخدام width height viewbox و CSS.

المحررين

Vectr - أداة ويب و سطح المكتب fot إنشاء وتحرير رسومات SVG ، مجانًا

أدوات لإنشاء SVG

هناك عدد قليل من الأدوات المتاحة لإنشاء SVG في شكل برنامج رسم.

Inkscape - وهو أداة مفتوحة المصدر لرسم المتجهات الحديثة مع واجهة رسومية سهلة الاستخدام.
Adobe Illustrator - Adobe Illustrator هو أداة تجارية لـ Vector Imagery.

لمزيد من الأدوات ، ارجع إلى قائمة W3C الخاصة بالأدوات التي تدعم SVG

لماذا يجب عليك استخدام SVGs

كتنسيق صورة متجه ، فإنه يسمح لك بتغيير حجم الصورة دون أي فقدان للجودة وخفة الوزن بشكل خاص. كتنسيق XML ، فإنه يسمح لك بالاستفادة من القوة الكاملة لجافا سكريبت وخصوصًا CSS.

10 KiB Raw Blame History Unescape Escape

SVG