النتائج 1 إلى 13 من 13

الموضوع: نظرة على لغة SVG

  1. #1
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261

    نظرة على لغة SVG



    السلام عليكم و رحمة الله و بركاته

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


    أترككم الآن مع الموضوع..
    __________________________________________________________________________

    SVG
    هي تقنية خاصة بعرض الرسوم على إنترنت تعتمد على تمثيل الرسوم بإستخدام النصوص البرمجية المكتوبة بلغة XML الوصفية بدلا من الطريقة المتبعة في نسق الرسوم الأخرى كـ JPG و GIF والتي يتم فيها وصف كل خانة لونيّة (بكسل) في الصورة.


    الرسم بالنصوص البرمجية
    تخيل المشكلة التالية؛ لنفترض أنك تعمل ضمن فريق المبيعات في مؤسسة ما، وقرر مدير دائرتك أنه سيقوم بطرح قسم جديد ضمن الإنترانت الخاصة بالشركة يتم من خلاله متابعة النتائج الأسبوعية والشهرية للنتائج التي يقوم فريق المبيعات بتحقيقها خلال العام. وضمن هذا الترتيب يتعين على كل موظف مبيعات أن يقوم بإدخال نتائج مبيعاته اليومية إلى قاعدة بيانات مرتبطة بالإنترانت، واعتمادا على هذه الأرقام سيتم توليد مخططات بيانية ورسوم تعبر عن تطور عملية البيع في الشركة. وللتعبير عن التغيرات اليومية يجب استخدام تقنيات تكون قادرة على تغيير الرسم البياني حسب تغير الأرقام. هذه التقنيات موجودة اليوم ولكنها معقدة ومكلفة، وتتطلب الكثير من الكود الخاص. ولكن الأمر يتعدى ذلك، فالعديد منا، وفي حالة استخدام مثل هذا التطبيق، سيرغب في استخدام المخططات البيانية والرسوم الناتجة، ضمن وثائق أخرى، وطباعتها ضمن المنشورات الداخلية للمؤسسة، أو تلك التي توزع على العملاء. والتقنيات الحالية لا تسمح لنا بإعادة إنتاج رسوم الويب بشكل نظيف يمكن إعادة استخدامه خارج الويب، أو حتى طباعته بأحجام أكبر مما هو موجود على الشاشة. هذه هي تماما التحديات التي تعمل مجموعة SVG (Scalable Vector Graphics) ضمن اتحاد الويب W3C على حلّها. وتتألف هذه المجموعة من ممثلي شركات كبرى مثل أدوبي، وأبل، وكوريل، وهيوليت باكرد، وأي بي أم، وماكروميديا، ومايكروسوفت، وصن مايكروسيستمز، وزيروكس، وغيرها من الشركات. وتهدف هذه المجموعة، وباستخدام لغة XML إلى إنتاج نوع جديد من الرسوم للويب، هذه الرسوم لا تعتمد البكسلات في تشكيلها، ولكنها رسوم وصفية تعتمد الكود. وبكلمات أخرى ستقوم هذه اللغة القياسية والعمومية بتوصيف جميع عناصر الصور والفلاتر والخطوط من خلال الكود بحيث يمكن للمستخدمين الحصول على رسوم معقدة ذات دقة عرض عالية دون استهلاك الكثير من سعة الموجة.


    ما هو المميز في SVG
    الجميل في رسوم SVG هو أنها تقوم بتوصيف الصور باستخدام النصوص البرمجية المكتوبة بلغة XML. وعند أبسط المستويات فإن هذا النص يقوم بوصف الرسوم باعتماد إحداثيات سينية وصادية تصف العلو، والعرض، واللون، الخ. وعندما يتم اعتماد هذه اللغة ضمن متصفحات إنترنت المعروفة، فإنك ستتمكن من عرض صورة معينة ضمن متصفحك وذلك من خلال فتح ملف نصي يحتوي على وصف للصورة. وتتوفر حاليا بعض الملحقات البرمجية للمتصفحات، والتي تمكنها من عرض الصور المرسومة بلغة SVG، وسنقوم في وقت لاحق من هذا المقال بالتعرض لها. ولأن لغة SVG تقوم بوصف العناصر باستخدام الخطوط والمنحنيات، فإنها تتطلب كمية أقل بكثير من سعة الموجة مقارنة بأنساق الصور المستخدمة حاليا (JPGأو GIF) والتي يجب أن يتم نقل كل بكسل بها كي يتم عرضها بصورة كاملة. وبالإضافة إلى هذه الميزة الهامة، فإن هذه الصور، والموصوفة باستخدام المتجهات، تسمح للمستخدم بتكبير الصور أو تصغيرها zooming دون فقدان أي تفصيل من تفاصيل الصور. وأقرب مثال على ذلك هو ما نراه في رسوم فلاش، ولكن الرسوم التي تستخدم نسق SVG ستحتوي على قدرات مضمنة أفضل بكثير من رسوم فلاش. ومن فوائد نسق SVG الأخرى، مقارنة بنسق GIF مثلا، هي أن لوحة الألوان palette لهذا النسق تدعم عرض 16 مليون لون، مع دعم كامل لسجلات الألوان color profiles (وذلك لضمان ظهور الألوان كما هي عند استعراضها باستخدام أدوات، أو متصفحات مختلفة). كما أنه يمكن الحصول على نسخ من الصور عند طباعتها من الطابعات المكتبية مشابهة في دقتها لما يراه المستخدم على الشاشة، ولن يرى المستخدم أية من النتوءات التي يحصل عليها من الصور التي تستخدم تقنية bitmap. ولكن أفضل ميزة في الرسوم التي تستخدم نسق SVG هو إمكانية إنشاء الرسومات بسرعة باستخدام لغة برمجة نصية ومصدر للبيانات. ففي حالة المثال الذي ذكرناه في المقدمة يمكن باستخدام عناصر XML التي تقوم بوصف رسوم svg، كتابة نص برمجي يقوم بعرض نتائج فريق المبيعات على شكل رسوم بيانية (سواء ثنائية أو ثلاثية الأبعاد)، وذلك بشكل تلقائي دون أي تدخل بشري. ويمكنكم أن تتخيلوا مثلا استخدام هذا النسق في مشاريع البناء مثلا، فإذا كان برنامج الرسوم الهندسية الذي تستخدمه (مثل أوتوكاد) مرتبطا بالويب، فإنه يمكن لك أنت وزملاؤك في المكتب، والعميل، والمقاول، أن تتعاونوا بنشر المخطط الهندسي على موقع إنترنت خاص بالمشروع، وبمجرد إدخال تغيير على أبعاد البناء ضمن ملف المشروع في أوتوكاد، فإن كافة المخططات الهندسية الخاصة بالمشروع على الموقع تتغير لتتكيف مع هذا التعديل. ولا حدود هنا للأفكار والإمكانيات التي تتيحها هذه التقنية للعمل من خلال إنترنت.


    لغات سابقة
    في عام 1998، تقدمت جهات إلى اتحاد الويب باقتراحين يتعلقان بعرض الرسوم على إنترنت، كان الأول هو لغة vml (لغة تعليم المتجهات)، و pgml (لغة تعليم الرسوم الدقيقة)، وهاتان اللغتان هما إحدى تطبيقات XML وتستخدمان سمات أنماط CSS. ولكن لغة VML لم تفلح في التحول إلى أحد المقاييس التي يقترحها الاتحاد رغم الدعم القوي لها من قبل مايكروسوفت وشركات أخرى، والمتصفح الوحيد اليوم الذي يمكنه استعراض رسوم VML هو إنترنت إكسبلورر 5 لويندوز. أما PGML، فهو المقياس الذي طورته أدوبي، ودعمته كلا من أي بي أم وصن، كلغة متجهات مناسبة بشكل أكبر لمجتمع التصميم الاحترافي والنشر. وقد قام اتحاد الويب بدراسة كلا الاقتراحين، وقام بما يمكن اعتباره الخطوة المنطقية التالية، حيث قامت بأخذ الأفضل من كلا الاقتراحين وأنشأت اقتراحا جديدا أطلقت عليه اسم SVG، ويدعمه كلا المعسكرين اللذين يدعمان مقياس VML و PGML. ويحرص اتحاد الويب على التأكيد بأن هذه اللغة عمومية وقياسية، بمعنى أنها لا تنتمي إلى شركة أو مؤسسة معينة، وهي متاحة لكل من يريد استخدامها ضمن تطبيقاته، كما أن اتحاد الويب حرص عند اعتماده لهذا المقياس على أن يكون متوافقا مع كافة المقاييس الأخرى التي اعتمدها الاتحاد.


    مرونة في عرض الرسوم ونشرها
    أفضل ما في اللغات المشتقة من XML هو أنها تفصل ما بين المحتوى والشكل الذي يتم عرضه به، وهي بذلك تختلف عن لغة HTML، والتي على الرغم من اعتمادها الأسلوب الهيكلي في تعليم النص، فإنه يمكن استخدامها أيضا في عرض النص. أما شيفرة XML فيمكن استخدامها كأساس لعرض النص، أو كبيانات يمكن استخدامها في تطبيق آخر. والآن، يمكن استخدام لغة XML للانطلاق بعرض الرسوم عبر إنترنت إلى مستو جديد؛ حيث يمكن للنص المضمن في رسوم SVG أن يكون مكتوبا بأي من مشتقات XML المناسبة للتطبيق الذي تُستخدم فيه الرسوم. ويعني ذلك أن رسوم SVG ستتميز بأنها ستكون متاحة للبحث مثلها في ذلك مثل أي نوع من أنواع النص على الويب. وبالتالي، فسيصبح العثور على الصور والرسومات عبر إنترنت أكثر دقة وسرعة، وهو ابتكار آخر يفسح المجال لعدد هائل من تطبيقات إنترنت. ولأن مقياس SVG متوافق مع نموذج الوثائق العناصرية Document Object Model، وهو المقياس الذي تعتمد عليه كافة المقاييس التي يطلقها اتحاد الويب، فإن رسوم SVG قابلة للبرمجة، بمعنى أنه يمكن للمستخدم أن يتفاعل مع هذه الرسوم، كما أنه يمكن لتغييرها أن يؤدي إلى إحداث تغييرات في العناصر الأخرى على صفحات الويب. ويمكن استخدام دوال مثل onmouseover، و onmouseout، و onload، و onfocus، مع الملفات والرسوم التي تستخدم نسق SVG ونسق SVG متوافق عكسيا، بمعنى أنه يمكنك إضافة علامة ALT إلى الصورة مما يسمح للمتصفحات القديمة بعرضها بنسق GIF أو JPG. ولا يوجد حاليا متصفحات يمكنها استعراض رسوم SVG، ولكن شركة أدوبي قامت بطرح ملحقين برمجيين تجريبيين لأجهزة الماكنتوش وويندوز، كما قامت أي بي أم بعرض ملحقين يمكن بواسطتهما استعراض الرسوم بنسق SVG ضمن نظام ويندوز. وقامت شركة Csiro بطرح حزمة برمجية تتضمن مستعرضا لرسوم SVG، وأداة لتحويل الرسوم بهذا النسق إلى عدد من الأنساق الأخرى، وهذه الحزمة مكتوبة بلغة جافا وتحتاج إلى وجود جافا 1.2 أو أعلى، وهذه الحزمة عمومية المصدر Open source ويمكن للمبرمجين الحصول على شيفرتها المصدرية وبالتالي تضمين التقنية في برمجياتهم.


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


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

    كود:
    <text x="2.5cm" y="1.5cm"><tspan style="font-family:Simplified Arabic">This</tspan>
     <tspan style="font-family:Arabic">ל</tspan><tspan style="font-family:Simplified Arabic">SVG.</tspan></text>
    المصدر:
    http://ar.wikipedia.org/wiki/SVG


    أكرر شكري الجزيل لكاتب هذه المقاله..


    تحيتي للجميع
    عماد الصدر





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925


  2. #2
    Banned
    تاريخ التسجيل
    Dec 2000
    المشاركات
    686


    الله يعطيك العافية أخوي الكريم

    شكل الموضوع دسم ورائع

    شكلي بطبعة واقرأه على رواقة ونفهمة زين ...


    تشكرات علي المواضيع المميزه

    مع التحية ...






  3. #3
    عضو سوبر نشيط
    تاريخ التسجيل
    Feb 2003
    المشاركات
    746


    اختيار موفق شكرا جزيلا






  4. #4
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261


    شكراً لكما الدوسري و المغوار..





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925

  5. #5
    عضو فعال
    تاريخ التسجيل
    Aug 2002
    المشاركات
    1,385


    مقاله جميله جدا ...


    وتوفير جهد كبير جدا باستخدام هذه التقنيه ...


    أشكرك أخوي عماد لموافاتك لنا بكل جديد





    __________________
    ง่ายง่ายไปมา,Ви задовольнити
    אני גאה לתמוך האחים שלי למות למען פלסטין

  6. #6
    عضو فعال
    تاريخ التسجيل
    Jun 2003
    المشاركات
    1,143


    عودتنا أن تكون اختياراتك دائماً مميزة ، و هي بالفعل كذلك ..

    اشكرك من صميم قلبي ..

    تحياتي لك

    السلام عليكم





    __________________
    سبحان الله و بحمده سبحان الله العظيم .
    random-x@hotmail.com
    -------------
    بين الفينة و الأخرى ... لماماً أظهر !



  7. رائع للغاية.

    ذكرتني بالأيام الخوالي التي كنت أصنع فيها الصفحات الثلاثية الأبعاد عن طريق لغة VRML المنقضية.

    SVG يبدو إنها مبنية على نفس الفكرة لكن بطريقة مختلفة.

    لكن ... ألا يمكن أن يكون تحويل الصور الفوتوجرافية من jpg. أو png. مثلا إلى توليد ملف SVG. ضخم بعض الشيء ..؟

    أتساءل من هذا لأني أعرف أن تشفير الصور وملفات البايناري إلى نصوص عن طريق base64 عن طريق البريد الإلكتروني أو برامج php يزيد من حجم الملف حوالي 30%.
    ولا أعني هنا المخططات البيانية هنا فهي بسيطة ولكني أعني الصور الفوتوجرافية العادية المتوسطة أو العالية الجودة.






  8. #8
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261


    Bomber, random_x:
    أشكركما على رديكما..





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925

  9. #9
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261


    اقتباس المشاركة الأصلية كتبت بواسطة أبو حازم الاسكندراني
    رائع للغاية.

    ذكرتني بالأيام الخوالي التي كنت أصنع فيها الصفحات الثلاثية الأبعاد عن طريق لغة VRML المنقضية.

    SVG يبدو إنها مبنية على نفس الفكرة لكن بطريقة مختلفة.

    لكن ... ألا يمكن أن يكون تحويل الصور الفوتوجرافية من jpg. أو png. مثلا إلى توليد ملف SVG. ضخم بعض الشيء ..؟

    أتساءل من هذا لأني أعرف أن تشفير الصور وملفات البايناري إلى نصوص عن طريق base64 عن طريق البريد الإلكتروني أو برامج php يزيد من حجم الملف حوالي 30%.
    ولا أعني هنا المخططات البيانية هنا فهي بسيطة ولكني أعني الصور الفوتوجرافية العادية المتوسطة أو العالية الجودة.
    تحيتي لك أخي أبو حازم، و أشكرك جزيل الشكر على ردك..

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

    أما بالنسبه للSVG فهي عبارة عن جرافيكس يتم تعريف المتصفح عليه من خلال أكواد الXML، صحيح أن معظم المصممين سيتجهون لاستخدام بعض البرامج لعمل رسوماتهم مثل برنامج Adobe Illustrator أو غيره.. لكن هذا لا يمنع من وجود بعض الأشخاص الآخرين الذي يفضلون استخدام الكود لبناء الجرافيكس الذين هم بحاجه لها في مواقعهم.

    بالنسبه لسؤالك أخي أبو حازم، فالهدف من الـ SVG كما فهمت من المقال و من بعض قراءاتي عنها أنها لم تأتي لتحل محل الصور المخزنه بالإمتداد jpg بل جاءت عوضاً عن الرسومات أو كما يمكن تسميتها (جرافيكس) و التي كانت تخزن بالإمتداد Gif لإن تلك الرسومات سيكون من الأسهل تخزينها على شكل vectors بدلاً من استخدام النظام الحالي (الـ pixels).


    شكراً لك مره أخرى على ردك..

    عماد الصدر





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925



  10. نعم .. فهمت المقصود الآن.

    شكرا على شرحك الرائع.

    وبانتظار المزيد من إبداعاتك المتميزة.






  11. #11
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2004
    المشاركات
    481


    isader.com
    لا أعرف ماذا أقول.. بصراحة إنت من الأشخاص القلال ... اللي أشوفهم شغالين في الإنترنت يخدمون العالم!!!
    ما يدورون على شي غير كذا!!
    ماشاء الله.. الله يوفقك و يقويك..
    ما أعرف شقول!!!
    و السلام عليكم





    __________________
    موقعي: www.ta8eem.com

  12. #12
    عضو فعال جدا
    تاريخ التسجيل
    Feb 2003
    المشاركات
    2,047


    فعلا تقنية رائعة
    و انا اشكر الأخ isader.com على هذه الإختيارات المميزة صراحة فهو عوادنا بالإبداع

    بالنسبة للSVG له الكثير من المحررات التي تسهل العمل يعني كتابة الكود و مشاهدة الpreview

    منها Editix و هو محرر ممتاز الصراحة و ينفع ايضا للXML / XSLT /SVG / DTD ...



    للتحميل
    http://www.editix.com/download.html



    أيضا بالإمكان ادراج الSVG و استغلالها في الPHP

    من خلال هذا الكائن
    http://www.phpclasses.org/browse.html/package/596.html


    مع العلم ان كل منGNOME و الKDE تستعملان الSVG في الأيقونات و بعض الصور





    __________________
    -{Only God Can Judge Me}-
    القانون فوق الجميع و الجميع يموت بالجوع

  13. #13
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261


    أبو حازم:
    لا شكر على واجب عزيزي

    xainoo:
    هذا أقل شي أقدر أقدمه لإخواني..

    Dr-dre67:
    بالفعل أعتقد انه محرر رائع..
    لكن أظن أن الكثير من المصممين سيتجهون للعمل على أحد البرامج الأخرى و من ثم تصدير العمل على شكل svg
    الا بحال كان الرسم بسيط نسبياً أو إن كان هذا المصمم من محبي الرياضيات و العمليات الحسابيه..

    شكراً للجميع على ردودهم..

    و السلام عليكم





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض