لدينا في المادة السابقة لقد رأينا كيفية استخدام البرامج المجانية لتضمين الصور بتنسيق WebP. سنرى الآن سبب إنشاء صور SVG لمواقع الويب.
أحد التحديات الكبيرة التي يواجهها مصممو الويب هو عدد الأجهزة التي يتصل بها الأشخاص بالشبكة. في تلك الحالات التي تكون فيها الصورة توضيحية فقط، فإن فقدان الجودة لا يؤثر كثيرًا. ولكن، إذا كان المحتوى مهمًا لمحتوى مثل رسم بياني أو إطار سلكي أو لقطة شاشة، فأنت بحاجة إلى التأكد من أن المحتوى يبدو متماثلًا تمامًا بأي حجم.
إنشاء صور SVG لمواقع الويب
ما هي الرسومات بتنسيق SVG
لفهم الفرق بين هذا النوع من الرسومات وتلك المستخدمة بشكل شائع على مواقع الويب، نحتاج إلى شرح مفهومين؛ تلك الخاصة بالرسومات النقطية وتلك الخاصة بالرسومات المتجهة.
- الرسومات النقطية: تم إنشاء هذا النوع من الرسومات باستخدام وحدات البكسل مرتبة في شبكة. يتم تعيين لون معين لكل بكسل. تعتمد الجودة على الدقة التي يتم تحديدها من خلال عدد البكسل في البوصة. مع زيادة الحجم، تقل كثافة البكسل، مما يؤثر على جودة الصورة. وهذا يعني أنه لتمثيل صور معقدة تحتوي على العديد من التفاصيل مثل الصورة الفوتوغرافية، يلزم وجود ملفات كبيرة جدًا بحجم معين.
- رسومات فيكتور: إنها مبنية من كائنات هندسية معبر عنها في صيغ رياضية. يمكن أن تكون هذه الكائنات خطوطًا وأشكالًا ومنحنيات. وكما يتم التعبير عنها في صيغ رياضية، يمكن تغيير حجمها دون فقدان الجودة والحدة، مما يمثل التفاصيل بدقة.
تعتبر الرسومات النقطية مناسبة بشكل أفضل للصور المعقدة جدًا مثل الصور الفوتوغرافية أو التي تتضمن تظليل وتدرجات ألوان ناعمة. لتحريرها، فإنها تتطلب برامج متخصصة لتحرير الصور مثل Gimp.
من جانبها، تعتبر الرسومات المتجهة هي الأفضل للرسوم التوضيحية والأيقونات والشعارات. على الرغم من وجود برامج تحرير مثل Inkscape، إلا أنه يمكن أيضًا إنشاؤها وتحريرها عن طريق كتابة النص.
الرسومات بتنسيق SVG (رسومات متجهة قابلة للتحجيم) يتم استخدامها بشكل رئيسي على مواقع الويب ولديهم هذه الخصائص:
- ولن يتأثروا بالقرار: تبدو الرسومات بتنسيق SVG واضحة بشكل متساوٍ على أي حجم شاشة، بما في ذلك تلك التي تستخدم تقنية عالية الدقة.
- إنها رسومات متجهة: كما أوضحنا سابقًا، يعتمد هذا النوع من الرسومات على تمثيل الكائنات الهندسية المبنية من الصيغ الرياضية. يؤدي تغيير الحجم ببساطة إلى تطبيق الصيغة على القيم الجديدة.
- مقاس اصغر: لا يحتاج تنسيق SVG إلى حفظ معلومات لكل بكسل. يتم تخزين الصيغ الرياضية اللازمة لإنشائها في ملف نصي بتنسيق XML المضغوط.
- Edición: مثل جميع الرسومات المتجهة، يمكن تعديل تنسيق SVG باستخدام برنامج محدد أو محرر نصوص.
- تفاعلية: يمكن تحريك هذه الأنواع من الرسومات أو تصميمها للاستجابة لتعليمات المستخدم باستخدام كود CSS أو Javascript.
- التوافق: تحتوي معظم الأجهزة على متصفحات تدعم تنسيق الرسوم هذا.
قلنا أنه يمكن إنشاء رسم SVG باستخدام محرر النصوص. افتح محرر النصوص الخاص بتوزيعتك والصق الكود التالي:
<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>
الآن احفظه بالاسم Circle.svg. إذا نظرت إلى مدير الملفات الخاص بك، فسترى الصورة المصغرة للدائرة الخضراء، وإذا قمت بفتحها باستخدام عارض الصور، فسوف تراها بالحجم الكامل.
حيث:
<svg width="200" height="200">
اضبط العرض والارتفاع على 200 بكسل.
<rect width="100%" height="100%" fill="white" />
يحدد أن الخلفية ستكون عبارة عن مربع أبيض يشغل عرض الصورة وارتفاعها بالكامل.
<circle cx="50%" cy="50%" r="50" fill="green" />
ضع الدائرة في منتصف الصورة، وحدد نصف قطرها 50 بكسل وأشر إلى أن اللون سيكون أخضر.
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
ضع كلمة Ubunlog في وسط الدائرة بالضبط.
في مقال مستقبلي سنرى محرري الرسوم لهذا التنسيق.