RSS

الرسوميات المتجهية متغيرة الحجم SVG

12 أكتوبر

Scalable Vector Graphics أو اختصارا SVG هي تنسيق قائم على صيغة ملفات XML مخصص لوصف الرسوميات المتجهة الثنائية الأبعاد بنوعيها الساكن والتفاعلي أو المتحرك. ويعد هذا التنسيق معيار حر مفتوح المصدر يتم تطويره تحت إشراف World Wide Web Consortium (W3C) منذ العام 1999.

كما ذكرنا سابقا فإن رسوم SVG وسلوكياتها تحدد ضمن ملفات XML نصية، مما يعني أنها قابلة للبحث ضمنها وفهرستها وحتى ضغطها إن تطلب الأمر ذلك. ونظرا لكونها ملفات XML في نهاية المطاف، لذا يمكن إنشاؤها وتنقيحها باستخدام أي منقح نصوص اعتيادي، على الرغم من ذلك يتوفر أيضا مجموعة من برامج الرسم القائمة على هذه التقنية أو التي تستطيع التصدير إلى هذه الصيغة مثل Inkscape و Adobe Illustrator و CorelDRAW و OpenOffice.org Draw وحتى Microsoft Visio، كذلك هنالك بعض البرامج المخصصة للتعامل مع الملفات بهذا التنسيق منها مثلا svg-edit والتي يمكن أن تركّب كإضافة لمتصفح Firefox أو كبرنامج مستقل (انظر قائمة المراجع).

من جهة أخرى، تدعم معظم المتصفحات الرئيسية المعاصرة هذه الصيغة من الملفات بشكل مباشر وتستطيع عرضها (بما فيها Opera Mini الخاصة بالهواتف الخليوية) فيما عدى متصفح مايكروسوفت Internet Explorer، لكن هذه الأخيرة تعد بأن يكون الإصدار الرئيسي التالي من هذا المتصفح وهو Internet Explorer 9 داعما لها. أما بالنسبة لدعم اللغة العربية ضمن سياق مجموعة المحارف العالمية UTF-8 في ملفات SVG فهو متفاوت لكن أفضله هو ما يقدمه متصفح Chrome من Google.

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

باعتبار أن رسوم SVG هي عبارة عن تنسيقات XML فإنها بالتالي تتضمن العديد من المقاطع النصية المتكررة والتي تتلاءم بشكل خاص مع خوارزميات الضغط مثل gzip أو غيرها من خوارزميات الضغط الأخرى المتوافرة. وحالما تضغط صورة SVG باستخدام تقنية gzip يتم الإشارة إليها باللاحقة svgz للدلالة على امتداد الملف المضغوط الناتج، وغالبا ما يبلغ حجم الملف الناتج ما يقارب %20 من حجم الملف الأصلي.

إن نوع MIME الخاص بملفات SVG هو image/svg+xml (انظر المرجع RFC 3023) حيث ينصح باستخدام الامتداد .svg (بأحرف صغيرة) لهذا النوع من الملفات على كافة أنظمة التشغيل، فيما ينصح باستخدام الامتداد .svgz (بأحرف صغيرة) لملفات SVG المضغوطة باستخدام خوارزمية gzip.

يوفر هذا التنسيق معايير لتمثيل العناصر الرسومية بشكل يسهل فهمه ويقدم مرونة مقبولة عند تحديد ما يراد إظهاره. عادة ما تستخدم صيغة ملفات SVG كمدخل لتدريس الطلاب بنية ملفات XML وصيغها واستخداماتها خصوصا أنها تتشارك العديد منها مع غالبية وثائق XML فيما تكون بعض تلك الصيغ مخصصة حصرا لملفات SVG.

أمثلة على بعض قواعد XML المستخدم:

  • تؤطر المعرّفات بالأقواس <…>
  • أسماء المعرّفات يجب أن تخلو من الفراغات وتستخدم الأحرف الصغيرة
  • المعرّفات إما أن تكون مجالية أي أن لها بداية ونهاية تحيط بالمحتوى <svg …> … </svg>، أو تكون مفردة قائمة بذاتها <rect … />
  • يمكن أن تمتلك المعرّفة مجموعة من الخصائص والتي تسرد بعد اسمها حيث تستخدم الفراغات للفصل بين خاصية وأخرى، فيما تستخدم إشارة المساواة للفصل ما بين اسم الخاصية وقيمتها.
  • قيم الخصائص يجب أن تؤطر باستخدام علامة التنصيص المزدوجة ” أو المفردة ‘
  • كل من المعرّفتين <?xml … ?> و <!DOCTYPE … > في بداية ملف SVG تعتبران اختياريتان

أمثلة على بعض القواعد الخاصة بتنسيق SVG:

  • المعرّفة الأساسية الجذر يجب أن تسمى svg
  • العنصر rect والخاص بإظهار المستطيل يجب أن يمتلك خاصيتي العرض width والارتفاع height
  • العنصر g يمكن أن يتضمن عناصر بسيطة أخرى فيما لا يستطيع العنصر rect القيام بذلك
  • قيمة خاصية العرض width يجب أن تكون حكما مقدار رقمي

صيغة SVG تحدد الرسم عن طريق وصف كيفية تصييره، فمثلا نقوم بتحديد إن كان يجب رسم خط من الإحداثيات (10, 10) إلى (50, 70)، أو إن كان النص Hello World يجب كتابته عند نقطة الإحداثيات (20, 50) باستخدام خط Tahoma من الحجم 16.

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

إن صيغ الرسوميات الشائعة الانتشار على الإنترنت مثل gif و jpeg و png قائمة على مبدأ الصور النقطية، وهو ما يعني أننا نقوم بتحديد لون كل عنصورة Pixel في شبكة الرسم، وعلى الرغم من امتلاك كل من تلك الصيغ لخوارزميات ضغط فعالة، إلا أننا لا نزال نلاحظ تضخم في حجم الملف بزيادة دقة الرسم أو أبعاده. إن مثل هكذا سلوك مدعاة للقلق طالما أن دقة كل من الطابعات والشاشات لا تزال في ازدياد كما هو متوقع.

كما سبق وأن أشرنا فإن العنصر الرئيسي يجب أن يكون <svg> والذي يمكن أن يتضمن بدوره العديد من الأشكال البسيطة مثل الدائرة circle، هناك العديد من العناصر البسيطة الأخرى المتوافرة مثل المستطيل rect والبيضوي ellipse والخط line والمتعدد الخطوط polyline والمضلع polygon:

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "../../svg11-flat.dtd">
        <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
            xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10"  />
        </svg>

يمكن تطبيق الألوان على كافة عناصر ملف SVG المرئية إما بشكل مباشر أو من خلال خصائص fill أو stroke أو غيرهما، حيث يتم تحديد الألوان بذات الطريقة المتعارف عليها في صيغة ملفات الأنماط المتتالية CSS 2، أي أنك تستطيع استخدام تسميات الألوان مثل blue أو black، أو الترميز الستعشري لتلك الألوان مثل #2f0 أو #22ff00 أو بصيغة الأرقام العشرية عن طريق استخدام التابع rgb مثل rgb(255, 255, 127) أو حتى تحديد النسبة المئوية لكل مركب لوني من الألوان الأساسية الثلاث الأحمر والأخضر والأزرق مثلا (rgb(100%, 100%, 50%.

يمكننا كذلك تطبيق مجموعة من التحويلات على العديد من العناصر، حيث يمكننا القيام بأي من التحويلات التالية:

translate(30, 5)

حيث يتم إزاحة الشكل المعني بمقدار 30 عنصورة إلى اليمين و 5 إلى الأسفل

scale(0.3, 0.3)

لتقييس الأشكال لتصبح إما أكبر أو أصغر حجما حيث تمثل القيمة 1 الحجم الأصلي، وبالتالي التعليمة السابقة ستقوم بتصغير الشكل المعني بمقدار الثلث وبشكل متناسب على كلا المحورين الأفقي والعمودي

rotate(120)

تقوم بتدوير الشكل بمقدار 120 درجة باتجاه عقارب الساعة، يوضح المثال التالي استخدام أنواع التحويلات الثلاث السابقةالذكر:

<svg width="6cm" height="6cm" viewBox="-50 -50 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="20" height="10"/>
    <rect width="20" height="10" transform="rotate(120)" fill="blue"/>
    <rect width="20" height="10" transform="translate(30,0)" fill="red"/>
    <rect width="20" height="10" transform="scale(.3,.3)" fill="yellow"/>
</svg>

أما العنصر <g> فيستخدم لتجميع العناصر معا بحيث يتم التعامل معها على أنها كينونة واحدة، كأن نرغب في القيام بتطبيق تحويلات معينة سوية على عدة عناصر معا، فمثلا:

<svg width="9cm" height="6cm" viewBox="-5 -50 150 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g transform="rotate(-10)">
        <rect width="100" height="5"/>
        <text>Ar-PHP.com</text>
    </g>
</svg>

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

<svg width="12cm" height="6cm" viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg">
    <!– Comment: Blue background –>
    <rect x="0" y="0" width="60" height="30" fill="blue"/>
    <line x1="0" y1="0" x2="60" y2="30" stroke="white" stroke-width="6"/>
    <line x1="0" y1="30" x2="60" y2="0" stroke="white" stroke-width="6"/>
</svg>

أما المثال التالي فهو لعلم دولة جامايكا والذي يمكن رسمه باستخدام أربعة مثلثات إثنان منهما باللون الأخضر والآخرين باللون الأسود على أرضية صفراء، لتحقيق ذلك يمكننا استخدام العنصر path لرسم تلك المثلثات، حيث يمتلك ذلك العنصر خاصية d التي يمكنك أن تحدد من خلالها إحداثيات النقاط المختلفة على المسار الجاري رسمه.

يوضح الشكل التالي شبكة من 20 خط طول و 10 خطوط عرض، وباستخدام تلك المرجعية يمكننا رسم المثلثات المطلوبة، فمن أجل المثلث الأعلى نجد أن قيمة خاصية d هي “M 2 0 L 10 4 L 18 0 Z” والتي تعني التالي:

  • انتقل Move إلى الإحداثيات (2, 0)
  • ارسم خطا Line وصولا إلى النقطة (10, 4)
  • ارسم خطا آخر Line من النقطة السابقة إلى النقطة (18, 0)
  • ومن ثم نستخدم الرمز Z الذي يقوم بإغلاق الشكل الجاري رسمه
<svg width="12cm" height="6cm" viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="20" height="10" fill="yellow"/>

    <path d="M 2 0 L 10 4 L 18 0 Z" fill="green"/>
    <path d="M 2 10 L 10 6 L 18 10 Z" fill="green"/>
    <path d="M 0 1 L 8 5 L 0 9 Z" fill="black"/>
    <path d="M 20 1 L 12 5 L 20 9 Z" fill="black"/>
</svg>

أما لرسم نجمة فيمكننا استخدام ذات العنصر path مع بعض الحسابات لإيجاد نقاط رؤوس  تلك النجمة بقطر 1 ومركزها (0, 0) طالما أنه باستطاعتنا لاحقا تحريكها وتكبيرها كما نشاء باستخدام خصائص التحويل المختلفة التي سبق أن ذكرناها.

<svg width="12cm" height="8cm" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg">
    <path id="star" fill="green" transform="translate(3,2)" d="M 0 -1 L 0.588 0.809 -0.951 -0.309 0.951 -0.309 -0.588 0.809 Z"/>
</svg>

يمكنك أيضا إطلاق تسميات على بعض الأشكال باستخدام خاصية id، حتى أننا نستطيع سرد بعض الأشكال ضمن معرّفة <defs> … </defs> لتعامل كما لو أنها مكتبة من الأشكال الجاهزة للاستخدام دون رسمها مباشرة ضمن الصورة بحيث تستطيع مناداتها لاحقا وتحديد مكان عرضها باستخدام المعرّفة <use> حيث نحدد الشكل المراد استخدامه من خلال الخاصية xlink:href=”#star” مع تحديد أي خاصية أخرى يمتلكها الشكل الأصلي ويراد تغيير قيمتها عند عرض النسخة.

يشار إلى أننا بحاجة إلى تعديل بعض خصائص المعرّفة svg الأساسية بحيث تضاف خاصية xmln:xlink كما هو موضح في المثال التالي:

<svg width="12cm" height="8cm" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="star" fill="green" transform="translate(0,4)" d="M 0 -1 L 0.588 0.809 -0.951 -0.309 0.951 -0.309 -0.588 0.809 Z"/>
    </defs>

    <use xlink:href="#star" x="4"/>
    <use xlink:href="#star" x="8"/>

    <rect x="0" y="0" width="12" height="2.5" fill="red"/>
    <rect x="0" y="5.5" width="12" height="2.5" fill="black"/>
</svg>

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

<svg width="300" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <clipPath id="circle-clip">
        <circle id="myClip1" cx="150" cy="100" r="40" />
        <circle id="myClip2" cx="100" cy="100" r="10" />
    </clipPath>
    <ellipse id="back-eclipse" cx="150" cy="100" rx="100" ry="25" style="clip-path: url(#circle-clip)" fill="green"/>
</svg>

من جهة أخرى يوفر تنسيق SVG شيئا من التفاعلية أيضا وذلك من خلال قدرته على تنفيذ بريمجات JavaScript من جهة والتي يمكن ضبطها لتستجيب لمجموعة كبيرة من الأحداث (مثل حدث onclick الموضح في المثال التالي)، أو باستخدام معرفة <set> والتي تستطيع تغيير مجموعة من خصائص الكائن أو الشكل الذي تتوضع في داخله (مثل حالة المربع الأخضر المستدير الحواف الموضح في المثال التالي)، حيث يتم تحديد اسم الخاصية التي يراد إعادة ضبطها أو تغييرها كقيمة محددة في attributeName (وهي في حالة مثالنا الخاصية fill والتي تحدد لون الشكل)، ويتم تحديد القيمة الجديدة التي يراد إعطاؤها لتلك الخاصية ضمن to (وفي مثالنا نحدد اللون الأحمر كقيمة جديدة بدلا من الأخضر)، إضافة إلى ذلك علينا متى يجب البدء بهذا التغيير ومتى يجب إيقافه والعودة للإعدادات الأصلية للشكل، وهي تسميات الأحداث التي تسند إلى قيمة كل من الخاصيتين begin و end (وفي مثالنا ينتقل لون المربع إلى الأحمر بمجرد مرور مشيرة الفأرة فوقه، ويعود إلى سابق عهده عند خروج مشيرة الفأرة خارج حدود الشكل)

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" >
    <rect x="100" y="50" width="100" height="100" rx="10" ry="10"  fill="green" onclick="alert('Ar-PHP.org')" >
        <set begin="mouseover" end="mouseout" attributeName="fill" to="red" />
    </rect>
</svg>

لا تقف حدود التفاعلية في SVG عند هذه الحدود بل تتعداها إلى إمكانية تحريك الأشكال أو تغيير خصائصها بتغير الزمن وذلك من خلال توفير طيف واسع من الإمكانات، فيما يلي مثال بسيط لكائن نصي يقطع الصورة من أقصاها إلى أقصاها على محور السينات حيث يتم ذلك خلال ثلاثة ثوان (كما هو محدد في خاصية dur) ليعود ويكرر هذه الحركة إلى ما لا نهاية (وذلك لأننا حددنا القيمة indefinite لخاصية repeatCount لمعرف animate الذي يحتضنه الشكل المعني بالتحريك):

<svg xmlns="http://www.w3.org/2000/svg" width="300″ height="100″ viewBox="0 0 300 100″ >
    <text y="40″>Ar-PHP.org
        <animate attributeName="x" from="0″ to="300″ dur="3s" repeatCount="indefinite"/>
    </text>
</svg>

في نهاية المطاف ليست هذه المقالة سوى مدخل يهدف إلى التعريف برسوميات SVG واستثارة اهتمامكم للإطلاع على المزيد مما تقدمه هذه التقنية واستثمارها لتقديم رسوميات تفاعلية عالية الجودة تحفظ بملفات نصية صغيرة الحجم سهلة الفهم والتعديل، والتي تعتبر بدورها جزءا من ثورة الويب القادمة مع HTML 5 خصوصا مع رضوخ عملاق البرمجة Microsoft لهذا التيار وهو ما يبدو واضحا من خلال مزايا الإصدار التاسع من مستعرض Internet Explorer والذي باتت نسخته الأولية متوافرة للتجريب ومتوافقة مع معظم هذه المعايير على عكس أسلافه ذوي السمعة السيئة من ناحية التوافقية مع المعايير.

المراجع:

 
2 تعليقان

Posted by في 12 أكتوبر 2010 in تقنيات الويب

 

الأوسمة: , ,

2 responses to “الرسوميات المتجهية متغيرة الحجم SVG

  1. ali ahmed

    29 يناير 2011 at 2:52 مساءً

    أولاً شكرا لك أخي على هذ الشرح الرائع والسهل.

    الحمد لله استوعبت الدرس، لكن عندي استفسار؟

    كيف وأين نستخدم هذه الرسوميات في المواقع؟

    وشكرا لك أخي

     
    • خالد الشمعة

      30 يناير 2011 at 10:52 صباحًا

      أخي الكريم، الاستخدام هو ببساطة وسهولة تضمين الصور ضمن صفحات HTML حيث أن كل ما عليك هو تخزين تلك الرسوميات بملفات نصية بالامتداد SVG ومن ثم تضمينها كصورة عادية تماما، فإن كان المستعرض يدعمها فستراها معروضة أمامك.

       

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

 
%d مدونون معجبون بهذه: