فإنشاء محتوى متميّز على الأجهزة الجوّالة يعني تحقيق التوازن بين كمية البيانات التي يتم تنزيلها وأكبر قدر من التأثير المرئي. تُعدّ الرسومات المتجهة طريقة رائعة لتقديم نتائج مرئية مذهلة باستخدام الحدّ الأدنى من معدل نقل البيانات.
يعتقد العديد من الأشخاص أن لوحة الرسم هي الطريقة الوحيدة لرسم مزيج من المتجهات والرسومات النقطية على الويب، ولكن هناك بدائل لها بعض المزايا. إنّ Scalable Vector Graphics (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 ثانية. ونتيجة ذلك أن التدرج يبدو وكأنه يتحرك لأعلى الصفحة بحركة مستمرة لا تتوقف أبدًا.
يكمن السر في ذلك في عدم الحاجة إلى استخدام نص. ولهذا السبب يتم تشغيلها كصورة مُشار إليها من هذه الصفحة، وفي الوقت نفسه تقلل من أعباء العمل على وحدة المعالجة المركزية (CPU) للأجهزة الجوّالة عن طريق إلغاء الحاجة إلى النصوص البرمجية.
كما يمكن للمتصفح نفسه الاستفادة من معرفته بالرسم لضمان استخدام الحد الأدنى من أعباء وحدة المعالجة المركزية لتنفيذ الرسوم المتحركة الرائعة.
هناك تنبيه واحد: لا تتعامل بعض المتصفحات مع هذا النمط من الرسوم المتحركة على الإطلاق، ولكن في هذه الحالة ستظلّ خلفية ملوّنة رائعة ولكنها لن تتغير، ويمكن إيجاد حل لهذه المشكلة باستخدام البرنامج النصي (وrequestAnimationFrame) ولكن هذا يتجاوز حدود هذه المقالة.
تجدر الإشارة إلى أنّ حجم ملف SVG غير المضغوط هذا يبلغ 2,922 بايت فقط، وهو حجم صغير للغاية لتوفير تأثير الرسومات الغنية بالرسومات، ما يحافظ على رضا المستخدمين وخطط البيانات هذه خلال عملية المعالجة.
إلى أين من هنا؟
وهناك العديد من الحالات التي يكون فيها تنسيق SVG أقل من المستوى المثالي، ويتم تمثيل الصور والفيديوهات بشكل أفضل بتنسيقات أخرى. النص هو جانب آخر، حيث يعمل كل من HTML وCSS الأصلي بشكل أفضل بكثير بشكل عام. ومع ذلك، يمكن أن يكون الخيار الأمثل كأداة في تصميم الأعمال الفنية المرسومة بخط اليد.
لقد تناولنا بعض الاستخدامات الأساسية لرسومات SVG، لتوضيح مدى سهولة إنشاء محتوى صغير يوفر رسومات زاهية بملء الشاشة مع أقل قدر من التنزيل. يمكن أن تؤدي التحسينات الصغيرة في المحتوى إلى إنشاء نتائج رسوماتية مذهلة بسهولة باستخدام مقدار بسيط من الترميز. في المقالة التالية، سنستكشف بعض التفاصيل حول كيفية استخدام الرسوم المتحركة المضمنة في رسومات موجّهة يمكن تغيير حجمها (SVG) للحصول على تأثيرات أكثر بساطة وفعالية وسنقارن استخدام لوحة الرسم بالرسومات الموجّهة التي يمكن تغيير حجمها (SVG) لاختيار الأداة المناسبة لكتابة موقع الرسومات على الأجهزة الجوّالة.
موارد أخرى جيدة
- Inkscape هو تطبيق رسم مفتوح المصدر يستخدم تنسيق SVG كتنسيق ملف له.
- افتح Clip Art، وهو مكتبة ضخمة ومفتوحة المصدر تحتوي على آلاف صور SVG.
- صفحة W3C SVG التي تحتوي على روابط إلى المواصفات والموارد وما إلى ذلك
- Raphaíl هي مكتبة JavaScript توفر واجهة برمجة تطبيقات ملائمة لرسم محتوى SVG وتحريكه باستخدام عنصر احتياطي رائع للمتصفّحات القديمة.
- موارد SVG من Slippery Rock University - يتضمن رابطًا إلى SVG Primer رائع.