كتاب الجرافيك الأقوي - صخرة الأساس في SVG حسونة اكاديمي

‫الرسوم قابلة التحجيم ‪SVG‬‬
‫نبذه مختصرة‬
‫هذا الكتاب يعد للقارئ‬
‫بمثابة صخرة قوية ثابته‬
‫بفضل اهلل من األساس في‬
‫عالم الويب‪ ،‬مع عالم‬
‫‪ SVG‬الرائع وأهم‬
‫تفاصيلها من البداية الى‬
‫االحتراف بفضل اهلل‪ ،‬حيث‬
‫تبدأ من الصفر وتتعلم‪ ،‬ثم‬
‫تتأسس‪ ،‬ثم تطبق‪ ،‬ثم تتعلم‬
‫أكثر‪ ،‬ثم تطبق أكثر‪ ،‬ثم‬
‫تتأسس وتتعلم أكثر وأكثر‪،‬‬
‫"صخرة األساس"‬ ‫ثم تمارس أكثر وتستمر في‬

‫التطبيق‪ ،‬ثم تصل الى‬
‫االحتراف بفضل اهلل‬
‫‪BASIC ROCK‬‬ ‫احمد حسونة‬

‫صخرة األساس ‪SVG‬‬
‫تأليف‪ :‬احمد حسونة عام ‪2019‬‬

‫بفضل للا‬ ‫لغة ‪ CSS‬من البداية إلى االحتراف – من اكاديمية حسونة‬
‫صخرة األساس ‪ -‬ادخل واشترك وشاهد وشارك ‪ 🔔+‬ليصلك كل جديد‬ ‫أكاديمية حسونة‬
‫‪www.hassouna-academy.com www.youtube.com/user/HassounaAcademy‬‬
‫فهرس المحتويات ‪Index‬‬

‫المحتويات‬
‫فهرس المحتويات ‪1................................... Index‬‬
‫مقدمة أساسية – هامة جداً‪6..................................‬‬
‫دعم الكتاب‪10 ...................................................‬‬
‫هام جداً ‪ Very Important‬قبل الكتاب ‪11 ...........‬‬
‫شرح مرئي لهذا الكتاب ‪12 .......................................‬‬
‫شرح كتاب صخرة األساس ‪12 ........................SVG‬‬
‫شرح كتاب صخرة األساس ‪12 ........................ CSS‬‬
‫شرح كتاب صخرة األساس ‪12 .................... HTML‬‬
‫ما هي الرسوم قابلة التحجيم ‪13 ...................... SVG‬‬
‫قبل البداية في عالم ‪14 .................................SVG‬‬
‫أساس للـ ‪15 ........................................... SVG‬‬
‫ثمرة ‪ – SVG‬هام جداً ‪16 ..................................‬‬
‫الوسم ‪26 ................................................. svg‬‬
‫الوسم ‪27 ................................................ line‬‬
‫صفحة رقم ‪1‬‬
‫ادخل وسجل حساب على الموقع اآلن ‪www.hassouna-academy.com‬‬
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
30 .................. stroking )‫تصميمات اإلطار(التخطيط‬
35 ............................................. circle ‫الوسم‬
39 ..................................................... a ‫الوسم‬
40 ...............................................desc ‫الوسم‬
41 ................................................rect ‫الوسم‬
47 ........................................... ellipse ‫الوسم‬
53 ................................................ text ‫الوسم‬
56 ............................................ image ‫الوسم‬
57 .........................................polygon ‫الوسم‬
71 .........................................polyline ‫الوسم‬
74 ................................................title ‫الوسم‬
75 .....................................SVG ‫ مع‬CSS ‫لغة‬
79 ........................... LinearGradient ‫الوسم‬
84 ........................... RadialGradient ‫الوسم‬
93 ............................................... path ‫الوسم‬
93 ........................................ path ‫عن الوسم‬
PAGE 2
Create Account Now www.hassouna-academy.com
‫استخدام ‪94 ...................................Move To‬‬

‫استخدام ‪95 .....................................Line To‬‬
‫استخدام ‪104 ............. Cubic Bezier Curve‬‬
‫استخدام ‪126 ..... Quadratic Bezier Curve‬‬
‫استخدام ‪138 .............Elliptical Arc Curve‬‬
‫استخدام ‪152 ................................Clip Path‬‬
‫استخدام ‪155 ............................. Close Path‬‬
‫تكرار النقاط ‪157 ..............................................‬‬
‫مثال بناء بالوسم ‪160 ............................... path‬‬
‫مثال قلب بالوسم ‪161 ............................... path‬‬
‫مثال بيت بالوسم ‪162 ................................path‬‬
‫الوسم ‪163 ......................................textPath‬‬
‫الوسم ‪ g‬للتجميع والوسم ‪164 ......................... use‬‬
‫استخدام المؤثرات ‪167 ............................ Filters‬‬
‫الوسم ‪169 ..................................... feFlood‬‬
‫الوسم ‪171 ..................................... feBlend‬‬

172 ......................... feColorMatrix ‫الوسم‬
174 ....................... feGaussianBlur ‫الوسم‬
175 ........................ feDropShadow ‫الوسم‬
176 ..........................................‫الوسوم األخرى‬
179 ................... Responsive ‫انتاج شكل متجاوب‬
182 ........................................ symbol ‫الوسم‬
183 ......................................... switch ‫الوسم‬
184 ........................................pattern ‫الوسم‬
205 ........................................marker ‫الوسم‬
209 ............................................mask ‫الوسم‬
212 ...................................... Animate ‫الوسم‬
216 ......................... animateMotion ‫الوسم‬
223 ................... animateTransform ‫الوسم‬
228 .........................................SVG ‫انتاج ملف‬
230 ............................ ‫ واستخدامه‬SVG ‫إنشاء ملف‬
232 ............ Practical exercises‫تمارين عملية‬
PAGE 4
‫رسم تقديري للكعبة المشرفة ‪232 ........................ 3D‬‬

‫رسم سيارة ‪234 ...............................................‬‬
‫رسم نخلة‪236 .................................................‬‬
‫رسم األهرامات ‪244 ..........................................‬‬
‫رسم وجه متحرك العينين‪247 ................................‬‬
‫رسم سفينة ‪263 ...............................................‬‬
‫تقرير مرتبات الموظفين ‪288 ...................................‬‬
‫معلومات عن بعض الوسوم‪300 ................................‬‬
‫‪303 .....................................‬‬ ‫دورات األكاديمية‬
‫شكر خاص‪314 ..................................................‬‬
‫نشكرك على قراءتك‪315 .........................................‬‬
‫المراجع ‪316 .............................. References‬‬
‫الختام ‪317 ..................................... The End‬‬

‫‪CSS Zero to Hero – From Hassouna Academy‬‬
‫‪Hassouna Academy‬‬ ‫🔔‪Basic Rock - Like - Subscribe - Share – Views +‬‬
‫مقدمة أساسية – هامة جداً‬

‫بسم اهلل الرحمن الرحيم والصالة والسالم على أشرف المرسلين سيدنا‬
‫محمد الذي أرسله اهلل رحمة للعالمين‪ ،‬وأشهد أن ال إله إال اهلل وحده ال‬
‫شريك له‪ ،‬الذي لم يتخذ ولدا ولم يكن له شريك في الملك وخلق كل شيء‬
‫فقدره تقديرا ‪ ،،،‬ثم أما بعد‪...‬‬
‫الشيء الوحيد الذي أخبر اهلل رسوله محمد ﷺ أن يطلب فيه الزيادة هو‬
‫دنِي عِلْ ًما)‬ ‫ب زِ ْ‬ ‫ِ‬
‫العلم عندما قال اهلل سبحانه وتعالي في سورة طه ( َوقُلْ َر ِّ‬
‫ك الَّ ِذي خَلَ َق (‪ )1‬خَلَ َق‬ ‫اس ِم َربِِّ َ‬
‫‪ ،‬وأول ما نزل من القرآن الكريم (اقَْرأْ بِ ْ‬
‫ك َرمُ (‪ )3‬الَّ ِذي عَلَّمَ بِالْقَلَِم (‪ )4‬عَلََّم‬ ‫ك ْاْلَ ْ‬‫ان مِ ْن عَلَ ٍق (‪ )2‬اقَْرأْ َو َربُّ َ‬‫ْاْلِ ْن َس َ‬
‫ان َما لَ ْم يَ ْعلَ ْم) ‪ ،‬ورفع اهلل من قدر وشأن العلماء حينما قال (يَ ْرفَِع‬ ‫ْاْلِ ْن َس َ‬
‫آمنُوا مِنكُ ْم والَّ ِذين أُوتُوا الْعِلْمَ دَرج ٍ‬ ‫َّ ِ‬
‫ات) ‪ ،‬وبين اهلل عز وجل‬ ‫ََ‬ ‫َ َ‬ ‫اَّللُالَّذ َ‬
‫ين َ‬
‫أن العلماء ال يتساوون في القدر مع من ال يعلم فقال جل في عاله (قُ ْل‬
‫ون إِنََّما يَتَذَكَّ ُر أُولُو ْاْلَْلبَ ِ‬ ‫ِ‬ ‫ِ‬
‫اب) ‪،‬‬ ‫ون َوالَّذ َ‬
‫ين ََل يَ ْعلَ ُم َ‬ ‫َهلْ يَ ْستَوِي الَّذ َ‬
‫ين يَ ْعلَ ُم َ‬
‫وأيضاً أخبرنا رب العزة سبحانه أن من يخشونه هم العلماء حين قال في‬
‫ادهِ ا ْل ُعلََم ُاء) ‪ ،‬وهو الذي علمنا عدد‬ ‫اَّلل مِن عِب ِ‬
‫كتابه العزيز (إِنََّما يَ ْخشَى ََّ ْ َ‬
‫السنين والحساب حين قال (هو الَّ ِذي جعل الشَّم ِ‬
‫ورا َوقَدََّرهُ‬
‫س ضيَاءً َوالْقََم َر نُ ً‬ ‫ََ َ ْ َ‬ ‫َُ‬
‫ق يفَ ِصل اآلي ِ‬ ‫اَّللُذَلِ َ‬ ‫السنِ َ ِ‬ ‫ِ‬ ‫ِ‬
‫ات‬ ‫ك إَِل بِالْ َح ِِّ ُ ِّ ُ َ‬ ‫اب َما خَلَ َق َّ‬
‫ين َوالْح َس َ‬ ‫َمنَازِلَ لتَ ْعلَ ُموا عَدَدَ ِّ‬
‫ون) ‪ ،‬وك ما نري أن العلم قدرة عالي وال يطلبه إال غالي أدرك‬ ‫ِ ٍ‬
‫لقَ ْوم يَ ْعلَ ُم َ‬
‫عاله‪.‬‬
‫‪PAGE 6‬‬
‫‪Create Account Now www.hassouna-academy.com‬‬
‫ولقد عزمت بإذن اهلل تعالي أن أقدم أفضل ما لدي من علوم في مجاالت‬
‫الحاسب اآللي (الكومبيوتر)‪ ،‬ألنه يفيد في جميع مناحي الحياة‪ ،‬فإذا تحدثنا‬
‫عن شركة تجارية فهي تستخدم الكمبيوتر لتدوين وحساب جميع اعمالها‬
‫من انتاج وتسويق ورواتب وغيرها‪ ،‬وإذا تحدثنا عن مدرسة أو كلية أو‬
‫معهد‪ ،‬فجميعها تستخدم الكمبيوتر في أعمالها وتظهر نتائج االمتحانات‬
‫والجداول‪ ،‬بل وبعض المؤسسات التعليمية الحديثة تمتحن الطالب ببرامج‬
‫ذكية متطورة‪ ،‬وفي الهيئات الحكومية يتم استخدام الكمبيوتر أيضاً‪ ،‬وأصبح‬
‫الحاسب يفعل كل شيء في حياتنا فلقد صعد اإلنسان في اآلفاق والفضاء‬
‫بالحاسب‪ ،‬ونشاهد به الفيديو ونشغل به الصوت ونطبع به الوثائق‬
‫والمستندات ونصور به الصور واألوراق وندير به كافة المجاالت‪ ،‬وال نقتصر‬
‫على هذا فحسب‪ ،‬بل ولو قلت لك أن الحاسب قد يغير في حياة أسرة‬
‫بأكملها وينجيها بفضل اهلل ‪ ،‬سوف تتعجب وتقول كيف ؟! – والجواب هو‬
‫كم من رجل كان على حافة االنهيار المادي والمعنوي بسبب فقده لوظيفته‪،‬‬
‫ففتح اهلل علية بتعلم الحاسب ورزقه اهلل بعمل جيد ورزق وفير‪ ،‬وكم من‬
‫شاب كان على حافة االنحراف األخالقي بسبب األخالق السيئة المتداولة بين‬
‫الشباب إال من رحم ربي‪ ،‬فمن اهلل علية بأن بدء في تعلم مجاالت الحاسب‬
‫فأحبها وبدء يبني مستقبلة الحقيقي‪.‬‬
‫المحتوي الذي سوف نتعلمه يتكون من مواضيع تتبع بعضها بعض‪ ،‬ومنظمة‬
‫بطريقة تسلسلية بحيث تأخذ بيدك خطوة بخطوة من البداية إلى االحتراف‬
‫بفضل اهلل‪ ،‬وسوف أتبع نظام في شرح هذا المحتوي مثل صعود الطائرة‪،‬‬
‫ففي البداية يتم التنبيه على الركاب ببعض اإلرشادات بالتفصيل الدقيق‪ ،‬ثم‬

‫في بداية اإلقالع يكون األمر صعباً ثم نطير إلى أعلي ونحلق في الفضاء‪،‬‬
‫وسوف نبدأ بإذن اهلل بالتفصيل ثم نعلوا‪ ..‬ونعلوا ‪ ،‬ثم نحلق ونحترف بإذن‬
‫اهلل‪ ،‬فإنني أنصح القارئ أن يهتم بجميع الموضوعات مرتبة‪ ،‬فعسي كلمة‬
‫أن تغير بفضل اهلل‪ ،‬والمحتوي تم تأليفه بكامل الحب واإلخالص لجميع‬
‫القراء‪ ،‬ولن يأخذ نسخ ولصق‪ ،‬بل وحتي المحتويات التاريخية الموجودة‬
‫داخل المحتوي تم صياغتها بأساليب مختلفة من أكثر من مكان معلوماتي‪،‬‬
‫والمؤلف وضع كل خبرته بكل الحب لجميع أحبائه القارئين لهذا المحتوي‪،‬‬
‫والكمال هلل وحدة‪ ،‬ونحن ال نعلم إال قليالً كما قال اهلل في القرآن‬
‫ن ا ْلعِْل ِم إََِّل‬ ‫ِ ِ‬
‫أَمرِ َربِِّي َو َما أُوتيتُم مِّ َ‬
‫الر ِ‬
‫الرو ِح ۖ قُ ِل ُّ ُ‬
‫وح م ْن ْ‬ ‫ك عَ ِن ُّ‬
‫( َويَ ْسأَلُونَ َ‬
‫قَلِ ًيل )‪.‬‬
‫وفي الختام أسأل اهلل تبارك وتعالي بأسمائه الحسني وصفاته العال أن يفيد‬
‫جميع القراء بهذا المحتوي‪ ،‬ويغير في حياتهم إلى األفضل إن شاء اهلل‪.‬‬
‫كما أحب أن اشجع الجميع على العطاء في العلم‪ ،‬فإذا كنت تعلم أي‬
‫معلومة ال تبخل على غيرك بها أبداً‪ ،‬وتأكد أن اهلل سوف يكرمك بذلك‬
‫ويمن عليك بمعلومات أفضل بكثير من الذي لديك‪ ،‬ولقد أمرنا رسول اهلل‬
‫كامل األخالق أن نحب الخير إلخواننا كما نحبه ألنفسنا حين قال (حب‬
‫ألخيك ما تحب لنفسك)‪ ،‬وهذا الموضوع هام للغاية ألنه ينهض بالمجتمع‬
‫ككل‪ ،‬فإذا تعلمت شيء وعلمته ألخيك أو زميلك فسوف يأخذ فكرتك ثم يبتكر‬
‫عليها ابتكارا مختلفاً من ابتكارك‪ ،‬ألن اهلل خلق البشر بعقول ومميزات‬
‫مختلفة‪ ،‬ثم يعلم زميلك معلومتك ومعلومته لزميل آخر‪ ،‬فيبتكر ابتكاراً‬
‫ثالثاً مختلفاً عن األول والثاني‪ ،‬وهكذا‪ ،‬ولو حدث هذا على مستوي المجتمع‬
‫‪PAGE 8‬‬
‫نهض المجتمع وكثرت ابتكاراته واختراعاته‪ ،‬وال أقصد مجال الحاسب اآللي‬
‫فحسب‪ ،‬ال‪ ،‬بل أقصد جميع المجاالت في جميع مناحي الحياة‪ ،‬وإذا قابلت‬
‫شخص طلبت منه معلومة وبخل عليك‪ ،‬ثم بعد ذلك طلب منك معلومة ال‬
‫تفعل مثلة‪ ،‬بل اعطية المعلومة على الفور ولمح له أن هذا هو الصحيح‪،‬‬
‫وسوف يؤثر هذا علية ويغير حالة إلى العطاء‪ ،‬وهذا حدث معي شخصياً‬
‫أكثر من مرة‪ ،‬وأثبتت لي التجربة أن هذا هو الصحيح‪.‬‬
‫كما أحب أن انوه أنه غير مسموح ألي فرد أو شركة أو هيئة أو منظمة‬
‫أو مؤسسة أو قطاع من أي نوع أن يتربح أو يتاجر بهذا المحتوي بأي‬
‫نوع أي كان‪ ،‬أو يعيد كتابته‪ ،‬أو ينسخه بغير حق ليغير االسم‪ ،‬أو أي‬
‫عملية تحويل كتاب ‪ pdf‬الى أي نوع أو التعديل عليه‪ ،‬ولن اسامح أي‬
‫شخص تسبب في ذلك‪ ،‬ولن أتركه يوم القيامة‪ ،‬وعند اهلل تجتمع الخصوم‪.‬‬
‫وسوف تجد شرح فيديو لهذا المحتوي بالتفصيل مجاناً للمشاهدة فقط على‬
‫أكاديمية حسونة في الموقع أو اليوتيوب على الرابطين التاليين‪:‬‬
‫‪www.hassouna-academy.com‬‬
‫‪www.youtube.com/user/hassounaacademy‬‬
‫والسالم عليكم ورحمة اهلل وبركاته‪.‬‬
‫المؤلف‪ :‬احمد حسونة‬

‫دعم الكتاب‬
:‫تم دعم هذا الكتاب بواسطة كل من‬
‫• أحمد محمد باريان من مكة المكرمة‬

‫• أحمد حسونة من مصر‬
.‫وذلك بالتعاون مع أكاديمية حسونة‬
PAGE 10
‫هام جداً ‪ Very Important‬قبل الكتاب‬

‫أمانة ‪ -‬ثمن الكتاب‪ ،‬قراءة هذه الصفحة جيداً وصفحة نشكرك على قراءتك‬
‫فضالً منكم وليس أمراً‪.‬‬ ‫وصفحة مقدمة أساسية وتلبيه ما فيهم‬
‫موقع حسونة أكاديمي ←‬

‫‪https://www.hassouna-academy.com‬‬
‫قـناة حسونة أكاديمي ← ‪https://www.youtube.com/user/HassounaAcademy‬‬
‫بفضل اهلل‪ ،‬القناة عليها شرح كمبيوتر‪ ،‬وويندوز‪ ،‬ولينكس‪ ،‬وماك‪ ،‬وورد‪،‬‬
‫واكسل‪ ،‬وأكسس‪ ،‬وباور بوينت‪ ،‬ولغات برمجة كثيرة‪ ،‬وويب بتقنيات كثيرة‪،‬‬
‫وأمثلة كثيرة‪ ،‬وتطبيقات كثيرة‪ ،‬وموبايل‪ ،‬وأندرويد‪ ،‬وقواعد بيانات‪ ،‬ونظم‪،‬‬
‫وتصميم‪ ،‬وتحليل بيانات‪ ،‬وتحليل نظم‪ ،‬ومناهج دراسية‪ ،‬ووسائط متعددة‪،‬‬
‫ودردشة برمجة‪ ،‬وبرنامج مبيعات‪ ،‬وبرنامج مطاعم‪ ،‬ومعلومات متعددة‪،‬‬
‫وقصص نجاح‪ ،‬وبرامج جاهزة‪ ،‬وفوتوشوب‪ ،‬وشروحات كثيرة بفضل اهلل‪.‬‬
‫وفعل زر الجرس في القناة‬ ‫رجاء! ال تنسي أن تشترك بالقناة‬
‫اآلن‪.‬‬ ‫وسجل حساب على موقع حسونة أكاديمي‬
‫‪https://www.hassouna-academy.com/‬‬
‫شرح مرئي لهذا الكتاب‬

SVG ‫شرح كتاب صخرة األساس‬
،‫يوجد شرح مرئي مفصل لهذا الكتاب على قناة أكاديمية حسونة باليوتيوب‬
:‫ويمكنك الوصول الية عن طريق الرابط التالي‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfneZzVSo84DuwnyP9ieYt8K
CSS ‫شرح كتاب صخرة األساس‬

‫ من‬CSS ‫كما أنه يوجد أيضاً شرح كتاب صخرة األساس في اللغة‬
:‫الرابط التالي‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfkJzvWATr3oQ8mrVrTUqZ7K
HTML ‫شرح كتاب صخرة األساس‬

‫ من‬HTML ‫كما أنه يوجد أيضاً شرح كتاب صخرة األساس في اللغة‬
:‫الرابط التالي‬
https://youtu.be/KRiq7Eqfe-Q
PAGE 12
‫ما هي الرسوم قابلة التحجيم ‪SVG‬‬

‫موضوع ‪ svg‬هام جداً‪ ،‬وخصوصاً في الويب والحروف ‪ SVG‬اختصار‬
‫للكلمات ‪ ،Scalable Vector Graphics‬وتعني الرسم القابل‬
‫للتحجيم‪ ،‬بمعني أنه لو حاولت تصغير صورة أو تكبيرها عن حجمها الطبيعي‪،‬‬
‫فلن تكون جيدة وواضحة مثل الحجم الطبيعي‪ ،‬وستقل جودتها ورؤيتها‪،‬‬
‫ولكن مع ‪ svg‬تستطيع رسم اشكال متعددة لتكوين صورة معينة‪ ،‬مع العلم‬
‫أن هذه األشكال يتم رسمها بأكواد‪ ،‬وبعد ذلك إذا تم تكبيرها او تصغيرها‬
‫أو جعلها بأي حجم أي كان‪ ،‬ال تقل جودتها‪ ،‬وتكون دائماً ممتازة في‬
‫العرض‪ ،‬وممتازة في الحجم‪ ،‬وممتازة لأليقونات الصغيرة‪ ،‬وممتازة للصور‬
‫المعروضة المتوسطة الحجم‪ ،‬وممتازة للوحات اإلعالنية الكبيرة‪ ،‬وباختصار‬
‫ممتازة في احتياجات كثيرة جداً‪.‬‬
‫ويمكنك التخيل وكأنك معك رسام وطلبت منه رسم مربع او دائرة أو أي‬
‫شكل على لوحة كبيرة‪ ،‬ثم قمت باستدعاء نفس الرسام ليرسم نفس‬
‫الرسومات على لوحة صغيرة‪ ،‬فالرسام هنا سيراعي فروقات الحجم دون‬
‫أن يمط أو يشد أو يقلص‪ ،‬فالـ ‪ SVG‬تخدمك أكثر من ذلك‪.‬‬
‫الـ ‪ SVG‬تعمل بالـ ‪ Vector‬على أساس لغة ‪.XML‬‬

‫قبل البداية في عالم ‪SVG‬‬

‫قبل البدء في دراسة هذا الكتاب‪ ،‬يجب أن تكون على دراية كافية بعالم نظام‬
‫التشغيل مثل‪ Windows ،‬أو ‪ Linux‬أو ‪ ،Mac‬بجميع المفاهيم‬
‫من ملفات وامتدادات ونسخ ولصق وما شابه ذلك‪ ،‬ثم هام جداً أن تتعلم‬
‫اللغة ‪ HTML‬وأيضاً اللغة ‪ CSS‬بشكل ممتاز حتى يكون من السهل‬
‫عليك استيعاب وتطبيق محتويات الكتاب بفضل اهلل‪ ،‬ويمكن أن تبحث عن‬
‫كتب "صخرة األساس" لـ "احمد حسونة" على موقع جوجل وتحملها‬
‫وتتعلم أو تراجع منها على كل ما تحتاج‪.‬‬
‫بعد أن تذاكر كتاب "صخرة األساس" في اللغة ‪ ،HTML‬تستطيع أن‬

‫تبدأ في مذاكرة كتاب "صخرة األساس" في ‪ ،CSS‬بفضل اهلل‪ ،‬حيث أن‬
‫كتاب "صخرة األساس" في ‪ ،HTML‬يحتوي على موضوعات اللغة األم‬
‫للويب ‪ HTML‬بالتفصيل‪ ،‬ويشرح الوسوم والخصائص‪ ،‬بالتفصيل‪ ،‬ويبين‬
‫المفاهيم بوضوح‪ ،‬ويجعلك تدخل في عالم الويب من باب واسع‪ ،‬وسهل‪،‬‬
‫ويبحر معك في األمثلة العملية‪ ،‬حتى تفهم الغرض من كل وسم‪ ،‬وخاصية‪،‬‬
‫ومثال‪ ،‬فلذلك ننصح بكتاب "صخرة األساس" في ‪ ،HTML‬وكتاب‬
‫"صخرة األساس" في ‪ CSS‬يجعلك تتفنن في تصميمات الويب األكثر من‬
‫رائعة مع جميع الخصائص وقيمها والحركات مع التحكمات واالمثلة‪،‬‬
‫فلذلك ننصح بكتاب "صخرة األساس" في ‪ ،CSS‬وسنعمل بنفس الملف‬
‫الذي استخدمناه لكتاب "صخرة األساس" ‪ ،html‬وهو ‪.test.html‬‬
‫‪PAGE 14‬‬
‫أساس للـ ‪SVG‬‬

‫يجب أن تعرف وتعي ما يلي جيداً قبل البدء في ‪:SVG‬‬
‫انتبه! فإنه يوجد ملفات بامتداد ‪ svg‬ولها طريقة تصميم ودراسة‪ ،‬ولكننا‬
‫هنا لن نشرح هذا الموضوع‪ ،‬بل سوف نشرح التعامل مع ‪ svg‬داخل‬
‫اللغة ‪ ،HTML‬عن طريق الوسم ‪ ،svg‬مع تنسيقات اللغة ‪.CSS‬‬
‫عند التعامل مع الوسم ‪ svg‬نجد أن الموضوع بفضل اهلل في غاية‬

‫السهولة‪ ،‬فهو وسم له اغالق‪ ،‬ويأخذ خاصية العرض ‪ ،width‬ويأخذ‬
‫خاصية الطول ‪ ،height‬ثم يتم كتابة وسوم أخري بداخله للرسم‬
‫عليه كما نريد‪ ،‬وسنتعرف على هذه الوسوم إن شاء اهلل‪.‬‬
‫ال تستغرب عندما تستخدم خاصية في ‪ html‬بقيمة عددية او لونية او‬

‫غير ذلك‪ ،‬ونفس الخاصية بنفس االسم تكتبها في ‪ css‬وتؤدي نفس العمل‬
‫وتأخذ نفس القيم مع تمتعك بدوال الـ ‪ css‬الرائعة‪.‬‬
‫لن نهتم بالوسوم األساسية مثل ‪ html‬و‪ body‬وال حتى‬

‫‪ ،DOCTYPE‬ولكننا سوف نركز على أكواد الرسم‪.‬‬
‫البد من التركيز على الخصائص وماذا تفعل في بداية كل درس‪.‬‬

‫ثمرة ‪ – SVG‬هام جداً‬

‫عندما تتعلم الـ ‪ SVG‬وتستخدمها مع الويب سيكون األمر مختلف في‬
‫احترافك‪ ،‬حيث أنك تعمل بمجموعة من األكواد‪ ،‬فال تكون الصفحة الخاصة‬
‫بك ثقيلة في التحميل مثل الصور‪ ،‬بل وحتى الدقة تكون دائماً عالية في‬
‫األوضاع الصغيرة والمتوسطة والكبيرة‪ ،‬أو في أي حجم‪.‬‬
‫عندما تتعلم ‪ SVG‬تستطيع دمجها مع لغة ‪ html‬ولغة ‪ css‬لتنتج‬

‫تصميمات خفيفة ورائعة‪ ،‬ثم بعد ذلك تتعلم ‪ JavaScript‬فتنتج أفكار‬
‫أكثر من رائعة‪ ،‬وتستطيع استخدامها مع التطبيقات األخرى‪.‬‬
‫عندما تتعلم ‪ SVG‬تستطيع التغيير في الملفات الرسومات االحترافية‬

‫مفتوحة المصدر ‪ Open Source‬بسهولة‪.‬‬
‫عندما تتعلم ‪ SVG‬تستطيع ابتكار أفكار رسومية خاصة بك‪ ،‬ثم بيعها‬
‫والكسب منها‪.‬‬
‫عندما تتعلم ‪ SVG‬سوف تصمم ما تريد بمجموعة مفهومة وسلسة‬

‫وسهلة من األكواد الخفيفة‪ ،‬ثم تستخدم هذا التصميم‪ ،‬في البرامج‪،‬‬
‫والتطبيقات‪ ،‬والصفحات‪ ،‬والطباعة‪ ،‬والتسويق‪ ،‬وأشياء أخري كثيرة‪.‬‬
‫‪PAGE 16‬‬
‫عندما تتعلم ‪ SVG‬وتتقنها‪ ،‬تستطيع عمل تقارير احترافية ورسومات‬
‫بيانية خفيفة‪.‬‬
‫عندما تتعلم ‪ SVG‬تستطيع انشاء أشكال ثنائية األبعاد‪ ،‬أو ثالثية األبعاد‪،‬‬
‫او منظورات مختلفة حسب احترافك‪.‬‬
‫عندما تتعلم ‪ SVG‬ثم تتعلم البرمجة‪ ،‬ستكون قادر على إنشاء أشياء‬
‫غاية في االحترافية‪ ،‬وسوف تنتج بعدها ما تحب‪ ،‬من أفالم كرتونية‪ ،‬او‬
‫ألعاب‪ ،‬أو مقاطع دعائية‪.‬‬
‫عند تعلمك ‪ SVG‬تشعر وكأن معك مجموعة كبيرة من مكعبات األطفال‬

‫الملونة والمرنة‪ ،‬أو كأن معك الطين الصلصال الذي تشكل به كما تريد‪،‬‬
‫حيث تكون قطعة مع قطعة بالتداخالت مع قطع أخري‪ ،‬وهكذا‪ ،‬حتى تصل‬
‫لما تريد‪ ،‬بل تصل إلى أشياء جذابة‪.‬‬
‫عندما تنتج ملفات بامتداد ‪ svg‬ألي رسومات ‪ svg‬بأي برنامج مثل‬

‫‪ Adobe Illustrator‬أو غيره‪ ،‬ستفهمها بفضل اهلل‪ ،‬ويمكن‬
‫الرجوع الى كورس احتراف ادوبي اليستريتور إلنتاج جرافيكس احترافي‬
‫لموقع الويب الخاص بك في القناة من الرابط التالي‪:‬‬
‫‪https://www.youtube.com/playlist?list=PLHIfW1KZRIfmoeP7rnPYhXpR-Cnew4ois‬‬

‫ ولكن‬،[1], [4] ‫ تستطيع عمل األشكال التالية وأكثر‬SVG ‫وبعد تعلمك‬
:ً‫ ومنها أشكال متحركة أيضا‬،‫انتبه! فكلها من هذا الكتاب‬
PAGE 18

PAGE 20

PAGE 22

PAGE 24

‫الوسم ‪svg‬‬
‫الوسم ‪ svg‬هو األساس للرسم وكما ذكرنا يأخذ عرض وطول‪.‬‬
‫كود! قم بكتابة الكود التالي داخل العنصر ‪ body‬ثم احفظه‪:‬‬

‫>"‪<svg width="90" height="90" style="background: pink‬‬
‫>‪</svg‬‬
‫وبعد تشغيل الصفحة تظهر كما بالشكل التالي‪:‬‬
‫الحظ انه تم عمل وسم ‪ svg‬ليأخذ عرض ‪ width‬وطول‬

‫‪ ،height‬مع العلم أننا وضعنا لون خلفية لنراه فقط‪.‬‬
‫يمكن أيضاً أن نضبط خاصية الطول والعرض عن طريق اللغة ‪ css‬مثل‬
‫الكود التالي‪:‬‬
‫>";‪<svg style="width: 90; height: 90; background: pink‬‬
‫>‪</svg‬‬
‫والناتج سيكون هو‪ ،‬هو‪ ،‬مثل السابق تماماً‪ .‬ولكن اجعل العرض والطول‬
‫للوسم ‪ svg‬بـ ‪ html‬أفضل حتى ال تختلط األمور مع عرض وطول الـ‬
‫‪ css‬األساسيين‪.‬‬
‫‪PAGE 26‬‬
‫الوسم ‪line‬‬
‫الوسم ‪ line‬يتم وضعه داخل الوسم ‪ svg‬لرسم خط مستقيم‪ ،‬ويأخذ‬
‫النقطة األولي ‪ ،x1,y1‬والنقطة الثانية ‪ ،x2,y2‬بحيث يشد خط بين‬
‫النقطتين‪ ،‬ولون الخط ‪ ،stroke‬وحجم الخط ‪.stroke-width‬‬
‫كود! قم بكتابة الكود التالي داخل العنصر ‪ body‬ثم احفظه‪:‬‬

‫>"‪<svg height="120" width="300‬‬
‫"‪<line x1="10" y1="10" x2="250‬‬ ‫"‪y2="90‬‬ ‫"‪stroke="red‬‬
‫>‪stroke-width="2" /‬‬
‫>‪</svg‬‬
‫وبعد تشغيل الصفحة تظهر كما بالشكل التالي‪:‬‬
‫هنا تم وضع النقطة األولي بحيث تبعد عن الحافة اليسرى ‪ 10‬وعن‬

‫الحافة العليا ‪ 10‬عن طريق الخصائص ‪ x1‬و‪ ،y1‬ثم النقطة الثانية‬
‫التي تبعد من اليسار ‪ 250‬وتبعد من اعلي ‪ 90‬عن طريق الخصائص ‪x2‬‬
‫و‪ ،y2‬ليتم رسم الخط المستقيم بين النقطتين‪ ،‬باللون األحمر ‪red‬‬
‫للخاصية ‪ stroke‬بعرض ‪ 2‬للخاصية ‪.stroke-width‬‬

‫ بأكواد‬stroke-width ‫ وخاصية‬stroke ‫يمكن وضع خاصية‬
:‫ والكود كالتالي‬،‫ كما هم‬x1, y1, x2, y2 ‫ ولكن الخصائص‬css
<svg width="300" height="120">
<line x1="10" y1="10" x2="250" y2="90" style="stroke: red;
stroke-width:2" />
</svg>
.ً‫والتنفيذ يكون مثل السابق تماما‬
‫ بشكل جيد يمكنك صناعة‬line ‫انتبه! فإنه بعد ان قمت بمذاكرة الوسم‬
‫ وبينما أنا أقوم بتأليف هذا‬،‫ مع أنه وسم سهل‬،‫أشياء كثيرة به بالتفكير‬
:‫الجزء فقمت بتأليف رسم الشكل بالكود التالي‬
<svg width="300" height="130" style="background: #eee">
<line x1=5 y1=20 x2=250 y2=5 stroke=#f00 stroke-width=3 />
<line x1=249 y1=4 x2=249 y2=101 stroke=#00f stroke-width=3 />
<line x1=249 y1=100 x2=5 y2=120 stroke=#99f stroke-width=3 />
<line x1=6 y1=20 x2=6 y2=121 stroke=#080 stroke-width=3 />
</svg>
‫التنفيذ‬
PAGE 28
‫بفضل للا‬ ‫ من البداية إلى االحتراف – من اكاديمية حسونة‬CSS ‫لغة‬
‫🔔 ليصلك كل جديد‬+ ‫ ادخل واشترك وشاهد وشارك‬- ‫صخرة األساس‬ ‫أكاديمية حسونة‬
‫ فقد احضرت شكل لمكعب وفتحته على‬،‫بل فعلت أكثر من ذلك بفضل اهلل‬
‫ لكل خط لهذا المكعب ثم‬y‫ و‬x ‫ وأخذت النقاط‬paint ‫برنامج الرسام‬
:‫أنشأت بها مكعب بالكود التالي‬
<svg width="500" height="380" style="background: #ee9">
</svg>
svg ‫ فما بالك بباقي الـ‬،‫ فقط‬line ‫الحظ أن كل هذا بخط‬

29 ‫صفحة رقم‬
www.hassouna-academy.com ‫ادخل وسجل حساب على الموقع اآلن‬
stroking )‫تصميمات اإلطار(التخطيط‬

‫ وسيتم‬stroke-width ‫ وحجم اإلطار‬stroke ‫تعرفنا على اإلطار‬
:‫التوضيح أكثر بالكود التالي‬
<line x1=5 y1=5 x2=350 y2=90 stroke=#F00 stroke-width=3 />
<line x1=5 y1=5 x2=350 y2=120 stroke=#00F stroke-width=5 />
<line x1=5 y1=5 x2=350 y2=150 stroke=#808 stroke-width=7 />
</svg>
‫ والحظ أيضاً أن لون‬،‫وهنا الحظ أن حجم اإلطار يختلف في كل مرة‬

‫ ولكن البد أن تتعرف على خصائص أخري لشد الخطوط‬، ‫اإلطار يتغير‬
.‫ لتكون أكثر قوة أثناء رسمها‬stroking
PAGE 30
‫واآلن سنتعرف على خاصية غطاء الخط ‪ stroke-linecap‬فيكون‬
‫مستدير من األطراف بالقيمة ‪ round‬أو يكون مربع متأخر من األطراف‬
‫بالقيمة ‪ butt‬أو يكون مربع عادي من األطراف بالقيمة ‪،square‬‬
‫وسيتم توضيح ذلك بالكود التالي‪:‬‬
‫>"‪<svg width="450" height="200" style="background: #eee‬‬
‫‪<line x1=30 y1=50 x2=350 y2=50 style="stroke:#808;stroke-‬‬

‫>‪width:9;stroke-linecap:round" /‬‬
‫‪<line‬‬ ‫‪x1=30‬‬ ‫‪y1=100‬‬ ‫‪x2=350‬‬ ‫‪y2=100‬‬

‫>‪style="stroke:#808;stroke-width:9;stroke-linecap:butt" /‬‬
‫‪<line‬‬ ‫‪x1=30‬‬ ‫‪y1=150‬‬ ‫‪x2=350‬‬ ‫‪y2=150‬‬

‫"‪style="stroke:#808;stroke-width:9;stroke-linecap:square‬‬
‫>‪/‬‬
‫>‪</svg‬‬
‫الحظ أن جميع الـ ‪ Strokes‬بنفس الحجم‪ ،‬ثم غطاء الخط‬

‫‪ stroke-linecap‬يحدد األطراف‪ ،‬واالفتراضي لها هو ‪.butt‬‬

stroke-dasharray ‫واآلن سنتعرف على خاصية تقطيع الخط‬
‫التي تتحكم من خاللها في جعل الخط متقطع عن طريق مصفوفة من‬
:‫ فمثالً الحظ المثال بالكود التالي‬،‫األرقام المتتالية‬
<line x1=30 y1=50 x2=350 y2=50 style="stroke:#808;stroke-
width:5;stroke-dasharray:5,5" />
</svg>
‫ هي‬stroke-dasharray ‫الحظ أن القيمة التي أخذتها الخاصية‬

،5 ‫ ثم قطع‬5 ‫ ثم رسم‬5 ‫ ثم قطع‬5 ‫ ومعني هذا أنه يتم رسم‬5,5
:‫ ولفهمها أكثر تابع المثال بالكود التالي‬،‫وهكذا إلى نهاية الخط‬
width:5;stroke-dasharray:2,5" />
</svg>
.‫ للخط‬2,5 ‫ بالقيمة‬5 ‫ وترك‬2 ‫الحظ هنا رسم‬
PAGE 32
‫وأيضاً نالحظ مثال آخر بالكود التالي‪:‬‬
‫>‪width:5;stroke-dasharray:7,2" /‬‬
‫>‪</svg‬‬
‫الحظ هنا رسم ‪ 7‬وترك ‪ 2‬بالقيمة ‪ 7,2‬للخط‪.‬‬
‫كما يمكن أن يتم التنويع في هذا العمل‪ ،‬فال ينحصر على قيمتين يتم تكرارهم‬
‫فقط‪ ،‬وإنما يمكن تكرار ارقام كثيرة‪ ،‬وسنالحظ في الكود التالي‪:‬‬
‫>‪width:5;stroke-dasharray:20,10,10,20" /‬‬
‫>‪</svg‬‬
‫الحظ هنا رسم ‪ 20‬وترك ‪ 10‬ثم رسم ‪ 10‬وترك ‪ 20‬وهكذا يتم‬

‫التكرار على مستوي الخط بالقيمة ‪ 20,10,10,20‬في الرسم‪.‬‬

:‫ويمكن التنويع أكثر بشكل منتظم بالكود التالي‬
width:5;stroke-dasharray:30,15,7,7,7,15" />
</svg>
7 ‫ ثم رسم‬،7 ‫ وترك‬7 ‫ ثم رسم‬،15 ‫ وترك‬30 ‫الحظ هنا بدأ برسم‬

،‫ التي بدأ بها من قبل‬30 ‫ ليكون بداية التكرار من الـ‬،15 ‫وانتهي بترك‬
‫ وبنفس الفكرة كما تم تفصيلها وشرحها يمكن‬،‫ومن هنا يكون الشكل منتظم‬
:‫عملها بتطور أكثر عن طريق المثال بالكود التالي‬
width:3;stroke-dasharray:15,7,3,3,3,3,3,7" />
</svg>
.‫وهنا نالحظ أنه كلما نفهم أكثر نصنع ما نريد بفضل اهلل‬
PAGE 34
‫الوسم ‪circle‬‬
‫الوسم ‪ circle‬لرسم دائرة‪ ،‬ويأخذ نقطة مركز ‪ ،cx,cy‬ونصف القطر‬
‫‪ ،r‬ولون إطار ‪ ،stroke‬وحجم إطار ‪ ،stroke-width‬ولون‬
‫الدائرة ‪.fill‬‬
‫الكود‬
‫"‪<circle cx="150" cy="150" r="120" fill="#ADD" stroke="#008‬‬
‫>‪</svg‬‬
‫واآلن هيا نجرب دائرة أخري مع استخدام الخصائص بلغة ‪css‬‬

‫الكود‬
<circle style="cx:100; cy:100; r:90; fill:#EE9;
stroke:#D33; stroke-width:3;" />
</svg>
:‫ويمكن ان نجرب دائرة بدون إطار بالكود التالي‬

<circle style="cx:70;cy:70;r:60;fill:#F92;" />
</svg>
PAGE 36
‫وفيما سبق تخيل معي أنك ترسم باألدوات الهندسية وأحضرت الفرجار أو‬
‫ما يعرف في مصر بـ (البرجل) أو باللغة اإلنجليزية ‪ compass‬وحتى‬
‫ال تفهم بمعني البوصلة نكتبها )‪Compass (drawing tool‬‬
‫وهي أداة مشهورة لرسم الدوائر‪ ،‬مثل الشكل التالي‪:‬‬
‫نصف القطر ‪r‬‬
‫نقطة المركز ‪cx,cy‬‬

:‫ويمكن رسم دوائر متداخلة شفافة بالكود التالي‬
<circle cx="40" cy="40" r="30" style="stroke:#008;

fill:transparent; stroke-width:2" />





</svg>
PAGE 38
‫الوسم ‪a‬‬
‫يمكنك هذا الوسم من تحويل الشكل الى رابط‪ ،‬وسنجرب بالكود التالي‪:‬‬
‫>"‪<a href="https://www.hassouna-academy.com/‬‬
‫"‪<circle cx="150" cy="150" r="120" fill="#ADD" stroke="#008‬‬
‫>‪</a‬‬
‫>‪</svg‬‬
‫وبعد الضغط يفتح موقع حسونة أكاديمي‪ ،‬كما يوضح الشكل التالي‪:‬‬

desc ‫الوسم‬
‫ حيث تكتب مالحظاتك بعيداً عن‬،‫تستطيع عمل توثيق من خالل هذا الوسم‬
:[4]‫ وسنجرب بالكود التالي‬،‫تنفيذ الكود‬
<svg viewBox="0 0 10 10">
<circle cx="5" cy="5" r="4">
<desc>
I'm a circle and that description is here to
demonstrate how I can be described, but is it
really necessary to describe a simple circle
like me?
</desc>
</circle>
</svg>
viewBox ‫ وبالنسبة للخاصية‬،‫ بل تعد توثيق‬،‫الحظ أن الفقرة ال تظهر‬

.responsive ‫سنعرف عليها بالتفصيل في موضوع الشكل المتجاوب‬
PAGE 40
‫الوسم ‪rect‬‬
‫الوسم ‪ rect‬لرسم مستطيل‪ ،‬ويأخذ عرض ‪ ،width‬وطول‬
‫‪ ،height‬ونقطة بداية ‪ ،x,y‬ونصف قطر طولي ‪ ،ry‬ونصف قطر عرضي‬
‫‪ ، rx‬مع العلم أن انصاف األقطار هذه تجعل المستطيل منحني األطراف‬
‫حتى يصل الى شكل بيضاوي‪ ،‬ثم يصل إلى دائرة‪ ،‬ولون إطار ‪،stroke‬‬
‫وحجم إطار ‪ ،stroke-width‬ولون التعبئة ‪.fill‬‬
‫واآلن سنرسم مستطيل عادي بالكود التالي‪:‬‬

‫>‪<rect width=100 height=50 style="fill: #008;" /‬‬
‫>‪</svg‬‬
‫وهنا الحظ أننا لم نحدد نقطة البداية فبدأ الرسم في بدايات الحواف‪ ،‬وأخذ‬
‫عرض ‪ 150‬وطول ‪ 100‬وتعبئة بدون إطار‪.‬‬
:‫ بالكود التالي‬50 ‫واآلن سنرسم مربع يبعد عن الحواف بـ‬
‫الكود‬
<rect x=50 y=50 width=100 height=100 style="fill: #008;" />
</svg>
.‫وهنا الحظ أنه تمت مساواة الطول مع العرض ليكون مربع‬
‫ وخاصية الطول‬width ‫انتبه! واحرص على ان تجعل خاصية العرض‬

‫ وذلك لوسوم الرسم حتى ال تتعارض‬،html ‫ باستخدام اللغة‬height
.‫ ثم تعمل على المتصفحات المختلفة‬،css ‫مع اللغة‬
PAGE 42
:‫واآلن سنرسم مربع مع اإلطار بالكود التالي‬
<rect x=9 y=9 width=90 height=90 fill=#ADD stroke=#008
stroke-width=5 />
</svg>
:‫واآلن سنرسم مربعات متداخلة بالكود التالي‬

<rect x=9 y=9 width=30 height=30 fill=#ADD stroke=#008 />
</svg>
:‫ لتدوير حواف المستطيل بالكود التالي‬ry‫ و‬rx ‫واآلن سنستخدم‬
<rect x=9 y=9 width=70 height=70 fill=#F00 stroke=#000 rx=20 ry=20 />
<rect x=90 y=9 width=70 height=70 fill=#0F0 stroke=#000 rx=35 ry=35

/>
<rect x=9 y=90 width=140 height=70 fill=#00F stroke=#000 rx=20 ry=20

/>
<rect x=170 y=9 width=70 height=150 fill=#AAA stroke=#000 rx=30 ry=30

/>
</svg>
،‫ تم زيادة االستدارة‬ry‫ و‬rx ‫الحظ أنه كلما تم تزويد قيم الخصائص‬

.‫والحظ أنك تستطيع رسم أشكال بيضاوية طولية وعرضية مختلفة‬
PAGE 44
:‫واآلن سنرسم الشكل المعبر عن قاعدة البيانات بالكود التالي‬
<rect x=50 y=50 width=120 height=150 fill=#FD0 stroke=#000 />
<rect x=50 y=15 width=120 height=70 fill=#FD0 stroke=#000 rx=60 />
</svg>
:‫واآلن سنرسم شكل إسطواني عرضي بالكود التالي‬

<rect x=50 y=50 width=150 height=120 fill=#FD0 stroke=#000 />
</svg>
‫ ثم نجعله‬،‫ ولكن سنغير لون المستطيل‬،‫واآلن سنرسم نفس الشكل السابق‬
:‫ وذلك بالكود التالي‬،‫آخر الكود ليكون رسمه طاغي على الدوائر‬
<rect x=50 y=50 width=150 height=120 fill=#F50 stroke=#000 />
</svg>
.‫انتبه! فإن الذي يتم رسمه أخيراً هو الذي يطغي على ما قبله‬
‫ الحظ أنك تستطيع تأليف أشكال متعددة من مناظير مختلفة‬،‫عزيزي القارئ‬

.‫عند فهمك لكل وسم بدقة‬
PAGE 46
‫الوسم ‪ellipse‬‬
‫الوسم ‪ ellipse‬لرسم شكل بيضاوي‪ ،‬ويأخذ نقطة مركز ‪،cx,cy‬‬
‫ونصف قطر طولي ‪ ،ry‬ونصف قطر عرضي ‪ ،rx‬فمثالً لو أعطيت الخاصيتين‬
‫‪ rx‬و‪ ry‬القيمة ‪ 1‬ستتكون أمامك نقطة صغيرة‪ ،‬ثم تزيد حيث زادوا وتقل‬
‫حيث قلوا‪ ،‬ولون إطار ‪ ،stroke‬وحجم إطار ‪،stroke-width‬‬
‫ولون التعبئة ‪.fill‬‬
‫تابع الشكل التالي لتفهم الوسم ‪ ellipse‬جيداً‪:‬‬
‫نصف قطر طولي ‪ry‬‬
‫نصف قطر عرضي ‪rx‬‬ ‫نقطة المركز ‪cx,cy‬‬

‫واآلن سنرسم شكل بيضاوي بالكود التالي‪:‬‬
‫‪<ellipse‬‬ ‫"‪cx="220‬‬ ‫"‪cy="110‬‬ ‫"‪rx="200‬‬ ‫"‪ry="100‬‬
‫‪style="fill:#FF0;stroke:#808;stroke-width:2;stroke-‬‬
‫>‪dasharray:5,5" /‬‬
‫>‪</svg‬‬
‫وهنا تم ضبط نقطة المركز لتقع في ‪ ،220, 110‬ثم حددنا نصف‬

‫القطر العرضي بالقيمة ‪ 200‬ليكون اجمالي القطر العرضي ‪ ،400‬ثم‬
‫حددنا نصف القطر الطولي بالقيمة ‪ 100‬ليكون اجمالي القطر الطولي‬
‫‪ ،200‬وبالنسبة للتعبئة ‪ fill‬واإلطار ‪ stroke‬فقد تم تفصيلهم‪.‬‬
‫انتبه! فإنه في المثال السابق تم ضبط نقطة المركز ‪ cx, cy‬على قيمة‬
‫تتوسط اجمالي القطرين الطولي والعرضي مع زيادة بسيطة لتترحل قليالً من‬
‫اليسار ومن األعلى‪.‬‬
‫‪PAGE 48‬‬
،‫كما يمكن أن نرسم أشكال بيضاوية مختلفة الحجم وتكون لنفس نقطة المركز‬
:‫وذلك من خالل الكود التالي‬
<ellipse cx="220" cy="110" rx="200" ry="100"

style="fill:#C00;stroke:#000;stroke-width:2;" />

style="fill:#0C0;stroke:#000;stroke-width:2;" />

style="fill:#00C;stroke:#000;stroke-width:2;" />

style="fill:#FFF;stroke:#000;stroke-width:2;" />

style="fill:#000;stroke:#000;stroke-width:2;" />
</svg>
.‫الحظ أن جميع األشكال مشتركة في نقطة مركز واحدة‬
:‫ويمكن أيضاً تأليف شكل آخر مثل المثال بالكود التالي‬
<svg width=500 height=400 style=background: #FFF>
<ellipse cx=250 cy=350 rx=230 ry=40 style="fill:#CCC" />
<ellipse cx=250 cy=300 rx=200 ry=35 style="fill:#BBB" />
<ellipse cx=250 cy=255 rx=170 ry=30 style="fill:#AAA" />
<ellipse cx=250 cy=210 rx=140 ry=25 style="fill:#999" />
</svg>
‫وهنا نالحظ أن األشكال مثل قطع مكعبات األطفال(الميكانو) التي تجمعها‬

.‫مع بعض لتقوم بتكوين شكل معبر وجميل‬
PAGE 50
:‫ فقط بالكود التالي‬ellipse ‫يمكن أيضاً أن نرسم وجه بالوسم‬
<svg width=500 height=400 style=background:#FFF>
<ellipse cx=250 cy=250 rx=100 ry=65 style="fill:#CCC" />
<ellipse cx=250 cy=225 rx=100 ry=65 style="fill:#FFF" />
<ellipse cx=250 cy=150 rx=20 ry=60 style="fill:#AAA" />
</svg>
‫وهنا نالحظ أنه تم التغطية بشكل بيضاوي على شكل بيضاوي آخر ليخرج‬
.‫لنا الفم المبتسم‬
:‫يمكن أيضاً أن نرسم زهرة جميلة بالكود التالي‬
<ellipse cx=44 cy=70 rx=30 ry=30 style="fill:pink" />

<ellipse cx=100 cy=90 rx=30 ry=30 style="fill:#C00;" />

<ellipse cx=103 cy=220 rx=10 ry=100 style="fill:#0C0;" />
</svg>
.Red ‫ بناء على الدائرة الـ‬Pink ‫وهنا نالحظ رسم الدوائر الـ‬
PAGE 52
‫الوسم ‪text‬‬
‫الوسم ‪ text‬لرسم النص‪ ،‬ويأخذ حجم الخط ‪ ،font-size‬ونقطة‬
‫البدء ‪ ،x,y‬ولون إطار ‪ ،stroke‬وحجم إطار ‪،stroke-width‬‬
‫ولون التعبئة ‪ fill‬وبعض الخصائص األخرى‪.‬‬
‫واآلن سنجرب رسم نص عادي بالكود التالي‪:‬‬

‫>‪<svg width=200 height=200 style=background:#FFF‬‬
‫>‪<text x=50 y=50 fill=#C00‬‬

‫;‪I love web world &hearts‬‬
‫>‪</text‬‬
‫>‪</svg‬‬
‫الحظ أننا لم نحدد حجم الخط ‪ font-size‬وأخذ الحجم ‪ 16‬بشكل‬

‫افتراضي‪.‬‬

:‫ له بالكود التالي‬stroke ‫واآلن سنجرب نص مع‬
‫الكود‬
<text x=10 y=50 fill=#CC0 font-size=45 stroke=#C00>
I am learning from Hassouna Academy &hearts;
</text>
</svg>
fill ‫ وله تعبئة‬45 ‫ له حجم‬text ‫الحظ أنه تم رسم نص بالوسم‬

:‫ كما يمكن تغيير الخط بالكود التالي‬،stroke ‫وحواف‬
<text x=10 y=50 fill=#CC0 font-size=45 font-family=impact
stroke=#C00>
I am learning from Hassouna Academy &hearts;
</text>
</svg>
‫ تم ضبطه على‬font-family ‫الحظ أن الذي زاد هو أن نوع الخط‬

.Impact ‫الخط‬
PAGE 54
‫ بحيث يكونوا‬،tspan ‫يمكن أيضاً كتابة نصوص منفصلة عن طريق الوسم‬
:‫ وسنجرب بالكود التالي‬،text ‫تابعين للوسم‬
<text x=10 y=50 fill=#CC0 font-size=45 font-family=impact
stroke=#C00>
<tspan x=10 y=50>

I am learning HTML &hearts;
</tspan>
<tspan x=10 y=100>

I am learning CSS &hearts;
</tspan>
<tspan x=10 y=150 fill=#990>

I am learning SVG &hearts;
</tspan>
</text>
</svg>
‫ مع‬،‫ بنفس تنسيقاته‬text ‫ بداخل الوسم‬tspan ‫الحظ وجود وسوم‬

.‫ والتغيير فيهم بشكل مستقل‬،x, y ‫تحديد مواقعهم‬
image ‫الوسم‬
‫ سواء‬SVG ‫ لعرض الصور في مخطط الـ‬image ‫يتم استخدام الوسم‬
‫ واستخدامها‬،svg ‫ أو ملفات أخري للـ‬raster ‫كانت صور نقطية‬
mozilla ‫ ويمكن تجربة المثال التالي لعرض صورة من موقع‬،ً‫سهل جدا‬
:‫بسهولة‬
‫الكود‬
<svg width="200" height="200" >
<image
href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
height="200" width="200"/>
</svg>
،‫ حيث يمكن وضع مسار الصور‬،online ‫وكما نالحظ تم عرض الصورة‬

.‫ لعرضها كذلك‬svg ‫او وضع ملفات‬
PAGE 56
‫الوسم ‪polygon‬‬
‫الوسم ‪ polygon‬لرسم مضلع‪ ،‬ويأخذ النقاط ‪ ،points‬وبداخل‬
‫‪ points‬يتم وضع قيمة ‪ x‬ثم كوما "‪ ",‬ثم قيمة ‪ y‬ثم مسافة‪ ،‬وهكذا‬
‫لباقي النقاط بنفس الطريقة‪ ،‬ولون إطار ‪ ،stroke‬وحجم إطار‬
‫‪ ،stroke-width‬ولون التعبئة ‪.fill‬‬
‫واآلن سوف ارسم لكم مضلع بنقاط تقديرية كبداية بالكود التالي‪:‬‬
‫>‪<svg width=350 height=230 style=background:#FFF‬‬
‫>‪<polygon points="50,10 150,150 10,200" /‬‬
‫>‪</svg‬‬
‫وهنا نالحظ أن الشكل باللون األسود ألننا لم نحدد ‪ fill‬له‪ ،‬ونالحظ أننا‬
‫حددنا له ثالث نقاط فقط‪ ،‬وهي ‪ 50,10‬للنقطة األولي و‪150,150‬‬
‫للنقطة الثانية و‪ 10,200‬للنقطة الثالثة‪ ،‬ثم هو عبئ ما بين الثالث‬
‫نقاط التي حددناها‪.‬‬

‫ وسنعتمد‬،‫انتبه! ألننا سنكون شكل ثالثي أبعاد من مجموعة أشكال عادية‬
‫ وسنستخدم نفس الشكل السابق مع زيادة‬،‫على التكرار إلنتاج هذا الشكل‬
‫ والموضوع سهل ولكن يحتاج إلى ذكاء في تكوين‬،‫ له‬fill ‫لون التعبئة‬
‫ حيث أننا سنرسم نفس‬،‫ وبفضل اهلل سأسهل الموضوع عليك أكثر‬،‫األشكال‬
،‫ في كل مرة‬1 ‫ بحيث يتم زيادة جميع النقاط بـ‬،‫ مرة‬15 ‫الشكل مكرر‬
‫ حيث أنه أصفر أثقل قليالً من‬،#EE0 ‫وكل المرات ستكون باللون‬
‫ ألنه أصفر أفتح من‬،#FF0 ‫ ما عدا آخر مرة ستكون باللون‬،‫العادي‬
،‫ وكل ذلك لتري التأثر الحقيقي للتكرار في تكوين الشكل الثالثي األبعاد‬،‫السابق‬
‫ واآلن كل ذلك سنطبقه بفضل اهلل عن‬،‫وكأننا نعكس األضواء عليه ليظهر‬
:‫طريق الكود التالي‬
<polygon points="50,10 150,150 10,200" fill=#EE0 />
<polygon points="65,25 165,165 25,215" fill=#FF0 />
</svg>
PAGE 58
‫واآلن تأمل في الشكل الذي أماك‪ ،‬وستشعر أنه ثالثي األبعاد ‪ ،3D‬مع‬
‫العلم أنك لو أحببت أن تجعله أدق من ذلك ستجعل الزيادة بالعالمات‬
‫العشرية‪ ،‬بحيث يكون بمنتهي الدقة كما تحب‪ ،‬حيث أنك على هذا الحال إذا‬
‫قمت بتكبيرة الى أعلي درجة في المتصفح ستكون أطرافه السفلي كالتالي‪:‬‬
‫وذلك ألن الزيادة بـ ‪ 1‬فقط‪ ،‬وهذه دقتها‪.‬‬

‫واآلن سوف نقوم بتكوين شكل ثالثي أبعاد أقوي من التمرين السابق‪ ،‬ولكن‬
‫انتبه! فالبد أن تركز جيداً معي‪.‬‬
‫اوالً هل تتذكر الشكل التالي‪:‬‬
‫نعم‪ ،‬انه هو الشكل الذي تم عمله في موضوع الوسم ‪ line‬السهل‪.‬‬
‫ثانياً إذا تخيلنا هذا الشكل مغطي وليس شفاف فسيكون له جوانب‪ ،‬وأيضاً‬
‫حسب منظورك له‪ ،‬ألن هذا الشكل يمكن أن تراه بأكثر من صورة‪ ،‬نعم تراه‬
‫كذلك وسأثبت لك‪ ،‬ولكن ركز جيداً‪ ،‬وال تتعجل‪ ،‬وانتبه لعينيك حتى ال يصيبهم‬
‫الوجع من التخيل‪ ،‬وال أمزح‪ ،‬بل بالفعل أتحدث إليك بجدية تامة‪ ،‬واآلن‬
‫تخيل معي هذا الشكل وكأنه مغطي كالتالي‪:‬‬
‫‪PAGE 60‬‬
‫نعم هذا الشكل مشتق بالفعل من الشكل األصلي‪ ،‬والظاهر منه لنا في منظور‬
‫هذه الحالة‪ ،‬الجزء العلوي‪ ،‬والجزء الجانبي‪ ،‬والجزء األمامي‪ ،‬واآلن سنري‬
‫شكل آخر مشتق من نفس الشكل األصلي‪ ،‬وهو كالتالي‪:‬‬
‫نعم وهذا الشكل أيضاً مشتق من الشكل األصلي‪ ،‬ولكن من منظور آخر‪،‬‬
‫ويظهر لنا من هذا المنظور‪ ،‬الجزء األمامي‪ ،‬والجزء الجانبي‪ ،‬والجزء السفلي‪،‬‬
‫بل ويمكن أن تراه من منظور آخر وكأن الجزء السفلي قاعدة له‪.‬‬

‫ثالثاً إذا أردنا أن نرسم مضلع ‪ polygon‬يكون لنا أحد الشكلين‬
‫السابقين‪ ،‬سنالحظ أن لكل شكل منهم ثالث جوانب ظاهرة فقط‪ ،‬حيث أن‬
‫لكل جانب أربع نقاط والتي البد أن نستخدمهم‪ ،‬ألن الوسم ‪polygon‬‬
‫يكمل الشكل ويغلقه تلقائياً‪.‬‬
‫رابعاً الشكل الذي تم رسمه في موضوع الوسم ‪ line‬غير مرتب‪ ،‬حيث‬

‫أننا كنا نرسم خط تلو اآلخر‪ ،‬وال يهمنا وقتها الترتيب‪ ،‬لكن اآلن الترتيب‬
‫مهم ألن الوسم ‪ polygon‬كما ذكرنا يغلق نفسه‪.‬‬
‫خامساً البد أن نعتمد على اختيار لون ثم نجعل كل جانب مختلف قليالً عن‬
‫اآلخر حتى يظهر شكل المكعب‪.‬‬
‫سادساً سوف نرسم الشكل التالي كمكعب‪:‬‬
‫‪PAGE 62‬‬
‫سابعاً ستكون النقاط المحددة بالترتيب كما يلي‪:‬‬
‫الجزء العلوي يحمل النقاط التالية‪:‬‬
‫الجزء األمامي يحمل النقاط التالية‪:‬‬

:‫الجزء الجانبي يحمل النقاط التالية‬
‫واآلن إذا تخيلت الثالث أشكال السابقة مع بعضهم سيكونون لك المكعب‬

‫ مع‬،‫ ولكن انتبه! فالبد من االحتفاظ بالترتيب لكل شكل‬،‫النهائي بسهولة‬
.‫االحتفاظ بقيم النقاط منضبطة‬
‫ سنرسم‬،‫واآلن بعد هذا الفهم العميق المفصل بفضل اهلل لألجزاء الثالثة‬
:‫المكعب بالكود التالي‬
<svg width="500" height="380" style="background: #FFF">

<polygon fill=#EE0 points="120,24 370,24 270,120, 20,120" />

<polygon fill=#FF0 points="18,120 270,120 270,366, 20,365" />

<polygon fill=#CC0 points="270,120 370,24 370,268, 270,365 " />
</svg>
PAGE 64
‫الحظ أن التخطيط قبل العمل هام جداً لتجنب األخطاء والوصول للهدف‪.‬‬
‫الحظ أنه لوال التقسيم الى ‪ 3‬أشكال لم نكن نستطيع التلوين بألوان مختلفة‪،‬‬
‫حيث لو كان هنا شكل واحد سيكون له لون واحد‪.‬‬
‫الحظ أن الكود ما هو اال ثالثة أسطر فقط بداخل الوسم ‪ svg‬ولكن بعد‬
‫الفهم يكون لديك ملكة اإلبداع بفضل اهلل‪.‬‬
‫الحظ أنك تستطيع اآلن تكوين أي شكل بنفس الفكرة‪ ،‬حيث تحدد النقاط لكل‬
‫جانب ثم يتم التنفيذ بعد التخطيط‪.‬‬
‫ على شكل سهم يشير نحو‬polygon ‫واآلن سوف نحدد نقاط مضلع‬
:‫ ثم سنرسمه بالكود التالي‬،‫اليسار‬
<svg height="210" width="500">
<polygon points="100,135 170,80 170,100 280,100 280,170 170,170 170,190"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
‫ ظهر السهم بصورة‬،‫وهنا الحظ أنه عندما تم التخطيط للنقاط بشكل سليم‬
.‫صحيحة مع النقاط المحددة‬
PAGE 66
‫واآلن سنرسم نفس الشكل السابق بدون تعبئة بالكود التالي‪:‬‬
‫"‪<polygon points="100,135 170,80 170,100 280,100 280,170 170,170 170,190‬‬
‫>‪style="fill:none;stroke:#00A;stroke-width:3" /‬‬
‫>‪</svg‬‬
‫ومن هنا يتبين لنا أننا نستطيع رسم األشكال المضلعة ‪polygons‬‬
‫بدون تعبئة‪ ،‬أي خطوط فقط‪.‬‬

‫ وهو أنك إذا عزلت بين‬،‫انتبه! فهناك شيء مهم أريد أن أنبه عليك به‬
:‫ مثالً سنجرب بالكود التالي‬،‫جميع النقاط بمسافة‬
<polygon fill=#E00 points="120 24 370 24 270 120 20 120" />
<polygon fill=#F00 points="18 120 270 120 270 366 20 365" />
<polygon fill=#C00 points="270 120 370 24 370 268 270 365 " />
</svg>
.‫ مع الفصل بين النقاط بمسافة فقط‬،‫الحظ أن الشكل تم رسمه بنجاح‬
PAGE 68
‫وأيضاً إذا تم الفصل بين قيم النقاط بـ كوما "‪ ",‬ستعمل أيضاً األشكال‪،‬‬
‫وسنجرب ذلك بالكود التالي‪:‬‬
‫>"‪<svg width="500" height="380" style="background: #FFF‬‬
‫>‪<polygon fill=#0E0 points="120,24,370,24,270,120,20,120" /‬‬
‫>‪<polygon fill=#0F0 points="18,120,270,120,270,366,20,365" /‬‬
‫>‪<polygon fill=#0C0 points="270,120,370,24,370,268,270,365 " /‬‬
‫>‪</svg‬‬
‫الحظ أن الشكل تم رسمه بنجاح‪ ،‬مع الفصل بين النقاط بـ كوما فقط‪.‬‬

‫" ومسافة بشكل مختلط‬," ‫وأيضاً إذا تم الفصل بين قيم النقاط بـ كوما‬
:‫ وسنجرب ذلك بالكود التالي‬،‫ستعمل أيضاً األشكال‬
<polygon fill=#00E points="120 24,370,24 270,120 20,120" />
<polygon fill=#00F points="18,120 270,120,270,366 20,365" />
<polygon fill=#00C points="270,120,370 24,370,268,270 365 " />
</svg>
‫ مع الفصل بين النقاط بـ كوما مع‬،‫الحظ أن الشكل تم رسمه بنجاح‬

.‫مسافة بأي طريقة‬
PAGE 70
‫الوسم ‪polyline‬‬
‫الوسم ‪ polyline‬لرسم خطوط مستقيمة‪ ،‬ويأخذ النقاط ‪،points‬‬
‫وبداخل ‪ points‬يتم وضع قيمة ‪ x‬ثم كوما "‪ ",‬ثم قيمة ‪ y‬ثم‬
‫مسافة‪ ،‬وهكذا لباقي النقاط بنفس الطريقة‪ ،‬بحيث يشد خطوط بين جميع‬
‫النقاط‪ ،‬وبدون أن يغلق الشكل‪ ،‬ويأخذ أيضاً لون الخط ‪ ،stroke‬وحجم‬
‫الخط ‪ ،stroke-width‬ومن هنا يتضح لنا أنه مثل الوسم‬
‫‪ polygon‬مع اختالف أنه ال يغلق الشكل ويعمل بخطوط‪.‬‬
‫ولنجرب هذا‪ ،‬سنستخدم نفس نقاط السهم الذي تم عمله في درس الوسم‬
‫‪ polygon‬من قبل‪ ،‬وستالحظ شيء غريب‪ ،‬وهو أن الوسم‬
‫‪ polyline‬لن يكمل آخر نقطة‪ ،‬وستري بالكود التالي‪:‬‬
‫"‪<polyline points="100,135 170,80 170,100 280,100 280,170 170,170 170,190‬‬
‫>‪</svg‬‬
‫وهنا نالحظ أن آخر نقطة لم تتصل بأول نقطة‪.‬‬

‫ ستشعر‬fill ‫واآلن إذا تم تجربة نفس الشكل السابق مع إعطاؤه لون تعبئة‬
:‫ وسنجرب بالكود التالي‬،‫أن الشكل مكتمل كتعبئة فقط‬
<polyline points="100,135 170,80 170,100 280,100 280,170 170,170 170,190"
style="fill:#BB0;stroke:#00A;stroke-width:5" />
</svg>
‫ سيظهر السهر بالتعبئة‬stroke ‫ومن هنا نفهم أنه إذا تم إزالة اإلطار‬
:‫ وسنجرب بالكود التالي‬،‫بشكل طبيعي‬
<polyline points="100,135 170,80 170,100 280,100 280,170 170,170 170,190"
style="fill:#BB0;" />
</svg>
PAGE 72
‫واآلن سنرسم شكل "‪ "zigzag‬بالوسم ‪ ،polyline‬مع التخطيط له‬
‫بسهولة إن شاء اهلل‪ ،‬حيث أنك إذا فكرت في الشكل الـ ‪ zigzag‬ستجده‬
‫مثل الشكل التالي‪:‬‬
‫وبعد أن نالحظ شكل الـ ‪ zigzag‬سنري أنه يزيد قيمة ‪ x‬بطريقة منتظمة‬
‫مع تبديل قيمة ‪ y‬بين قيمتين اعلي وأسفل‪ ،‬مثالً يبدأ من أسفل الى أعلي‬
‫ثم الى أسفل ثم الى اعلي‪ ،‬وهكذا‪ ،‬وسنجرب ذلك بالكود التالي‪:‬‬
‫"‪<polyline points="0,50 50,0 100,50 150,0 200,50 250,0 300,50 350,0 400,50‬‬
‫>‪</svg‬‬
‫وهنا نالحظ أن ‪ x‬تزيد زيادة ثابتة بـ ‪ 50‬في كل مرة‪ ،‬مع تراوح قيمة‬
‫‪ y‬بين ‪ 0‬و‪ ،50‬فتم انتاج شكل الـ ‪ zigzag‬بسهولة بفضل اهلل‪.‬‬

title ‫الوسم‬
:‫ وسنجرب بالكود التالي‬،‫تستطيع استخدامه لوضع تلميحات على العناصر‬
<circle cx="150" cy="150" r="120"

fill="#ADD" stroke="#008"
stroke-width="3">
<title>This is my circle</title>
</circle>
</svg>
‫التنفيذ ولمس‬
‫ ونالحظ‬،‫ الموجود بها‬title ‫وهنا نالحظ أنه عند لمس الدائرة يظهر الـ‬
.‫ به‬title ‫< لوضع‬circle> ‫أننا أغلقنا الوسم بـ‬
PAGE 74
‫لغة ‪ CSS‬مع ‪SVG‬‬

‫يمكن انشاء ‪ style‬خاص بك داخل الـ ‪ svg‬الذي تعمل عليه‪ ،‬وسنجرب‬
‫بالكود التالي‪:‬‬
‫> ‪<svg width=100 height=100‬‬
‫>‪<style‬‬
‫{‪.myClass‬‬
‫;‪fill: lime‬‬
‫;‪stroke: blue‬‬
‫;‪stroke-width: 5‬‬
‫}‬
‫>‪</style‬‬
‫>‪<rect class="myClass" width=100 height=100 /‬‬
‫>‪</svg‬‬
‫الحظ أننا للتعبئة نستخدم ‪ fill‬وال نستخدم مثالً ‪،background‬‬

‫أي أننا نضبط الخصائص الخاصة بالـ ‪ ،SVG‬ويمكن كذلك وضع الوسم‬
‫‪ script‬بداخل الـ ‪ SVG‬للبرمجة بجافا سكريبت‪.‬‬

‫ لتطبيقها‬CSS ‫ويمكن أيضاً استخدام خبراتك السابقة من لغة الـ‬
:‫ مثل ما يلي‬SVG ‫بطريقة الـ‬
:‫ وتنسيقاتها‬CSS ‫الكود التالي باستخدام‬

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
div.my{
background-color: lime;
border: 3px solid green;
width:100px; height:100px;
margin: 40px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="my"></div>
</body>
</html>
PAGE 76
:CSS ‫ مع‬SVG ‫الكود التالي مثل الكود السابق ولكن انتبه! فإنه بالـ‬
<!DOCTYPE html>
<html>
<head>
<style>
rect.my{
fill: lime; stroke: green; stroke-width: 3;
transform: rotate(45deg);
}
</style>
</head>
<body>

<rect class="my" width="100" height="100"
x="90" y="-40" />
</svg>
</body>
</html>
.‫ لنجبر الجزء الفارغ بسبب قلب الشكل‬y ‫وهنا تم تقليل‬
:‫ خالص‬SVG ‫الكود التالي مثل الكود السابق ولكن انتبه! فإنه بالـ‬
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>

<rect width="100" height="100" fill="lime"
stroke="green" stroke-width="3"
x="90" y="-40"
transform="rotate(45)"/>
</svg>
</body>
</html>
‫ مثل‬،‫ األصلية‬svg ‫ أي خصائص الـ‬،‫ الخالص‬svg ‫والمقصود هنا بالـ‬

‫ وهكذا تستطيع أن تعزز خبراتك بنفس‬،‫ وغيرها‬stroke ‫ والـ‬fill ‫الـ‬
.‫ بفضل اهلل‬svg‫ و‬css ‫الطريقة بين‬
PAGE 78
‫الوسم ‪LinearGradient‬‬
‫الوسم ‪ ،linearGradient‬والوسم ‪ ،stop‬لصناعة تدرج لوني‬
‫خطي‪ ،‬حيث يوضع الوسم ‪ linearGradient‬داخل الوسم ‪defs‬‬
‫للتعريف‪ ،‬ويأخذ معرف ‪ id‬لنطبقه على الشكل الذي نريد فيما بعد‪ ،‬داخل‬
‫نفس وسم ‪ ،svg‬ويأخذ نقطة بداية التدرج ‪ ،x1,y1‬ونقطة نهاية‬
‫التدرج ‪ ،x2,y2‬أما الوسم ‪ ،stop‬فيستخدم واحد لكل لون‪ ،‬ويأخذ‬
‫خاصية ‪ stop-color‬للون التدرج‪ ،‬وخاصية ‪ offset‬بقدر استحواذ‬
‫اللون على التدرج‪ ،‬وخاصية ‪ stop-opacity‬لشفافية التدرج‪ ،‬وبعد‬
‫كل هذا يتم تخصيص هذا العمل عن طريق خاصية ‪ fill‬للعنصر المقصود‬
‫تأثير التدرج عليه‪ ،‬وتكون الكلمة ‪ url‬ثم قوس ( ثم بين رمزين‬
‫‪ ' ' Single Quotes‬يتم وضع الرمز ‪ #‬ثم ‪ id‬التدرج ثم اغالق‬
‫القوس ) ثم يعمل بعد ذلك إن شاء اهلل‪.‬‬
‫واآلن سنجرب تعبئة دائرة ‪ circle‬بتدرج لوني بالكود التالي]‪:[4‬‬

‫>‪
<rect x="0" y="0" width="100" height="100" fill=#FFF />


<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35
Q90,65,50,95 Q10,65,10,35 Z" fill=#000 />
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />

<circle cx="50" cy="50" r="50" fill=#A00 mask="url(#myMask)" />
</svg>
PAGE 210
‫وكما نالحظ أنه تم قص قلب من داخل الدائرة عن طريق الـ ‪.mask‬‬
‫واآلن سنفصل جزء‪ ،‬جزء‪ ،‬في نقاط بفضل اهلل كما يلي‪:‬‬
‫• تم عمل مضلع ودائرة‬
‫• تم عمل ‪ mask‬وتسميته ‪myMask‬‬
‫• تم تطبيق الـ ‪ mask‬على الدائرة فقط‬
‫• تم عمل مستطيل بنفس حجم الدائرة باللون األبيض‪ ،‬ليتم بقاء الدائرة‬
‫• تم عمل مسار ‪ path‬على شكل قلب باللون األسود‪ ،‬ليتم حذف جزء‬
‫الـ ‪ path‬فقط‬
‫وبهذه النقاط تستطيع فهم ما سبق جيداً‪ ،‬وتستطيع عمل أي ‪mask‬‬

‫آخر بكل سهولة بفضل اهلل‪.‬‬

Animate ‫الوسم‬
‫ وهي تشبه ما فعلناه‬،‫هو وسم يمكنك من إنشاء حركة مرئية على العناصر‬
‫ حيث أنك تتحكم في قيم الخصائص مع الحركة‬،css ‫من قبل في لغة الـ‬
:‫ وسنجرب بالكود التالي‬،‫ووقت الحركة‬
<rect x=10 y=10 width=200 height=100 >
<animate attributeType="XML" attributeName="width"
from="0" to="200"
dur="10s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="fill"
from="red" to="blue"
</rect>
</svg>
:‫ وللتوضيح سنعرض التنفيذ المتعدد كالتالي‬،‫انتبه! ألن التنفيذ حركي‬
1‫التنفيذ‬
PAGE 212
‫التنفيذ‪4‬‬
‫وهنا الحظ أن الوسم ‪ rect‬له اغالق >‪ </rect‬وذلك لنستطيع وضع‬

‫وسم الحركة ‪ animate‬بداخلة‪ ،‬والحظ أيضاً أن الخاصية‬
‫‪ attributeType‬تم ضبطها على ‪ XML‬حيث أن الـ ‪ svg‬تعمل على الـ‬
‫‪ XML‬في األساس‪ ،‬والحظ أيضاً أن الخاصية ‪ attributeName‬تم‬
‫ضبطها على ‪ width‬أي أن الخاصية المراد عمل الحركة عليها هي‬
‫‪ width‬وفي الـ ‪ animate‬اآلخر هي ‪ fill‬ليتغير اللون بحركة‪ ،‬والحظ‬
‫أن ‪ from‬تأخذ قيمة البداية و‪ to‬تأخذ قيمة النهاية للحركة‪ ،‬والحظ أن‬
‫الخاصية ‪ dur‬على ‪ 10s‬واألخرى على ثانية واحدة وهي مدة اكمال‬
‫الحركة‪ ،‬والحظ أن الخاصية ‪ repeatCount‬على ‪ indefinite‬أي ال‬
‫نهائية‪ ،‬ويمكن ضبطها على ‪ 2‬او ‪ 3‬او رقم ليتكرر به‪.‬‬

،‫ فقط‬to‫ و‬from ‫ بدالً من‬،‫ويمكن أيضاً ان تتعامل مع قيم كثيرة‬
:‫ وسنجرب ذلك بالمثال التالي‬،‫لتنويع الحركة‬
<circle cx="50" cy="50" r="15" fill="#00A"

stroke="navy" stroke-width="3">
<animate attributeType="XML" attributeName="cx"

values="30;50;70;100;70;50;30"
<animate attributeType="XML" attributeName="r"

values="15;20;25;30;25;20;15"
</circle>
</svg>
PAGE 214
‫وبعدها سيرجع مرة أخري‪ ،‬ألننا قمنا بعمل حركة منتظمة تسلسلية‪ ،‬تبدأ‬
‫من قيمة‪ ،‬ثم تزيد‪ ،‬ثم تنتهي عند نفس قيمة البداية‪ ،‬وبذلك تستطيع التنويع‬
‫كما تحب في الحركات‪.‬‬
‫الحظ أنه تم عمل أكثر من حركة‪ ،‬مع أكثر من قيمة‪.‬‬

animateMotion ‫الوسم‬
‫ وكأنها‬،‫ آخر بالحركة‬path ‫ يلتف حول‬path ‫هذا الوسم يجعلك تجعل‬
:[4]‫ وسنجرب ذلك بالكود التالي‬،‫رسوم كرتونية‬
<svg width="100%" height="100%" viewBox="0 0 500 300" >
<rect x="1" y="1" width="498" height="298"

fill="none" stroke="blue" stroke-width="2" />
<path id="path1" d="M100,250 C 100,50 400,50 400,250"

fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"

fill="yellow" stroke="red" stroke-width="7.06" >
<animateMotion dur="6s" repeatCount="indefinite"
rotate="auto" >
<mpath href="#path1"/>
</animateMotion>
</path>
</svg>
‫ ولتوضيح ذلك في الكتاب سنعرض التنفيذ‬،‫واآلن انتبه! ألن التنفيذ حركي‬

:‫المتعدد لحركات مختلفة من التشغيل كما يلي‬
PAGE 216

PAGE 218
‫وكما نالحظ أن الـ ‪ path‬المرسوم على شكل مثلث يدور حول الـ‬
‫‪ path‬اآلخر من أوله إلى آخره‪ ،‬دوران ال نهائي‪ ،‬وسنوضح كالتالي‪:‬‬
‫• تم رسم مستطيل يظهر كإطار‬

‫• تم رسم ‪ path‬لمنحني وتعيين ‪ id‬له وتم رسم ثالث دوائر عليه‬
‫• تم رسم ‪ path‬لمثلث أصفر خارج إطار الـ ‪viewBox‬‬
‫• تم وضع وسم ‪ animateMotion‬داخل المثلث إلنشاء حركة‬
‫• تم وضع ‪ mpath‬لإلشارة الى المسار الذي سيلتف حوله‬
‫• خاصية ‪ dur‬بـ ‪ 6s‬لتنفيذ الحركة في ‪ 6‬ثواني‬
‫• خاصية ‪ repeatCount‬بـ ‪ indefinite‬لتتكرر ال نهائي‬
‫• خاصية ‪ rotate‬بـ ‪ auto‬لالستدارة التلقائية‬

:‫ بالكود التالي‬،‫واآلن سنغير شكل المنحني الرئيسي الذي يلف المثلث حوله‬
<svg width="100%" height="100%" viewBox="0 0 500 500" >
<rect x="1" y="1" width="498" height="498"

fill="none" stroke="blue" stroke-width="2" />
<path id="path1" d="M 220,250

Q 250,190 280,250 Q 250,310 220,250"
fill="none" stroke="blue" stroke-width="7.06" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"

fill="yellow" stroke="red" stroke-width="7.06" >
rotate="auto" >
<mpath href="#path1"/>
</animateMotion>
</path>
</svg>
.‫واآلن الحظ بعد التنفيذ ستكون الحركة شبه دائرية‬

PAGE 220
‫وهكذا سيدور المثلث حول المسار‪ ،‬ولو جعلنا خاصية ‪ dur‬على القيمة‬
‫‪ 60s‬سيلتف في دقيقة مثل عقرب ثانية الساعة‪.‬‬

:[4]‫ويمكن أيضاً تجربة الكود التالي‬
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">

path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
</svg>
.‫وهكذا وتستمر الحركة‬

PAGE 222
‫الوسم ‪animateTransform‬‬
‫هذا الوسم يمكنك من جعل الشكل يدور حول نفسه‪ ،‬ولتجربه هذه العملية‬
‫يجب ان نرسم شكل يظهر عليه الدوران مثل المربع او المستطيل او المثلث‪،‬‬
‫وسنجرب بالكود التالي]‪:[4‬‬
‫>"‪<svg width="120" height="120" viewBox="0 0 120 120‬‬
‫‪<polygon points=" 30,9060,30 90,90 " fill=lime‬‬
‫>‪stroke=#00F stroke-width=2‬‬
‫"‪<animateTransform attributeName="transform‬‬
‫"‪attributeType="XML‬‬
‫"‪type="rotate‬‬
‫"‪from="0 60 70‬‬
‫"‪to="360 60 70‬‬
‫"‪dur="10s‬‬
‫>‪repeatCount="indefinite"/‬‬
‫>‪</polygon‬‬
‫>‪</svg‬‬
‫واآلن انتبه! ألن التنفيذ حركي‪ ،‬ولتوضيح ذلك في الكتاب سنعرض التنفيذ‬
‫المتعدد لحركات مختلفة من التشغيل كما يلي‪:‬‬

PAGE 224
‫وهكذا‪ ،‬يستمر في الدوران حول نفسه الى ما النهاية‪ ،‬وسنوضح المثال‬
‫السابق في النقاط التالية‪:‬‬
‫• رسم مضلع على شكل مثلث وغلقه بـ >‪</polygon‬‬

‫• وضع وسم الحركة ‪ animateTransform‬بداخله‬
‫• خاصية ‪ attributeName‬بـ ‪ transform‬للتحكم بها‬
‫• خاصية ‪ attributeType‬بـ ‪XML‬‬
‫• خاصية ‪ type‬بـ ‪ rotate‬لالستدارة‬
‫• خاصيتين ‪ from‬و‪ to‬من الدرجة ‪ 0‬الى ‪360‬‬
‫• مركز الدوران في ‪ from‬و‪ to‬هو ‪ 60, 70‬الستهداف المنتصف‬
‫• هدف استهداف منتصف المثلث للدوران حول نفسه‬
‫واآلن سنعطل الحركة ونرسم نفس النقطة‪ ،‬بالكود التالي‪:‬‬

‫>"‪<svg width="120" height="120" viewBox="0 0 120 120‬‬
‫‪<polygon points="30,90 90,90 60,30" fill=lime‬‬
‫>‪stroke=#00F stroke-width=2‬‬
‫"‪
<svg version="1.1" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="red" >
<rect width="100" height="100" fill="#0F0" />

<circle cx="50" cy="50" r="40" fill="#FF0" />
<circle cx="50" cy="50" r="20" />
<circle cx="70" cy="70" r="10" />
</g>
</svg>
‫ وقمنا‬،‫وكما نالحظ أن هذه األكواد سهلة علينا بفضل اهلل ألننا تعلمناها‬
‫ واآلن سنستخدمه استخدامات مختلفة الحجم في ملف‬،‫بإنشائها من قبل‬
:‫ويب عادي كما يلي‬
PAGE 230
:‫ كما يلي‬test.html ‫واآلن قم بكتابة الكود التالي في ملف الويب‬
<!DOCTYPE html>
<html>
<head>
<style>
img{ border: 3px dashed green; }
</style>
</head>
<body>
<img src="test.svg" width=300 height=300 />
<br>
</body>
</html>

Practical exercises ‫تمارين عملية‬

3D ‫رسم تقديري للكعبة المشرفة‬
:‫ واحفظه‬test.html ‫اكتب الكود التالي بملف‬
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<polygon fill=#111 points="120,24 370,24 270,120 20,120" />
<polygon fill=#AAA points="125,35 340,35 260,110 50,110" />

<polygon fill=gold points="18,165 270,165 270,200 20,200" />

</svg>
</body>
</html>
PAGE 232

‫رسم سيارة‬
:‫سنرسم سيارة عادية بالكود التالي‬
<path d="M 30,250 v -60 q 40,-20 80,0 v -60

q 100,-50 200,0 v 40 q 45,10 120,30
q 55,30 0,60 h -50 q -50,-65 -100,0
h -70 q -50,-65 -100,0 Z"
stroke="navy" stroke-width="3" fill="lightblue" />
<path d="M 109,192 Q 160,160 311,171"

stroke="navy" stroke-width="3" fill="none" />
<line x1=120 y1=185 x2=120 y2=125

stroke="navy" stroke-width="3"/>
<line x1=220 y1=167 x2=220 y2=105

stroke="navy" stroke-width="3"/>

stroke="navy" stroke-width="3" />

stroke="navy" stroke-width="3" />
</svg>
PAGE 234

‫رسم نخلة‬
:‫ سنرسم جزء من النخلة كما يلي‬symbol ‫اآلن باستخدام‬
<svg width=500 height=500>
<symbol id="part1">
<polygon points="0,0 100,0 80,50 20,50" fill="#642" />
</symbol>
<use href="#part1"
x="5" y="5" width=200 height=100 />
</svg>
PAGE 236
:‫واآلن سنرسم ورقة النخلة بالكود التالي‬
<svg width=500 height=500>
<symbol id="part2">
<path d="M 25,0 Q 0,100 25,200 z" stroke="darkgreen"
fill="#1A1" />
<path d="M 25,0 Q 50,100 25,200 z" stroke="darkgreen"
fill="#1A1" />
</symbol>
<use href="#part2"
x="5" y="5" width=100 height=300 />
</svg>

:‫ ونرسمها بالكود التالي‬،‫واآلن سنقوم بتجميع أجزاء النخلة‬
<svg viewBox="-15 0 350 500">
<symbol id="part1">
</symbol>
<symbol id="part2">
<path d="M 25,0 Q 0,100 25,200 z" stroke="darkgreen" fill="#1A1" />
</symbol>
<use href="#part2" x="125" y="0" />

<use href="#part2" x="125" y="0" transform="rotate(10 125 200)" />
<use href="#part2" x="125" y="0" transform="rotate(-10 170 200)" />
<use href="#part1" x="100" y="400" />
<use href="#part1" x="100" y="350" />
<use href="#part1" x="100" y="300" />
<use href="#part1" x="100" y="250" />
<use href="#part1" x="100" y="200" />
</svg>
PAGE 238

:‫ ستكون كالشكل التالي‬،‫ولو قمنا بتصغيرها‬
:‫ ستكون كالشكل التالي‬،‫ولو جعلناها أصغر قليالً من السابق‬
.‫ كما نالحظ تناسب جميع األحجام‬،‫وهكذا‬
PAGE 240
:‫ كالتالي‬palm.svg ‫ باسم‬svg ‫واآلن سنضع كود النخلة بملف‬
<svg viewBox="-15 0 350 500"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<symbol id="part1">
</symbol>
<symbol id="part2">
</symbol>
<use href="#part2" x="125" y="0" />

<use href="#part1" x="100" y="400" />
<use href="#part1" x="100" y="350" />
<use href="#part1" x="100" y="300" />
<use href="#part1" x="100" y="250" />
<use href="#part1" x="100" y="200" />
</svg>

‫ والذي قمنا بتنفيذه من‬،palm.svg ‫واآلن سنعرض من مصدر الملف‬
.‫األلف الى الياء بفضل اهلل‬
:‫ كما يلي‬test.html ‫قم بكتابة الكود التالي في ملف الويب‬

<!DOCTYPE html>
<html>
<head>
<style>
img{ border: 3px dashed green; }
</style>
</head>
<body>
<img src="palm.svg" width=300 height=300 />
<br>
</body>
</html>
PAGE 242

‫رسم األهرامات‬
:‫ به كود الهرم كالتالي‬pyramid.svg ‫اآلن سننشئ ملف‬
<svg viewBox="0 0 900 400"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect width="40" height="20" x="-10" fill="#FF0" />
<line x1="-10" y1="9" x2="25" y2="9" stroke="#F40" />
<line x1="1" y1="10" x2="1" y2="0" stroke="#F40" />
<line x1="-10" y1="19" x2="25" y2="19" stroke="#F40" />
<line x1="9" y1="10" x2="9" y2="20" stroke="#F40" />
</pattern>
</defs>
<polygon points="0,400 400,400 200,100" fill="url(#p1)"

stroke="#F90" stroke-width="2"/>
<polygon points="330,400 400,400 200,100" fill="none"

stroke="#F90" stroke-width="2"/>
</svg>
‫ على متصفح الويب سيفتح ويعرض‬svg ‫معروف أنك إذا فتحت الملف‬
‫ ولكننا سنجرب على ملف‬،‫لك التصميم إذا كانت األكواد من الداخل صحيحة‬
.SVG ‫ الموجود مع الـ‬image ‫ وسنجرب الوسم‬،html ‫ويب‬
PAGE 244
:‫ كما يلي‬test.html ‫واآلن كود ملف‬
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<svg width="900" height="400" style="border:1px solid" >
<image href="pyramid.svg"
width="90%" height="90%" x="10" y="39" />
width="70%" height="70%" x="250" y="120" />
width="50%" height="50%" x="450" y="200" />
</svg>
</body>
</html>

PAGE 246
‫رسم وجه متحرك العينين‬
:‫انشاء تدرج يتناسب مع العين بالكود التالي‬ .1


<defs>
<radialGradient id="eyeGradient">
<stop offset="10%" stop-color="#ded4b8" />
<stop offset="30%" stop-color="#7e6318" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="50"

fill="url('#eyeGradient')"/>
</svg>

:‫ للعينين بالكود التالي‬symbol ‫انشاء‬ .2

<symbol id="eye" viewBox="0 0 100 100">
<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
stroke="#000" stroke-width="3" fill="#DDD" />
<circle cx="50" cy="50" r="15" fill="lightblue"
stroke="#584614" stroke-width="3"/>
</symbol>
<use href="#eye" />
</svg>
PAGE 248
:‫ فيتم التعديل للكود التالي‬،‫جعل العين متحركة‬ .3

<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
<circle cx="50" cy="50" r="15" fill="lightblue"
stroke="#584614" stroke-width="3">
<animate attributeType="XML" attributeName="cx" dur="3s"
values="30;50;70;50;30" repeatCount="indefinite" />
</circle>
</symbol>
<use href="#eye" />
</svg>

:‫تطبيق التدرج والحركة على العينين بالكود التالي‬ .4

<defs>
</radialGradient>
</defs>

<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
<circle cx="50" cy="50" r="15" fill="url('#eyeGradient')"
values="30;50;70;50;30"
repeatCount="indefinite" />
</circle>
</symbol>

<use href="#eye" x="122" y="195" width="140" height="70" />
</svg>
PAGE 250

:‫تصميم األنف بالكود التالي‬ .5

<symbol id="nose" viewBox="0 0 260 260">
<path d="M96,228 Q61,239 60,215 Q50,180 86,149
Q84,88 102,39 Q129,-30 157,38
Q180,86 172,149 Q209,175 194,215
Q196,235 163,227 Q128,257 96,228"
fill="#c3bd79" stroke="#a7a057" />
<ellipse cx="85" cy="205" rx="22" ry="15" fill="#39350e" />
<ellipse cx="85" cy="210" rx="22" ry="13" fill="#58542d" />
</symbol>
<use href="#nose" x="200" y="230" width="100" height="100"/>
</svg>
PAGE 252
:‫رسم الفم بالكود التالي‬ .6

<symbol id="mouth" viewBox="0 0 600 400">
<path d="M10,100 Q280,360 590,100 Q280,460 10,100"
fill="#b29358" />
</symbol>
<use href="#mouth" x="170" y="320" width="150" height="75" />
</svg>

:‫رسم وجه فارغ بالكود التالي‬ .7
fill="#d0cb8e"/>
</svg>
PAGE 254
‫رسم شعر يتناسب مع الوجه بالكود المعدل التالي‪:‬‬ ‫‪.8‬‬
‫"‪<ellipse cx="250" cy="250" rx="150" ry="200‬‬
‫>‪fill="#d0cb8e"/‬‬
‫‪<path d="M120,170 Q10,250 50,150 Q10,50 150,50‬‬
‫‪Q200,-20 300,60 Q350,-10 400,120‬‬
‫"‪Q550,160 390,200 Q200,50 120,170 z‬‬
‫>‪fill="#000" /‬‬
‫>‪</svg‬‬

:‫وضع العينين مع الوجه والشعر بالكود التالي‬ .9

<defs>
</radialGradient>
</defs>

<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
</circle>
</symbol>

fill="#d0cb8e"/>

<path d="M120,170 Q10,250 50,150 Q10,50 150,50
Q200,-20 300,60 Q350,-10 400,120
Q550,160 390,200 Q200,50 120,170 z" fill="#000" />

</svg>
PAGE 256

:‫ رسم حاجبين متوافقين مع العينين بالكود التالي‬.10

<defs>
</radialGradient>
</defs>

<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
</circle>
</symbol>

fill="#d0cb8e"/>

<path d="M120,170 Q10,250 50,150 Q10,50 150,50
Q200,-20 300,60 Q350,-10 400,120
Q550,160 390,200 Q200,50 120,170 z" fill="#000" />

<path d="M150,210 q 45,-35 90,0" fill="none"

</svg>
PAGE 258

:‫ ليكون كامل بالكود التالي‬،‫ زيادة األنف والفم‬.11

<defs>
</radialGradient>
</defs>

<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
</circle>
</symbol>

<symbol id="nose" viewBox="0 0 260 260">
<path d="M96,228 Q61,239 60,215 Q50,180 86,149
Q84,88 102,39 Q129,-30 157,38
Q180,86 172,149 Q209,175 194,215
Q196,235 163,227 Q128,257 96,228"
fill="#c3bd79" stroke="#a7a057" />
</symbol>

<symbol id="mouth" viewBox="0 0 600 400">
<path d="M10,100 Q280,360 590,100 Q280,460 10,100"
fill="#b29358" />
</symbol>
PAGE 260

fill="#d0cb8e"/>

<path d="M120,170 Q10,250 50,150 Q10,50 150,50
Q200,-20 300,60 Q350,-10 400,120
Q550,160 390,200 Q200,50 120,170 z" fill="#000" />



<use href="#nose" x="200" y="230" width="100" height="100"/>

<use href="#mouth" x="170" y="320" width="150" height="75" />
</svg>

PAGE 262
‫رسم سفينة‬
‫‪ .1‬سأرسم السفينة بيدي لتكون مثل الشكل التالي‪:‬‬
‫واآلن سأفتح نفس الصورة بالـ ‪ paint‬الستقرأ النقاط تقريبياً‪:‬‬

:‫رسم تقديري للبحر بالكود التالي‬ .2
<path d="M 0,500
Q 50,450 100,500
t 100,0
t 100,0
t 100,0
t 100,0
t 100,0
t 100,0
t 100,0
t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
</svg>
PAGE 264
:‫وضع السفينة خلف الموج بالكود التالي‬ .3

<path d="M620,550 Q700,400 680,320
Q450,450 260,330
Q230,380 140,340
Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
</svg>

:‫ بالكود التالي‬،‫وضع أساس الشراع مع ما سبق‬ .4

<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"

<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
</svg>
PAGE 266

:‫ لجزء الشراع بالكود التالي‬symbol ‫انشاء‬ .5


<symbol id="sail" viewBox="0 0 200 200">
<path d="M0,40 H160 L 190,195 H0 z"
stroke="#26a226" stroke-width=3 fill="#44cc44"/>
<path d="M160,40 Q 80,0 0,2 V40 z"
stroke="#26a226" stroke-width=3 fill="#ccc744"/>
</symbol>
<use href="#sail" />
</svg>
PAGE 268
:‫وضع أجزاء الشراع اليمني خلف الشراع بالكود التالي‬ .6


<symbol id="sail" viewBox="0 0 200 200">
<path d="M0,40 H160 L 190,195 H0 z"
<path d="M160,40 Q 80,0 0,2 V40 z"
</symbol>

<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"

<use href="#sail" width="70" height="70" x="285" y="30" />

<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
</svg>

PAGE 270
:‫انشاء رمز جزء الشعار اليساري بالكود التالي‬ .7


<symbol id="sail2" viewBox="0 0 200 200">
<path d="M200,40 h-160 L10,195 H200 z"
<path d="M40,40 Q80,0 200,2 V40 z"
</symbol>
<use href="#sail2" />
</svg>

:‫وضع أجزاء الشراع اليسرى خلف الشراع بالكود التالي‬ .8

<path d="M0,40 H160 L190,195 H0 z"
<path d="M160,40 Q80,0 0,2 V40 z"
</symbol>
<path d="M200,40 h-160 L10,195 H200 z"
<path d="M40,40 Q80,0 200,2 V40 z"
</symbol>

<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"

<use href="#sail1" width="70" height="70" x="285" y="30" />
PAGE 272

<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
</svg>

:‫إنشاء رمز لبشرى بالكود التالي‬ .9

<symbol id="human" viewBox="0 0 51 150">
<line x1="25" y1="49" x2="25" y2="100"
stroke="#000" stroke-width="3" />
<path d="M0,150 L25,100 L50,150" fill="none"
<circle cx="26" cy="26" r="25" fill="#c7c757" stroke="#000" />
</symbol>
<use href="#human" />

</svg>
PAGE 274
:‫ وضع البشرى على السفينة فيكون الكود كالتالي‬.10

<path d="M0,40 H160 L190,195 H0 z"
<path d="M160,40 Q80,0 0,2 V40 z"
</symbol>

<path d="M200,40 h-160 L10,195 H200 z"
<path d="M40,40 Q80,0 200,2 V40 z"
</symbol>

<line x1="25" y1="49" x2="25" y2="100"
</symbol>


<use href="#human" width="40" height="120" x="595" y="245" />

<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"



<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
</svg>
PAGE 276

:‫ رسم السنارة مع البشرى فيكون الكود كالتالي‬.11

<path d="M0,40 H160 L190,195 H0 z"
<path d="M160,40 Q80,0 0,2 V40 z"
</symbol>

<path d="M200,40 h-160 L10,195 H200 z"
<path d="M40,40 Q80,0 200,2 V40 z"
</symbol>

<line x1="25" y1="49" x2="25" y2="100"
</symbol>
PAGE 278

<path d="M565,310 l160,-5" stroke="#00A" stroke-width="3" />
<path d="M725,305 v250" stroke="#AAA" />
<circle cx="635" cy="310" r="7" fill="#00F" />

<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"



<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
</svg>

PAGE 280
:‫ وضع الشمس باألعلى فيكون الكود كالتالي‬.12

<path d="M0,40 H160 L190,195 H0 z"
<path d="M160,40 Q80,0 0,2 V40 z"
</symbol>

<path d="M200,40 h-160 L10,195 H200 z"
<path d="M40,40 Q80,0 200,2 V40 z"
</symbol>

<line x1="25" y1="49" x2="25" y2="100"
</symbol>



<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"



<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"

<circle cx="755" cy="75" r="70" fill="yellow" stroke="orange" />
</svg>
PAGE 282

:‫ إنشاء رمز للتعبير عن الطائر بالكود التالي‬.13

<symbol id="bird" viewBox="0 0 150 50">
<path d="M0,50 Q35,0 75,30 Q110,0 150,50"
fill="none" stroke="#00D" />
</symbol>
<use href="#bird"/>
</svg>
PAGE 284
:‫ فيكون الكود النهائي للسفينة كالتالي‬،‫ وضع الطيور‬.14

<path d="M0,40 H160 L190,195 H0 z"
<path d="M160,40 Q80,0 0,2 V40 z"
</symbol>

<path d="M200,40 h-160 L10,195 H200 z"
<path d="M40,40 Q80,0 200,2 V40 z"
</symbol>

<line x1="25" y1="49" x2="25" y2="100"
</symbol>

<symbol id="bird" viewBox="0 0 150 50">
<path d="M0,50 Q35,0 75,30 Q110,0 150,50"
fill="none" stroke="#00D" />
</symbol>



<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
<path d="M260,330 Q220,460 380,550"

<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"



<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"

<circle cx="755" cy="75" r="70" fill="yellow" stroke="orange" />
PAGE 286

<use href="#bird" width="60" height="20" x="500" />
<use href="#bird" width="60" height="20" x="400" />
<use href="#bird" width="60" height="20" x="450" y="50" />
</svg>

‫تقرير مرتبات الموظفين‬
:‫ نبدأ التقرير بالمحاور االفقي والرأسي بالكود التالي‬.1

<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
</svg>
PAGE 288
:‫إضافة خطوط اشارات للمحور الرأسي فيكون الكود كالتالي‬ .2

<path d="M100,100 v400 h600"

<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"
fill="none" stroke="#AAA" stroke-width="1" />
</svg>

PAGE 290
:‫إضافة خطوط كعالمات للمحور األفقي فيكون الكود كالتالي‬ .3

<path d="M100,100 v400 h600"

<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"

<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"
fill="none" stroke="#000" stroke-width="3"/>
</svg>

PAGE 292
:‫إضافة نصوص المحور الرأسي فيكون الكود كالتالي‬ .4

<path d="M100,100 v400 h600"

<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"

<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"

<text x="20" y="152" fill="#A00">120,000</text>
</svg>
PAGE 294
:‫إضافة نصوص المحور األفقي فيكون الكود كالتالي‬ .5

<path d="M100,100 v400 h600"

<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"

<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"



<text x="172" y="535" fill="#009">2015</text>
<text x="272" y="535" fill="#009">2016</text>
<text x="372" y="535" fill="#009">2017</text>
<text x="472" y="535" fill="#009">2018</text>
<text x="572" y="535" fill="#009">2019</text>
</svg>
PAGE 296
:‫ فيكون الكود النهائي كالتالي‬،‫إضافة أشرطة البيانات‬ .6

<path d="M100,100 v400 h600"

<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"

<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"



<text x="172" y="535" fill="#009">2015</text>
<text x="272" y="535" fill="#009">2016</text>
<text x="372" y="535" fill="#009">2017</text>
<text x="472" y="535" fill="#009">2018</text>
<text x="572" y="535" fill="#009">2019</text>

<path d="M170,498 v-148 h35 v148 z"
fill="#0fbf45" stroke="#109538" stroke-width="2" />
<path d="M270,498 v-195 h35 v195 z"

fill="#2738ba" stroke="#1a2896" stroke-width="2" />
<path d="M370,498 v-245 h35 v245 z"

fill="#eded0e" stroke="#bebe10" stroke-width="2" />
<path d="M470,498 v-346 h35 v346 z"

fill="#c91d4b" stroke="#a5133a" stroke-width="2" />
<path d="M570,498 v-300 h35 v300 z"

fill="#b51dc9" stroke="#9016a0" stroke-width="2" />
</svg>
PAGE 298

‫معلومات عن بعض الوسوم‬

‫اليك معلومات عن بعض الوسوم بعد الترجمة‪ ،‬كما يلي]‪:[4‬‬
‫الوسم ‪set‬‬
‫يوفر عنصر ‪ set‬وسيلة بسيطة لتعيين قيمة خاصية لفترة محددة فقط‪.‬‬
‫الوسم ‪view‬‬
‫طريقة العرض ‪ view‬هي طريقة محددة لعرض الصورة‪ ،‬مثل مستوى‬
‫التكبير أو عرض التفاصيل‪.‬‬
‫الوسم ‪metadata‬‬
‫يضيف عنصر ‪ metadata‬بيانات التعريف إلى محتوى ‪،SVG‬‬
‫فالبيانات الوصفية هي معلومات منظمة حول البيانات نفسها‪ ،‬ويجب أن‬
‫تكون محتويات <‪ >metadata‬عناصر من مساحات أسماء‬
‫‪ XML‬األخرى مثل ‪ ، FOAF ،RDF‬إلخ‪.‬‬
‫‪PAGE 300‬‬
‫الوسم ‪hatch‬‬
‫يتم استخدام عنصر ‪ hatch‬لملء كائن ما أو تحديده باستخدام مسار‬
‫واحد أو أكثر من المسارات المحددة مسبقاً‪ ،‬والتي تتكرر على فترات زمنية‬
‫محددة في اتجاه محدد لتغطية المساحات المراد رسمها‪ ،‬ويستخدم معه‬
‫الوسم ‪ hatchpath‬في العمل‪.‬‬
‫الوسم ‪foreignObject‬‬
‫يتضمن عنصر ‪ foreignObject‬عناصر مختلفة من فضاء األسماء‬
‫‪ namespace‬للـ ‪ ،XML‬في سياق مستعرض الويب‪ ،‬ومن المرجح‬
‫أن يكون ‪.(X)HTML‬‬
‫الوسم ‪discard‬‬
‫يتيح عنصر ‪ discard‬للـ ‪ authors‬تحديد الوقت الذي سيتم فيه‬
‫تجاهل عناصر معينة‪ ،‬وبالتالي تقليل الموارد المطلوبة من قبل ‪،SVG‬‬
‫ويعد هذا مفيداً في الحفاظ على الذاكرة أثناء عرض المستندات الطويلة‪.‬‬

‫الوسم ‪script‬‬
‫لكتابة أكواد ‪ JavaScript‬داخل الـ ‪.SVG‬‬
‫الوسم ‪solidcolor‬‬
‫أثناء عملك تحب أن تتجه نحو التنظيم‪ ،‬والوسم ‪ solidcolor‬يساعدك‬
‫في ذلك عن طريق أن تجمع مجموعة من األلوان الخاصة بك‪ ،‬وتجعل ‪id‬‬
‫مميز لكل لون‪ ،‬ثم تعمل بهم وتنادي عليهم بالـ ‪ id‬لكل لون‪ ،‬وفي أي‬
‫وقت إذا أحببت تغيير اللون سيتغير على الكل‪ ،‬ولكن مع األسف غير مدعوم‬
‫على أغلب المتصفحات حتى اآلن‪.‬‬
‫الوسم ‪color-profile‬‬
‫هو ‪ ،Deprecated‬أي تم االستغناء عنه‪ ،‬وهو يسمح بوصف ملف‬
‫مخصص للون المستخدم للصورة‪.‬‬
‫‪PAGE 302‬‬
‫دورات األكاديمية‬
‫ أن تنشرها في كل مكان من الروابط‬،‫ ووصيتي لك‬،‫اليك كنوز وهدايا‬
‫ وأيضاً وصيتي لك بأن تشاهدها وتنصح الجميع بمشاهدتها من‬،‫األصلية‬
. ‫ لتنجح هذه الكورسات بفضل اهلل‬،‫اليوتيوب من أكاديمية حسونة‬
‫شرح في قصص نجاح‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflvUNrnmYsLPbU2t4oG0P-8
‫شرح في الكمبيوتر بشكل عام‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfm_dFhGnawAlnOOE1aSwoSN
‫شرح عن مقدمة في الحاسبات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmt3FFalD6y-UjTshUC_zXM
‫شرح في أنظمة ماك ولينكس‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmTj0gddZTgcPdqDGP1qscF
‫ من األساس وبالتفصيل‬Windows ‫شرح في الويندوز‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkKu8K8Dz603sxLa3eQ-g6G
‫ من األساس‬Word ‫شرح في برنامج وورد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfk_q1_xWEJ8gl_nbPY_Y75A

‫ من األساس‬Excel ‫شرح في برنامج اكسيل‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmeaZUramzmRwJVLQThBiuu
Photoshop ‫شرح في برنامج الفوتوشوب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfntLWyOJQKyfR5RcuXdzfnU
‫شرح في البرامج الجاهزة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmCe0esfmzTZTQ_AfoLOH1M
‫ أمثلة‬+ ‫شرح في الخوارزميات وخرائط التدفق‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmOvX3-91zteoSP-b0VS44o
‫شرح آخر في الخوارزميات وخرائط التدفق‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflwIO8IiPxNkSSb-ezkNqDs
‫شرح في تحليل البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkDoNSoObO0s_OZn67DFAti
‫برنامج المبرمجتية‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfnLcjFtaI9O5vt1DKdSVM4K
‫برنامج أساس مبرمج‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkb-fDWH14OjJowQX_Rztgk
‫شرح في ال اعرف شيء عن الكمبيوتر وأريد أن اكون مبرمج‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKiRVeW9H2k4TnwXZbaoc8
PAGE 304
‫شرح في منهج الصف الثاني االعدادي‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmkYyJx1FJcSx1QOJnHanpQ
‫شرح في منهج الصف الثالث االعدادي‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmM2mbNfA_4jTI3vyK4iCOE
HTML ‫شرح في كورس قديم عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmpHW37aNxMFosXD_p1jQz0
HTML ‫شرح في كورس جديد عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnXKjZ9UcT5BVt9x19BlItX
CSS ‫شرح في كورس عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflO6xnz4jpmzzSuo5B63aJf
JavaScript ‫شرح في كورس عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmiYYwt29BG7N9zzsd-jLRQ
‫شرح في دردشة برمجة عملي‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl0CJzVbN-DHGUJ_Y2DpPim
j-query ‫شرح في الويب جي كويري‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfll3ObMFi02Ry7oRU3MJVRG

bootstrap ‫شرح في الوي بوت ستراب‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmzBcYnuLNrmdLxYCDzJgQi
JSON ‫شرح في جاسون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflA5jVQbAAHVizSxoeOAtgq
Angular ‫شرح في انجوالر‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflbtKBrCp5U2UdbeV1c7F-5
‫ وسي شارب ومع الخدمات األساسية‬asp.net ‫شرح في الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflkDPHlOLTKV1daEp4pvIgA
AJAX ‫شرح في الويب ومع‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmYd8YFZtSmCzc3hcZXVua9
MySQL ‫شرح في قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflO4GPp9vMtUgry-xAQKl7i
PHP ‫شرح في الويب ولغة البرمجة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmPDQahhTDdd1DJ4PwQl3pC
‫شرح في الويب ومع دبلومة الويب الكاملة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflYXyXHNiG-hyyVaz7-9ujn
‫شرح في الويب ومع سلسلة تعلم الفيديو الواحد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnPUohWz2vPjm0obEjzZJD8
PAGE 306
‫شرح في الويب ومع صناعة آلة حاسبة بسيطة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkYSpySS9Czt3Dxx2rsvqcN
C# ‫شرح في البرمجة واساسيات السي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfm8nQAoJF5u2aV43tMRAAmr
C# ‫شرح في شاشات السي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnbNoGB0NdoRdllq9fdo6uM
C# ‫ وسي شارب‬OOP ‫شرح في البرمجة كائنية التوجه‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl6UP-PlUli03pokSc4af2S
C# ASP.NET‫شرح في الويب مع سي شارب و‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmi8jwSbqiQuVfxeXIBk-bW
C# ‫ مع‬DB ‫شرح في عالم واسع من قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflAus00vgdVEzLUBCx8ooH_
C#‫شرح في أمثلة عملية مع قواعد البيانات و‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmYdNXeeaBjt4mxSX5RWjzo
Database ‫شرح في أسرار قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKHFH1uUwdpeW8h-A8lAI_

C# ‫ مع‬LINQ ‫شرح في الـ‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfnW4RDln5tzw6htvNhnkr7t
‫شرح في عمل برنامج المطاعم واألكالت‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnK119pOw2oEDXc0AEpIfd5
‫شرح في عمل برنامج المبيعات الشامل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfm2vgnbTfoxoUSlxoag0UHX
‫شرح في دورة السي شارب العمالقة بفضل اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkDF2xTIB5kX8gdthmLTufx
C# ‫شرح في قواعد البيانات الشامل والسي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmg0C_6ON0IRFWrifni6CTq
C# ‫ مع‬MySQL ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkQ7fgtqD4b4VuhxV6RzNu-
C# ‫ مع‬Oracle ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl0vnBDg28R0DW9HBkyHvc-
‫شرح في عمل متصفح بالسي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl7ToU9EDuRVYiki9C9wxnJ
‫شرح في كورس سي شارب مختصر‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmIhzWCyXnYlxz8ALlfPRAn
PAGE 308
ASP.NET‫شرح في الويب ومع الدورة التنفيذية في سي شارب و‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfn6kI3NyvzTDm-wdw9EX7D6
VB.NET ‫شرح في البرمجة ومع اساسيات فيجوال بيسك‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflKvIMpDSgFTJsR_IO1dH9i
VB.NET ‫شرح في شاشات الفيجوال بيسك‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfn7Pz7MnzABWryuHRP9ab7O
‫شرح في دورة الفيجوال بيسك العمالقة بإذن اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmLGhFsQ1G5cPv1xokzBsbT
‫شرح في فيجوال بيسك وسكول سيرفر مع التقارير الكاملة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkkhf3ha77qccAWYMvgM7LR
VB.NET ‫ مع‬Oracle ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflAkiMFHY-0Jc_XXnpLWQO0
VB.NET ‫ مع‬Access ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkdbHPdTBpcYZzPQtPUeR7I
VB 6 ‫شرح في الفيجوال بيسك القديم‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfk5L0DQbV8DyUwfoAhQyieg

JAVA ‫شرح في البرمجة مع أساسيات لغة الجافا‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIflflvzYY7B1d5CJjXpbIriU
JAVA ‫شرح في بداية البرمجة الكائنية مع جافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmb25mVAsCJy_Ehgu5rbbQx
JAVA ‫شرح في البرمجة الكائنية مع جافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnT2i7Ba4F2nrWb_ENXjyTs
‫شرح في جافا مع قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKQjOoZc540z3fmGe-slLU
Android ‫شرح في جافا مع اندرويد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnQ6WRvLbWok4ZZww4k3T1u
‫شرح في شاشات الجافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl2XxZwryDuPO5ZLkRhL-CS
‫شرح في دورة الجافا العمالقة بفضل اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfn9BnepQuzWiM_ZPIwUDawL
‫شرح في أمثلة عن جافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnUMvey6UAveK5msn8L_ulS
‫ للجافا‬jar ‫شرح في التعامل مع ملف الـ‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnDa6squg4OjDjYfx5YC8Zx
PAGE 310
Kotlin ‫شرح في البرمجة مع لغة البرمجة كوتلن‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl5UHtM6DRFAVn3PBuJ7NGD
Kotlin ‫شرح في كالم عن لغة كوتلن‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl_KgeClVL_xH_JXFqIsV0Y
Android ‫شرح في كوتلن مع اندرويد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmbpu6cVCxo98u_Yk0Hfxah
Python ‫شرح في البرمجة ومع اساسيات البايثون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmm35tXSbxsFDouRJAPP9Y2
‫ مع البايثون‬OOP ‫شرح في البرمجة الكائنية‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmHvfmFZZ0XuzZYuoosG9kl
OOP‫ اساسيات و‬Python ‫شرح في البرمجة مع لغة البايثون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnVNMUcSLFFyDzuLDheF99n
Python ‫شرح في شاشات البايثون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmMhy8GltKHW5UJ_ZPnGJ0K
‫شرح في دورة البايثون العمالقة بفضل اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnM9y0sQRwjVz2-IwvnEJep

Ring ‫شرح في البرمجة مع لغة الرينج‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfl6KzfLziFl650MmThnQ0jT
Ring ‫ ورينج‬OOP ‫شرح في البرمجة الكائنية‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl5TA4nTIIVWsfDyVwIBP6y
Ring ‫شرح في شاشات رينج‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmE8gCtJQpIOGmBz3bc_Nrs
C++ ‫شرح في البرمجة مع لغة السي بلس بلس‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkz_N9aNWXRByEJOudCxSRh
‫شرح متنوع وعام في عالم البرمجة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl6aI0bGb0zWZyGHc2ctcW7
SQL Server ‫شرح في قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflvUe-YfDpIqqnU70BopQ3q
SQL ‫شرح في قواعد البيانات ولغة السكول‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmNd2URuqVO5Itboj_LQyrx
Access ‫شرح في قواعد البيانات مع أكسس‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKpy1msMUPqVYdpu3nOdkY
Multimedia DB ‫شرح في قواعد بيانات الوسائط المتعددة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmMYvE8mnEH4VT-4v21XV6p
PAGE 312
Magic DB ‫شرح في عمل برنامجك مع األداة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnkb0hIry8E0LbA0flhaXTo
‫شرح في برنامج امتحان الطالب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnd5v0u8hxwTKXebJK9QpqG
‫تسالي مبرمجين‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfl_zc__duOyEhaCCPZRAuHv
‫اكاديمية حسونة‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmxKFdzlyAna7sYE_L2hI0o
Events ‫لقاءات وأحداث‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmFsmWKCbc_rf6qAPbVykMJ

‫شكر خاص‬
‫الشكر أوالً وأخيراً وابتداء وانتهاء هلل عز وجل‪ ،‬ثم نشكر كل من‪:‬‬
‫شكر ألبي وأمي اللذان ربياني صغيرا‪.‬‬ ‫•‬
‫شكر لكل أصدقائي واصحابي واحبابي في كل مكان‪.‬‬ ‫•‬
‫شكر لكل من عرف قدر العلم‪.‬‬ ‫•‬
‫شكر لكل طالب او طالبة او اخ او صاحب او صديق او حبيب ينشر هذا العمل‬ ‫•‬
‫في كل مكان ليفيد الجميع بإذن اهلل‪.‬‬
‫شكر لألستاذ احمد باريان على دعمه في نشر العلم في كل مكان‪.‬‬ ‫•‬
‫شكر للمهندس أحمد إبراهيم سالم (‪)Ahmed Ibrahim‬‬ ‫•‬
‫شكر للدكتور عادل عبد الصبور (‪.)Adel Sabour‬‬ ‫•‬
‫شكر للمهندس محمود سمير فايد (‪.)Mahmoud Fayed‬‬ ‫•‬
‫شكر للمهندس أسامة محمد (‪.)Osama Elzero‬‬ ‫•‬
‫شكر للقائمين على موقع ‪developer.mozilla.org‬‬ ‫•‬
‫شكر للقائمين على موقع ‪wikipedia.org‬‬ ‫•‬
‫شكر للقائمين على موقع ‪w3.org‬‬ ‫•‬
‫‪PAGE 314‬‬
‫نشكرك على قراءتك‬
‫على قراءتك هذا الكتاب‪ ،‬ونتمنى لك‬ ‫أوالً‪ :‬نتقدم لك بخالص الشكر‬
‫االستفادة الكاملة من محتواه‪.‬‬
‫في أكاديمية حسونة لتنضم‬ ‫ثانياً‪ :‬ال تنسى أن تسجل لنفسك حساب‬
‫إلينا وتشارك معنا كل محتويات الموقع‪ ،‬سجل من الرابط التالي‪:‬‬
‫‪https://www.hassouna-academy.com/register‬‬
‫ثالثاً‪ :‬يسر أكاديمية حسونة أن تخبرها برأيك عن هذا الكتاب من خالل‬

‫من الرابط التالي‪:‬‬ ‫تقديم كلمة شكر‬
‫‪https://www.hassouna-academy.com/thanks‬‬

References ‫المراجع‬
‫الجدول التالي يحتوي على المراجع التي تم الرجوع إليها أثناء تأليف هذا‬
.‫ أو معلوماتية‬،‫ سواء كانت مراجع تعليمية مرئية أو مقروءة‬،‫الكتاب‬
‫الرابط‬ ‫م المرجع‬
https://www.hassouna-academy.com/
‫ اكاديمية حسونة‬1
https://www.wikipedia.org/ ‫ ويكيبيديا‬2
https://www.w3.org ‫ منظمة الويب العالمية‬3
https://developer.mozilla.org mozilla 4
PAGE 316
‫الختام ‪The End‬‬

‫‪ ،‬خالصة إن شاء اهلل‪ ،‬فكر‬ ‫واآلن‪ ،‬أتوجه الى أحبابي بكلمة من القلب‬
‫معي في اختراعات اإلنسان‪ ،‬فكر في تطويرات وصناعات اإلنسان‪ ،‬فكر في‬
‫اإلنسان وقدراته‪ ،‬وقل سبحان اهلل الذي خلق اإلنسان‪ ،‬فكر في قول اهلل عن‬
‫أَح َس ِن تَقْوِيٍم"‪ ،‬فكر في‬ ‫اْلنس ِ‬
‫ان في ْ‬
‫د خَلَقْنَا ْ َ َ‬
‫اإلنسان في القرآن الكريم "لَقَ ْ‬
‫قدرة اهلل الواحد األحد‪ ،‬الفرد الصمد‪ ،‬الذي لم يلد ولم يولد‪ ،‬ولم يكن له‬
‫كفؤاً أحد‪ ،‬فكر في اهلل العظيم‪ ،‬الذي خلق السماوات واألرض‪ ،‬فكر في رب‬
‫العزة‪ ،‬فكر في رب الكون‪ ،‬وقل‪ ،‬سبحان اهلل‪ ،‬وقل‪ ،‬سبحان الملك العظيم‪،‬‬
‫وقل سبحان ذي العزة والجبروت‪ ،‬سبحان ذو الملك والملكوت‪ ،‬سبحان اهلل‬
‫العظيم‪ ،‬سبحان اهلل الكريم‪ ،‬سبحان اهلل‪ ،‬عدد خلقه‪ ،‬ورضا نفسه‪ ،‬وزنة‬
‫عرشه‪ ،‬ومداد كلماته‪ ،‬وآخر دعوانا "الحمد هلل رب العالمين"‪.‬‬

كتاب الجرافيك الأقوي - صخرة الأساس في SVG حسونة اكاديمي

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

كتاب الجرافيك الأقوي - صخرة الأساس في SVG حسونة اكاديمي

Uploaded by

Copyright:

Available Formats

‫الرسوم قابلة التحجيم ‪SVG‬‬

‫"صخرة األساس"‬ ‫ثم تمارس أكثر وتستمر في‬

‫‪BASIC ROCK‬‬ ‫احمد حسونة‬

‫تأليف‪ :‬احمد حسونة عام ‪2019‬‬

‫فهرس المحتويات ‪Index‬‬

‫استخدام ‪94 ...................................Move To‬‬

‫صفحة رقم ‪3‬‬

‫رسم تقديري للكعبة المشرفة ‪232 ........................ 3D‬‬

‫صفحة رقم ‪5‬‬

‫مقدمة أساسية – هامة جداً‬

‫صفحة رقم ‪7‬‬

‫المؤلف‪ :‬احمد حسونة‬

‫صفحة رقم ‪9‬‬

:‫تم دعم هذا الكتاب بواسطة كل من‬

‫• أحمد محمد باريان من مكة المكرمة‬

.‫وذلك بالتعاون مع أكاديمية حسونة‬

‫هام جداً ‪ Very Important‬قبل الكتاب‬

‫موقع حسونة أكاديمي ←‬

‫قـناة حسونة أكاديمي ← ‪https://www.youtube.com/user/HassounaAcademy‬‬

‫شرح مرئي لهذا الكتاب‬

CSS ‫شرح كتاب صخرة األساس‬

HTML ‫شرح كتاب صخرة األساس‬

‫ما هي الرسوم قابلة التحجيم ‪SVG‬‬

‫الـ ‪ SVG‬تعمل بالـ ‪ Vector‬على أساس لغة ‪.XML‬‬

‫صفحة رقم ‪13‬‬

‫قبل البداية في عالم ‪SVG‬‬

‫بعد أن تذاكر كتاب "صخرة األساس" في اللغة ‪ ،HTML‬تستطيع أن‬

‫أساس للـ ‪SVG‬‬

‫عند التعامل مع الوسم ‪ svg‬نجد أن الموضوع بفضل اهلل في غاية‬

‫ال تستغرب عندما تستخدم خاصية في ‪ html‬بقيمة عددية او لونية او‬

‫لن نهتم بالوسوم األساسية مثل ‪ html‬و‪ body‬وال حتى‬

‫البد من التركيز على الخصائص وماذا تفعل في بداية كل درس‪.‬‬

‫صفحة رقم ‪15‬‬

‫ثمرة ‪ – SVG‬هام جداً‬

‫عندما تتعلم ‪ SVG‬تستطيع دمجها مع لغة ‪ html‬ولغة ‪ css‬لتنتج‬

‫عندما تتعلم ‪ SVG‬تستطيع التغيير في الملفات الرسومات االحترافية‬

‫عندما تتعلم ‪ SVG‬سوف تصمم ما تريد بمجموعة مفهومة وسلسة‬

‫عند تعلمك ‪ SVG‬تشعر وكأن معك مجموعة كبيرة من مكعبات األطفال‬

‫عندما تنتج ملفات بامتداد ‪ svg‬ألي رسومات ‪ svg‬بأي برنامج مثل‬

‫صفحة رقم ‪17‬‬

‫صفحة رقم ‪19‬‬

‫صفحة رقم ‪21‬‬

‫صفحة رقم ‪23‬‬

‫صفحة رقم ‪25‬‬

‫كود! قم بكتابة الكود التالي داخل العنصر ‪ body‬ثم احفظه‪:‬‬

‫الحظ انه تم عمل وسم ‪ svg‬ليأخذ عرض ‪ width‬وطول‬

‫كود! قم بكتابة الكود التالي داخل العنصر ‪ body‬ثم احفظه‪:‬‬

‫هنا تم وضع النقطة األولي بحيث تبعد عن الحافة اليسرى ‪ 10‬وعن‬

‫صفحة رقم ‪27‬‬

svg ‫ فما بالك بباقي الـ‬،‫ فقط‬line ‫الحظ أن كل هذا بخط‬

stroking )‫تصميمات اإلطار(التخطيط‬

‫ والحظ أيضاً أن لون‬،‫وهنا الحظ أن حجم اإلطار يختلف في كل مرة‬

‫‪<line x1=30 y1=50 x2=350 y2=50 style="stroke:#808;stroke-‬‬

‫‪<line‬‬ ‫‪x1=30‬‬ ‫‪y1=100‬‬ ‫‪x2=350‬‬ ‫‪y2=100‬‬

‫‪<line‬‬ ‫‪x1=30‬‬ ‫‪y1=150‬‬ ‫‪x2=350‬‬ ‫‪y2=150‬‬

‫الحظ أن جميع الـ ‪ Strokes‬بنفس الحجم‪ ،‬ثم غطاء الخط‬

‫صفحة رقم ‪31‬‬

‫ هي‬stroke-dasharray ‫الحظ أن القيمة التي أخذتها الخاصية‬

.‫ للخط‬2,5 ‫ بالقيمة‬5 ‫ وترك‬2 ‫الحظ هنا رسم‬

‫الحظ هنا رسم ‪ 7‬وترك ‪ 2‬بالقيمة ‪ 7,2‬للخط‪.‬‬

‫الحظ هنا رسم ‪ 20‬وترك ‪ 10‬ثم رسم ‪ 10‬وترك ‪ 20‬وهكذا يتم‬

‫صفحة رقم ‪33‬‬

7 ‫ ثم رسم‬،7 ‫ وترك‬7 ‫ ثم رسم‬،15 ‫ وترك‬30 ‫الحظ هنا بدأ برسم‬

‫واآلن هيا نجرب دائرة أخري مع استخدام الخصائص بلغة ‪css‬‬