لإنشاء محتوى رائع على الأجهزة الجوّالة، يجب موازنة مقدار البيانات التي يتم تنزيلها مع التأثير المرئي الأقصى. إنّ الرسومات المتجهّة هي طريقة رائعة لتقديم نتائج مرئية مذهلة باستخدام الحد الأدنى من معدل نقل البيانات.
يعتقد الكثير من الأشخاص أنّ "لوحة الرسم" هي الطريقة الوحيدة لرسم مزيج من الرسومات المتجهّة والرسومات النقطية على الويب، ولكن هناك بدائل لها بعض المزايا. من الطرق الرائعة لإنشاء رسومات متجه هي استخدام رسومات متّجهة يمكن تغيير حجمها (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: تتضمّن رابطًا يؤدي إلى مقدّمة رائعة عن SVG.