رذاذ الرسومات المتجهة على موقعك المتجاوب

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

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

نعلم جميعًا أنّ التصميم السريع الاستجابة يشكّل جزءًا كبيرًا من التعامل مع أحجام الشاشات المختلفة، وتعدّ ملفات SVG مثالية للتعامل مع الشاشات ذات الأحجام المختلفة بسهولة.

يُعدّ تنسيق SVG طريقة رائعة لعرض الرسومات المستندة إلى المتجهات، وهو مكمل رائع للصور النقطية، التي تكون أكثر ملاءمةً للصور ذات التدرجات اللونية المستمرة.

من أهم مزايا ملفات SVG أنّها لا تعتمد على الدقة، ما يعني أنّك لست بحاجة إلى التفكير في عدد البكسلات على جهازك، لأنّ المتصفّح سيغيّر حجم النتيجة دائمًا ويُحسّنها لتبدو رائعة.

تُنشئ أدوات التأليف الشائعة، مثل تطبيق "الرسم" في Google Drive وInkscape وIllustrator وCorel Draw وغيرها الكثير، ملفات SVG، لذا تتوفّر الكثير من الطرق لإنشاء المحتوى. سنتناول بعض الطرق لاستخدام مواد عرض الرسومات الموجّهة التي يمكن تغيير حجمها (SVG)، بالإضافة إلى بعض نصائح التحسين لمساعدتك على البدء.

أساسيات التوسّع

لنبدأ بسيناريو بسيط: تريد أن يكون رسمًا بيانيًا كاملاً للصفحة هو خلفية صفحة الويب. سيكون من المفيد جدًا عرض شعار شركتك أو أي عنصر آخر بالحجم الكامل في الخلفية في كل الأوقات، ولكن من الصعب جدًا تنفيذ ذلك بشكل جيد مع جميع أحجام الشاشات المختلفة. للتوضيح، سنبدأ بشعار HTML5 البسيط.

يظهر شعار HTML5 أدناه، وهو ملف SVG.

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

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

ولكن هناك المزيد، فحجم شعار HTML5 لا يتجاوز 1427 بايت. هذا حجم صغير جدًا لدرجة أنّه لن يؤثر كثيرًا في أي خطة بيانات للهاتف المحمول عند تحميله، ما يجعله سريع التحميل ورخيصًا وسريعًا للمستخدمين.

وهناك شيء آخر رائع حول ملفات SVG، وهو أنه يمكن ضغطها بتنسيق GZIP لتقليصها أكثر. عند ضغط ملف SVG بهذه الطريقة، يجب تغيير امتداد الملف إلى " .svgz". في حالة شعار HTML5، يتقلّص حجمه إلى 663 بايت فقط عند ضغطه، وتتعامل معه معظم المتصفحات الحديثة بسهولة.

باستخدام ملف المثال على بعض أحدث الأجهزة، نلاحظ ميزة تبلغ 60 مرة تقريبًا عند استخدام بيانات متجهات مضغوطة. يُرجى العلم أيضًا أنّ هذه المقارنات تتم بين JPEG وSVG بدلاً من PNG. ومع ذلك، فإنّ تنسيق JPEG هو تنسيق لا يتيح الاحتفاظ بجميع البيانات، ما يؤدي إلى جودة أقل من تنسيقَي SVG أو PNG. إذا استخدمنا تنسيق PNG، ستكون الميزة أكثر من 80 مرة، وهو أمر مذهل.

ولكن بالطبع، يختلف تنسيق PNG عن تنسيق JPEG. تشير بعض نصائح التحسين إلى استخدام تنسيق JPEG بدلاً من تنسيق PNG، ولكن هذه الفكرة ليست صائبة دائمًا. اطّلِع على الصور أدناه. الصورة على يمين الصفحة هي صورة بتنسيق PNG للجزء العلوي الأيمن من شعار HTML5 تم تكبيره بمقدار 6 مرات. الصورة على اليمين هي نفسها ولكن تم ترميزها باستخدام JPEG.

من السهل ملاحظة أنّ خفض حجم الملف في تنسيق JPEG له ثمن، إذ تظهر عناصر لونية على الحواف الحادة، ما قد يدفع شبكية العين إلى الاعتقاد بأنّها بحاجة إلى نظارة:-) من الإنصاف القول إنّ تنسيق JPEG محسّن للصور، ولهذا السبب ليس جيدًا للفن المتجه. في جميع الأحوال، يتساوى إصدار SVG مع إصدار PNG من حيث الجودة، لذا فهو يفوز على جميع المستويات، سواء من حيث حجم الملف أو درجة الوضوح.

إنشاء خلفيات متّجهة

لنلقِ نظرة على كيفية استخدام ملف ملفات رسومات متجهّة كخلفية لصفحة. من الطرق السهلة لتحديد ملف الخلفية استخدام موضع ثابت في CSS:

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

ستلاحظ أنه بغض النظر عن حجم الشاشة، يتم اختيار حجم الصورة بشكل جميل بحواف نظيفة.

بعد ذلك، نريد بالطبع وضع بعض المحتوى على الخلفية.

ولكن كما ترى، النتيجة ليست مثالية لأنّنا لا يمكننا قراءة النص. ماذا يمكننا فعله؟

تعديل الخلفية لتبدو أكثر جمالاً

من الواضح أنّنا نحتاج إلى جعل كل الألوان في صورة الخلفية أفتح. يمكن تحقيق ذلك بسهولة باستخدام خاصية التعتيم في CSS أو باستخدام التعتيم في ملف SVG نفسه. يمكنك إجراء ذلك ببساطة عن طريق إضافة هذا الرمز إلى محتوى CSS:

#bg {
  opacity: 0.2;
}

سيؤدي ذلك إلى ظهور نتيجة على النحو التالي:

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

حلّ أفضل

إنّ تعديل اللون في محتوى SVG الأصلي أفضل بكثير من ضبط مستوى الشفافية باستخدام CSS. في ما يلي شعار HTML5 الذي تم تعديله ليبدو مموّهًا من خلال تغيير الألوان المستخدَمة، وتجنّب استخدام سمة الشفافية تمامًا في هذه العملية. وبالتالي، تبدو صورة الخلفية أدناه مطابقة لنتيجة تغيير مستوى الشفافية، ولكنّها ستتم معالجتها بشكلٍ أسرع بكثير، ما سيوفّر وقت وحدة المعالجة المركزية ويحافظ على عمر البطارية الثمين.

الآن بعد أن اطّلعنا على بعض الأساسيات، لننتقل إلى بعض الميزات الأخرى.

استخدام التدرجات بفعالية

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

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

سيظهر الزر الناتج على النحو التالي:

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

يتيح لنا ضبط السمة "y2" فقط تغيير التدرج اللوني ليصبح قطريًا. وبالتالي، يؤدي هذا التغيير البسيط في الرمز إلى ما يلي:

<linearGradient id="blueshiny" y2="1">

شكلاً مختلفًا للزر، ينتهي بنا الأمر إلى أن يشبه الصورة أدناه.

يمكننا أيضًا تغيير التدرّج بسهولة للانتقال من الأعلى إلى الأسفل من خلال إجراء هذا التغيير البسيط في الرمز البرمجي:

<linearGradient id="blueshiny" x2="0" y2="1">

وينتهي به الأمر مثل الصورة أدناه.

قد تتساءل عن سبب كل هذه المناقشات حول زوايا التدرّج المختلفة.

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

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

إذا كنا نشعر بالمغامرة حقًا مع هذه المعرفة الجديدة للتدرج، فيمكننا إضافة تدرج رائع وراء شعار HTML5 عن طريق إضافة التعليمة البرمجية أدناه:

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

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

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

إضافة تأثيرات متحركة بسهولة

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

كمثال، سنعدِّل شعار HTML5 الملون من خلال تغيير تعريف التدرج الخطي إلى التعليمة البرمجية أدناه:

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

اطّلِع على الصورة أدناه لمعرفة نتيجة هذه التغييرات أعلاه.

تغيّر التعليمة البرمجية ألوان التدرّج اللوني الخطي من خلال جميع نقاط اللون المختلفة التي حدّدناها، وذلك في دورة مستمرة تستغرق 20 ثانية. ويؤدي ذلك إلى أن يبدو التدرّج وكأنه يتحرك لأعلى الصفحة في حركة مستمرة لا تتوقف أبدًا.

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

ويمكن للمتصفح نفسه الاستفادة من معرفته باللوحة لضمان استخدام الحد الأدنى من الموارد في وحدة المعالجة المركزية لتنفيذ الرسوم المتحركة الرائعة.

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

يُرجى العلم أيضًا أنّ ملف SVG غير المضغوَط هذا لا يتجاوز حجمه 2922 بايت، وهو حجم صغير جدًا لتوفير تأثير رسومات غنيّ كهذا، ما يحافظ على رضا المستخدمين وخطط البيانات هذه في الوقت نفسه.

ما هي الخطوة التالية؟

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

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

مصادر جيدة أخرى

• Inkscape هو تطبيق رسم مفتوح المصدر يستخدم SVG كتنسيق ملف.
• Open Clip Art هي مكتبة ضخمة مفتوحة المصدر تتضمّن آلاف صور SVG.
• صفحة SVG في W3C التي تحتوي على روابط إلى المواصفات والموارد وما إلى ذلك
• Raphaël هي مكتبة JavaScript توفّر واجهة برمجة تطبيقات ملائمة لرسم محتوى SVG وإضافة مؤثرات متحركة إليه، كما تتيح استخدام بديل رائع للمتصفحات القديمة.
• موارد SVG من جامعة Slippery Rock University - تتضمن رابطًا إلى SVG Primer الرائع.