تعلم تطوير الويب إضافة الرسوميات الشعاعية SVG إلى صفحة HTML

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

لا بدّ قبل متابعة القراءة أن تكون على دراية بأساسيات HTML وبكيفية إدراج الصور في صفحاتك.

ملاحظة: لا نهدف في هذا المقال إلى تعليمك إنشاء رسوميات SVG، وإنما فقط كيفية إدراجها في صفحات الويب.

ما هي الرسوميات الشعاعية؟

ستتعامل خلال مسيرتك في عالم الويب مع نوعين من الصور:

• الصور النقطية Raster images: تعرَّف على صورة شبكة من البكسلات، إذ يحتوي ملف الصورة النقطية على معلومات تعرض موقع كل بكسل في الصورة واللون الدقيق لكل بكسل، ومن أكثر تنسيقات الصور النقطية انتشارًا على الويب هي بِت-ماب bmp. و png. و jpg. و gif..
• الصور الشعاعية vector images: تُعرَّف باستخدام خوارزمية، إذ يحتوي ملف الصورة الشعاعية على تعريفات للشكل والمسار اللذين يستخدِمهما الحاسوب في عرض الصورة بالطريقة الصحيحة عندما يصيرها على الشاشة، ومن أمثلتها صور SVG التي تساعدك في إنشاء رسوم شعاعية مناسبة جدًا للاستخدام في الويب.

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

ملاحظة: إن كلتا الصورتين السابقتين في الواقع من نوع PNG (طريقة عرضهما في المقال)، إذ تمثِّل الصورة اليسارية صورةً نقطيةً، في حين تمثِّل الصورة اليمينية صورةً شعاعيةً.

يُعَدّ حجم ملفات الصور الشعاعية أقل من مقابلاتها النقطية، لأنها ستحمل فقط عدة خوارزميات بدلًا من معلومات عن كل بكسل بمفرده.

ما هي صور SVG؟

تُعَدّ SVG لغةً وصفيةً مبنيةً على أساس اللغة XML، وتشابه من حيث المبدأ لغة HTML، ما عدا أنها تضم عناصر مختلفة لتعريف الأشكال التي تريد عرضها في صفحتك والتأثيرات التي تريد تطبيقها على هذه الأشكال، فهي إذًا لغة لتوصيف الرسوم وليس المحتوى، وستجد عناصر إنشاء الأشكال البسيطة مثل الدائرة <circle> والمستطيل <rect> على أساس مثال عن أبسط العناصر، كما ستجد عناصر تعطي ميزات أكثر تقدمًا مثل <feColorMatrix> لتحويل الألوان باستخدام مصفوفة التحويل و <animate> لتحريك أجزاء من الرسم الشعاعي و <mask> لتطبيق قناع فوق صورتك.

ستعطيك الشيفرة التالية على سبيل المثال صورةً لدائرة ومستطيل:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

وستكون النتيجة كما يلي:

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

تمتلك صور SVG ميزات متقدمةً إضافةً إلى ما ذكرناه سابقًا:

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

لماذا سيفضِّل المطورون إذًا استخدام الصور النقطية على صور SVG؟ السبب هو بعض المساوئ:

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

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

إضافة صور SVG إلى صفحات الويب

سنعرض في هذا القسم الطرق المختلفة التي يمكن اتباعها لإضافة صور SVG الشعاعية إلى صفحة الويب.

الطريقة السريعة: استخدام العنصر

يُنفَّذ الأمر بالإشارة إلى ملف الصورة الشعاعية من خلال السمة src، كما تحتاج إلى ضبط قيمتي الطول والعرض من خلال السمتَين width و height وخاصةً إذا لم ترث صورة SVG نسبة البُعدين aspect ratio، لذا راجع مقال إضافة الصور في صفحات HTML إذا لم تفعل ذلك من قبل.

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

الحسنات:

• طريقة سريعة، صياغة قواعدية مألوفة، ويمكن تزويدها ببديل نصي من خلال السمة alt.
• يمكن تحويلها إلى رابط بسهولة عن طريق وضعها ضمن العنصر <a>.
• يمكن أن يخزِّن المتصفح ملف SVG تخزينًا مؤقتًا، مما يزيد من سرعة تحميل الصفحة إذا أردت تحميلها مجددًا في المستقبل.

السيئات:

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

استكشاف الأخطاء ودعم المتصفحات

عند استخدامك متصفحات لا تدعم SVG مثل IE8 ومتصفحات نظام أندرويد بنسخة تحت 2.3، فيمكنك الإشارة إلى صورة PNG أو JPG عبر السمة src ومن ثم استخدم السمة srcset التي تميزها المتصفحات الحديثة فقط للإشارة إلى صورة SVG، وفي هذه الحالة لن تشغل صورة SVG سوى المتصفحات الحديثة التي تدعمها وستشغل المتصفحات الأقدم الصورة النقطية:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

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

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

لا يمكن كذلك التلاعب بالخلفية SVG التي ندرجها من خلال تنسيقات CSS باستخدام جافاسكربت، وتخضع للقيود نفسها التي يخضع لها استخدام قواعد CSS مع صور SVG التي يدرجها العنصر <img>.

كيفية إدراج صور SVG ضمن صفحات HTML

يمكنك فتح ملف SVG باستخدام محرر نصي، كما يمكن نسخ شيفرته ولصقها في ملف HTML، إذ تُدعى هذه العملية بالإدراج المباشر SVG inline أو inlining SVG، بحيث تُضاف هذه الشيفرة إلى HTML بين وسمَي البداية والنهاية للعنصر <svg>، وإليك مثالًا بسيطًا كما يلي:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

الحسنات:

• تقلل هذه العملية من طلبات HTTP، وبالتالي قد تقلل من زمن تحميل الصفحة.
• يمكنك استخدام السمة class والسمة id مع العنصر <svg>، كما يمكن تنسيقه باستخدام CSS ضمن العنصر ذاته أو في أيّ مكان تضع فيه قواعد تنسيق CSS الخاصة بملف HTML، وعمومًا يمكنك استخدام أي سمة وصفية للعنصر SVG على أساس خاصية من خواص CSS.
• يُعَدّ الإدراج المباشر لشيفرة SVG الطريقة الوحيدة التي تتيح لك استخدام قواعد CSS التفاعلية مثل الأصناف المجردة مثل :focus والرسوم المتحركة ضمن صور SVG، حتى ضمن صفحات التنسيق النمطية.
• يمكنك توصيف شيفرة SVG على أساس رابط بتغليفها داخل العنصر <a>.

السيئات:

• تُعَدّ هذه الطريقة مناسبةً فقط إذا استخدمت SVG في مكان واحد، فالتكرار قد يسبب استخدامًا كثيرًا للموارد.
• سيزيد استخدام شيفرة SVG زائدة من حجم ملف HTML.
• لا يمكن للمتصفحات تخزين شيفرة SVG المباشرة كما تخزن شيفرة SVG المدرَجة ضمن الصور النمطية، وبالتالي لن تزيد سرعة تحميل الصفحات التي حُمِّلت سابقًا في هذه الحالة.
• بإمكانك تزويد صورة SVG بمحتوى بديل باستخدام العنصر <foriegnObject>، لكن ستنزل المتصفحات التي تدعم SVG أيضًا الصور البديلة أو الاحتياطية، ولهذا عليك التفكير مليًا في ضرورة دعم المتصفحات القديمة أو لا.

إدراج صور SVG باستخدام العنصر <iframe>

يمكنك أيضًا فتح صور SVG في متصفحك، وبالتالي يمكنك إدراج هذه الصورة في صفحتك باستخدام <iframe> على نحو مماثل تمامًا لما فعلناه في مقال آليات إدراج المحتوى والوسائط المتعددة في صفحة HTML، وإليك مراجعة سريعة:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

وبالطبع فهي ليست الطريقة الأفضل لإدراج SVG.

السيئات:

• يملك لعنصر <iframe> آليةً لعرض محتوى بديل في حال حدثت مشكلة في عرضه، لكن ستعرض المتصفحات هذا المحتوى فقط إذا لم تدعم العنصر <iframe> بالكامل.
• إذا لم يكن لصفحتك وملف SVG أصلًا مشتركًا، فلن تتمكن من استخدام جافاسكربت في صفحتك الرئيسية للتلاعب بهذا الملف.

تطبيق: العمل مع SVG

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

إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset.

خلاصة

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

سنناقش في آخر مقالات هذه السلسلة مفهوم الصور المتجاوبة responsive images بشيء من التفصيل، وسنلقي نظرةً على أدوات HTML التي تتيح لك إدراج صور تُعرَض جيدًا على مختلف الأجهزة.

ترجمة -وبتصرُّف- للمقال Adding vector graphics to the web.

اقرأ أيضًا

• نصائح لإنشاء وتصدير رسومات SVG للويب
• إضافة الصور في صفحة HTML
• كيفية إنشاء أشكال بسيطة باستخدام SVG