إن SVG هو اختصار لـ Scalable Vector Graphics، وهي صيغة رسومية تعتمد على المتجهات تم تطويرها من قِبل W3C، وهي تمثل طفرة بكل معنى الكلمة في كيفية عرض الرسومات على الويب، حيث تقدم حلولًا مرنة وقوية لتصميم الأيقونات، والشعارات، والمخططات. وعلى عكس الصور النقطية مثل PNG وJPEG التي تعتمد على البكسلات، تُنشأ SVG باستخدام معادلات رياضية، مما يجعلها قابلة للتكبير والتصغير دون أي فقدان للجودة.
تزايد الاعتماد على الـ SVG في تصميم المواقع والتطبيقات والبرمجيات الحديثة بفضل مميزاتها الفريدة، فهي ليست مجرد صيغة رسومية، بل أداة تفاعلية يمكن تخصيصها برمجيًا لتلائم احتياجات المستخدمين. في هذا المقال، سنحاول أن نتعرف على مميزات الـ SVG عن غيرها من صيغ الصور والأيقونات، وكذلك سنقدم لكم قائمة بأهم وأفضل المصادر التي يمكنكم من خلالها الحصول على أيقونات وصور SVG لمشاريعكم الحالية والمستقبلية.
فعلى بركة الله نبدأ.
ما يميز الـ SVG عن غيرها من صيغ الصور والرسومات
تتميز رسومات وأيقونات SVG عن غيرها من الصيغ بالعديد من الخصائص المميزة والفريدة، التي تجعلها كما قلنا الخيار الأفضل في الكثير من السيناريوهات، ومن هذه الخصائص:
الدقة والجودة الفائقة
تتمتع صور وأيقونات SVG بجودة ودقة غير محدودة، حيث يتم رسم العناصر الموجودة فيها بالاعتماد على معادلات رياضية بدلاً من بيانات البكسل. هذه الميزة تجعلها مثالية للشعارات والأيقونات التي تحتاج إلى الحفاظ على وضوحها ودقتها بغض النظر عن حجم الشاشات التي تعرض عليها، وهذه الخاصية هي من أهم ما يميز هذه الصيغة عن غيرها.
خفة الوزن وسرعة التحميل
غالبًا ما تكون ملفات SVG أصغر حجمًا مقارنةً بالصور النقطية بنفس الجودة، ما يجعلها خيارًا ممتازًا لتحسين سرعة تحميل الصفحات، وهو عامل مهم لتحسين تجربة المستخدم وترتيب الموقع في محركات البحث.
المرونة وسهولة التخصيص
SVG ليست مجرد صور جامدة؛ بل يمكن تخصيصها بسهولة باستخدام CSS وJavaScript. يمكنك تغيير ألوانها، إضافة تأثيرات متحركة، أو جعلها تتفاعل مع أحداث المستخدم مثل النقر أو التمرير.
دعم ممتاز من المتصفحات الحديثة
تدعم معظم المتصفحات الحديثة SVG بشكل كامل، مما يعني أن الأيقونات المصممة بهذه التقنية ستعمل بكفاءة عبر مختلف الأجهزة والمنصات.
تحسين الوصول وتجربة المستخدم
إن SVG مصممة لتكون متوافقة مع تقنيات إمكانية الوصول (Accessibility)، حيث يمكن تضمين أوصاف نصية وبيانات إضافية داخلها لتسهيل فهم الرسومات للأشخاص ذوي الإعاقة والقدرات المحدودة مما يساعدهم على فهم المحتوى والتعامل مع الموقع أو التطبيق بصورة أفضل.
لهذه الأسباب وغيرها نعتمد على أيقونات الـ SVG في قوالب اقرأ أو غيرها من القوالب الخاصة التي نعمل عليها، لضمان تقديم أفضل جودة وأحسن تجربة للمستخدم والزائر في نفس الوقت.
آلية تضمين SVG في مشاريع الويب
إن SVG تعتمد على لغة XML، مما يجعلها نصًا برمجيًا يمكن قراءته وتعديله يدويًا أو برمجيًا. عند عرض SVG في المتصفح، يتم تفسير هذا النص لإنشاء الرسم المطلوب.
ويمكن تضمين رسومات الـ SVG في مشاريع الويب مثل المواقع والتطبيقات بعدة طرق مثل:
تضمين كود SVG مباشرةً داخل ملف الـ HTML، وهو ما يمنح مرونة أكبر في التعديل والتحكم.
استخدامه كأي صيغة صورة أخرى في وسم img ووضع المسار الموجه إليه في سمة src للوسم.
تعيينه كخلفية لعنصر معين باستخدام خاصية background-image كأي صيغة صور أخرى.
إننا في قوالب اقرأ نعتمد بشكل أساسي على الطريقة الأولى في التضمين، وهي تكون بأخذ كود أيقونة SVG المراد إضافتها للقالب ونسخه في المكان المطلوب.
أفضل المصادر للحصول على رسومات SVG مجانية تماماً
في القسم الثاني من المقال سنعرض عليكم مجموعة من أفضل وأهم المصادر والمنصات التي يمكنكم من خلالها الحصول على أكواد لأيقونات ورسومات SVG مجانية لاستخدامها في قوالب اقرأ (مثل قالب اقرأ، قالب اقرأ وظيفة، قالب اقرأ كتاب، وغيرها) أو في مشاريعكم الأخرى.
معظم المواقع التي سنذكرها هنا هي مواقع مجانية بالكامل، وتتيح تحميل الأيقونات والرسومات دون أي طلب للتسجيل، وتسمح باستخدام الأيقونات في المشاريع الشخصية والتجارية.
موقع SVG Repo
على الرغم من أن SVG Repo قد يحتوي على أيقونات ورسومات SVG بتراخيص مقيدة ومحدودة أيضاً، إلا أنه لا يزال رغم ذلك المصدر الأفضل والأهم للحصول على أيقونات SVG احترافية ومجانية، فهي منصة إلكترونية تُقدم مكتبة ضخمة من الرسومات والأيقونات المثالية للاستخدام في التصميم والتطوير، ويتميز بواجهة مستخدم سلسة تُسهل البحث والتصفح بين أكثر من 500,000 عنصر رسومي، مع أدوات تحرير مدمجة لتحسين الألوان أو الأشكال قبل التنزيل.
كما قلنا فإن معظم الرسومات في موقع SVG Repo تُقدم بتراخيص مجانية مفتوحة المصدر، مما يسهل استخدامها في المشاريع التجارية والشخصية، وهي تحدد نوع الترخيص بكل أيقونة على حدى عند الدخول لصفحة أيقونة معينة. وهي تقدم نتائج البحث الخاصة بها في عدة تصنيفات يمكن التنقل بينها بسهولة مثل رسومات بلون واحد Monocolor، رسومات متعددة الألوان Multicolor، رسومات خطوطية Outlined، وأيقونات Icon وغيرها.
المشكلة الوحيدة في هذا الموقع هو انك لتحصل على كود أيقونة الـ SVG لستخدمها في قوالب اقرأ مثلاً، ستحتاج إلى تنزيل الأيقونة ومن ثم القيام بفتحها بمحرر نصوص بسيط مثل المفكرة حتى تتمكن في النهاية من الوصول للكود الخاص بالأيقونة ونسخه.
يمكن زيارة الموقع بالضغط على الزر التالي:
زيارة الموقعموقع Reshot
إن موقع Reshot هو ثاني أفضل وأهم المنصات التي تقدم مجموعة واسعة وضخمة جداً من موارد التصميم المجانية مثل الأيقونات، والرسوم التوضيحية وغيرها بدقة عالياً وجودة مثالية. وهو يتيح للمستخدمين تحميل هذه الأيقونات والرسومات بشكل فوري دون الحاجة إلى أي تسجيل، وتسمح لهم باستخدامها في مشاريعهم الشخصية والتجارية دون أي حاجة للإشارة إلى المصدر، وهو ما يجعلها مصدر مثالي للمصممين والمطورين.
ومما يميز هذه المنصة هو إمكانية نسخ كود الأيقونة أو الرسمة بصيغة SVG دون الحاجة لتنزيلها لاستخدامها بشكل مباشر وسريع في المشاريع قيد العمل. كما أنها تسمح بتصميم الأيقونات بعدة صيغ مثل PNG و SVG بشكل سريع وبنقرة واحدة دون الحاجة للانتظار أو الدخول في تعقيدات.
يمكنكم زيارة موقع Reshot للرسومات والأيقونات المجانية بالضغط على الزر التالي:
زيارة الموقعموقع Altas Icons
موقع Atlas Icons هو مكتبة مجانية ومفتوحة المصدر تضم أكثر من 2,700 أيقونة بتصاميم دقيقة وواضحة، تم تطويرها لتلبية احتياجات مصممي واجهات المستخدم والمطورين. هذه المكتبة توفر الأيقونات بتنسيقات متنوعة، بما في ذلك SVG، Web Font، وفقيما (Figma)، بالإضافة إلى تنسيقات أخرى مثل React، Vue، وFlutter، مما يجعلها مرنة وسهلة الدمج في مختلف المشاريع.
ويتم تحديث الأيقونات الموجودة في موقع Atlas Icons بشكل مستمر، وهي متاحة للاستخدام التجاري والشخصي ويمكن تعديلها بسهولة لتناسب احتياجاتك ومتطلبات مشروعك.
وهي توفر خاصية البحث داخل الموقع، مما يسهل العثور على الأيقونات المطلوبة بسرعة وفعالية.
تستهدف هذه المكتبة بشكل رئيسي المصممين والمطورين الذين يحتاجون إلى أيقونات دقيقة ومناسبة لواجهة المستخدم. بفضل تنسيق الأيقونات الذي يتميز بالبساطة والدقة، فإنها تمثل خيارًا مثاليًا في تصميم واجهات المستخدم (UI) وتجارب المستخدم (UX) بشكل عام.
ومما يميز هذا الموقع أيضاً هو إمكانية الحصول على كود SVG للأيقونات بشكل سريع ومباشرة وبنقرة واحدة دون الحاجة لتنزيل الملف، مما يسهل استخدامه ودمجه في المشاريع البرمجية.
ويمكن زيارة موقع Atlas Icons بالضغط على الزر التالي:
زيارة الموقعموقع Iconoir
موقع Iconior هو مكتبة أيقونات مجانية مفتوحة المصدر تحتوي على أكثر من 1600 أيقونة مميزة، متوفرة للاستخدام المجاني سواءً بالنسبة للمشاريع الشخصية أو المشاريع التجارية دون الحاجة للاشتراك بأي خطط مدفوعة أو تقديم بيانات شخصية.
ويمكن تحميل هذه الأيقونات أو الوصول لكود SVG الخاصة بها بكل سهولة ويسر وبضغطة زر واحدة. ويتم تحديث هذه المكتبة بانتظام، مما يتيح للمستخدمين الوصول إلى أيقونات جديدة ومتنوعة.
يدعم Iconoir مجموعة واسعة من التقنيات وأطر العمل مثل React وReact Native وVue وFlutter وFramer وCSS. يتضمن الموقع أيضًا مكتبات خاصة بهذه الأطر لتمكين الاستخدام السهل للأيقونات في هذه البيئات.
ويمكن زيارة موقع Iconoir من خلال الرابط التالي:
زيارة الموقعموقع IconDuck
موقع Iconduck هو منصة توفر مكتبة ضخمة من الأيقونات والرسوم التوضيحية المجانية والمفتوحة المصدر، والتي يمكن تحميلها بصيغ PNG و SVG وبأكثر من حجم بشكل مجاني.
يهدف الموقع إلى تسهيل الوصول إلى هذه الموارد عبر جمعها وتنظيمها بحيث تكون قابلة للبحث بسهولة، ويقدم مجموعة متنوعة جداً من الأيقونات في فئات متعددة، مثل الأيقونات المتعلقة بالصحة، الطقس، الألعاب، وغيرها، بالإضافة إلى الرسوم التوضيحية المختلفة، ويتم تحديث محتوى الموقع باستمرار بإضافة المزيد من الأيقونات والرسومات.
الموقع يتيح للمستخدمين تحميل هذه الموارد واستخدامها بحرية في مشاريعهم، سواء كانت تجارية أو غير تجارية، ضمن شروط مرنة لمختلف أنواع الترخيص المفتوح المصدر.
ويمكن زيارة موقع IconDuck من خلال الرابط التالي:
زيارة الموقعموقع Tabler Icons
موقع Tabler Icons هو مكتبة مفتوحة المصدر توفر أكثر من 5600 أيقونة بصيغة SVG مجانية وقابلة للتخصيص، وتستهدف المصممين والمطورين الذين يحتاجون إلى استخدام الأيقونات في مشاريعهم التجارية أو الشخصية. يتيح الموقع إمكانية تحميل الأيقونات أو استخدامها مباشرة عبر الإنترنت بطريقة مرنة وسهلة.
جميع الأيقونات التي يوفرها الموقع هي مجانية تمامًا، ويمكن استخدامها في مشاريع تجارية أو غير تجارية دون الحاجة للإشارة للمصدر، ودون الحاجة للاشتراك في الموقع أو تقديم بيانات شخصية.
يتميز الموقع بتصميم بسيط وسهل الاستخدام، مما يتيح للمستخدمين الوصول إلى الأيقونات بسرعة ودون تعقيدات.
يدعم الموقع التكامل مع العديد من الأدوات والمكتبات الحديثة، مما يعزز من سهولة استخدام الأيقونات ضمن بيئات العمل المختلفة. يمكن للمطورين استخدام الأيقونات بشكل مباشر مع هذه الأدوات، مما يقلل الوقت المستغرق في البحث عن الأيقونات المناسبة وتخصيصها.
يمكن زيارة موقع Tabler Icons بالضغط على الزر التالي:
زيارة الموقعموقع Heroicons
موقع Heroicons هو مصدر مجاني ومفتوح المصدر للأيقونات المصممة خصيصًا لتطوير واجهات المستخدم. هذه الرموز هي من إنتاج مطوري مكتبة Tailwind CSS الشهيرة، وتم تصميمها لتكون سهلة الاستخدام ومتوافقة مع تقنيات مثل HTML و React و Vue.
يتميز موقع Heroicons بتقديم مجموعة متنوعة من الرموز بتنسيق SVG عالي الجودة، مع توفرها بنمطين رئيسيين وهما الأيقونات الخطوطية Outlined Icons والأيقونات المملوءة Filled Icons.
يمكن استخدام الايقونات بسهولة ويسر عن طريق نسخ كود SVG الخاص بها ودمجها مباشرة في صفحة HTML. وهي تتمتع بتراخيص مجانية مفتوحة المصدر حتى في المشاريع التجارية.
يمكن زيارة موقع Hericons من الرابط التالي:
زيارة الموقعموقع Bootstrap Icons
موقع "Bootstrap Icons" هو مكتبة أيقونات مجانية مفتوحة المصدر تم تطويرها بواسطة فريق Bootstrap. تهدف المكتبة إلى توفير مجموعة من الأيقونات عالية الدقة التي تتناسب مع تصميم واجهات المستخدم في إطار عمل Bootstrap. تقدم هذه المكتبة مجموعة واسعة من الأيقونات التي يمكن استخدامها في تصميم المواقع الإلكترونية والتطبيقات.
المكتبة تضم أكثر من 1500 أيقونة تغطي مجموعة متنوعة من الأغراض مثل التنقل، التحذيرات، الأدوات، والعديد من الأيقونات الأخرى التي يمكن استخدامها في العديد من التطبيقات.
ويمكن استخدام الأيقونات بنسخ كود SVG الخاص بها واستخدامها بشكل مباشر في المشروع الشخصي أو التجاري دون الحاجة لأي أمر إضافي، كما تتوفر طرق وإمكانية استخدام أكثر سهولة وشمولية بالنسبة للمطورين والمبرمجين.
يمكن الوصول لموقع Bootstrap Icons من الرابط التالي:
زيارة الموقعموقع Remix Icon
موقع Remix Icon هو مكتبة أيقونات مجانية ومفتوحة المصدر تقدم أكثر من 2500 أيقونة بتصاميم متناسقة وعالية الجودة للمطورين والمصممين. يهدف الموقع إلى تزويد المطورين بأيقونات مجانية تمامًا للاستخدام الشخصي والتجاري، مما يسهل عليهم تصميم واجهات مستخدم جذابة ومرنة.
تم تصميم الأيقونات في Remix Icon بأسلوب موحد يسهل دمجها في أي مشروع، وهي تتوفر بنمطين وهما الأيقونات الخطوطية Outlined Icons والأيقونات المملوءة Filled Icons، مما يتيح مرونة كبيرة في اختيار الأنسب.
جميع الأيقونات في مكتبة Remix Icon مجانية للاستخدام سواء في المشاريع الشخصية أو التجارية، مما يجعلها خيارًا مثاليًا لمختلف أشكال المشاريع.
يتيح الموقع تنزيل الأيقونات بصيغ مثل PNG و SVG، كما أننا تتيح إمكانية نسخ كود SVG الخاص بالأيقونة واستخدامها بشكل مباشر داخل ملفات الـ HTML.
يمكن زيارة موقع Remix Icon بالضغط على الزر التالي:
زيارة الموقعموقع Pictogrammers
تعد مكتبة Material Design Icons واحدة من المكتبات الرئيسية التي يقدمها موقع Pictogrammers، وهي مستوحاة من تصميم الأيقونات الذي طورته Google في إطار Material Design. تضم هذه المكتبة مجموعة واسعة من الأيقونات المستخدمة في تطبيقات الويب والهاتف المحمول، وتغطي العديد من الفئات.
تقدم المكتبة جميع الأيقونات بشكل مجاني للمطورين والمصممين، مع إمكانية استخدام الأيقونات في المشاريع التجارية أو غير التجارية.
يتم تحديث المكتبة بشكل دوري لضمان أن الأيقونات تظل متوافقة مع أحدث معايير التصميم وأكثرها شيوعًا. الإصدار الأخير في ديسمبر 2023 (v7.4.47) يتضمن تحديثات متعددة، مما يجعلها خيارًا مستدامًا للمطورين.
توفر المكتبة تنسيقًا مناسبًا للاستخدام في المشاريع الرقمية، بما في ذلك الأيقونات بصيغة SVG و PNG، بالإضافة إلى دعم الألوان والرسوم المتحركة.
ومن ضمن ما يتيحه الموقع إمكانية نسخ كود الـ SVG مباشرةً لاستخدامها في المشاريع بشكل مباشر ودون تعقيد.
يمكن زيارة موقع مكتبة أيقونات ماتريال ديزاين الخاص بـ Pictogrammers بالضغط على الزر التالي:
زيارة الموقعهكذا نكون قد وضعنا بين يديكم عشرة مصادر احترافية ومميزة وفي نفس الوقت مجانية ومفتوحة المصدر للحصول على أيقونات ورسومات SVG مجانية يمكنكم استخدامها في مشاريع أو في قوالب اقرأ التي تستخدمونها على مدوناتكم بكل سهولة ويسر.
