أيقونات SVG

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

مزايا الرسوم البيانية SVG

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

استخدام أيقونات SVG في التطبيقات عبر الإنترنت

كما ذكر في عرض SVG في متصفحات الويب، هناك عدة طرق يمكن استخدامهافي متصفحات الويبيتم عرض SVG كجزء من صفحة HTML، ولكن عند عرض أيقونة SVG، يعد استخدام عنصر img في HTML أسهل، حيث يمكن للعنصر img في HTML تضخيم أو تقليل حجم أيقونة SVG بسهولة.

إليك عنصر العرض هذا لعرض SVG كجزء من صفحة HTML:

<img src="svg-icon.svg">

لضخيم أو تقليل حجم أيقونة SVG، يمكنك استخدام خاصية CSS width أو height. إليك مثال على عنصر img مع إضافة خاصية CSS Height Style:

<img src="svg-icon.svg" style="height:32px">

للحفاظ على نسبة العرض إلى الارتفاع عند تضخيم أو تقليل أيقونة SVG، يجب أن تضبط فقط one من width أو height وليس كلاهما. عند تعيين واحد فقط من هذه الخاصيات، سيقوم المتصفح بتضخيم أو تقليل SVG الرمز بشكل متناسب على المحور الآخر للحفاظ على نسبة العرض إلى الارتفاع.

إنشاء أيقونة SVG الخاصة بك

في بعض الأحيان قد تحتاج إلى إنشاء أيقونة SVG الخاصة بك. أيقونة SVG هي مجرد صورة SVG معقدة تحتوي على SVG. إليك أيقونة دائرية بسيطة مكونة من عنصر SVG circle:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

إليك شكل الرمز SVG مع عرضه مع عنصر img:

لكن عندما تستخدم عنصر img لعرض هذا الرمز SVG وتغيير حجمه، لا يكبر أو يتقلص الرمز SVG. بدلاً من ذلك، سيتم عرض جزء من لوحة SVG. إليك مثال على تعيين خاصية CSS Height إلى 32 للعنصر img:

لاحظ كيف يتم عرض جزء من الدائرة فقط، وليس تقليل حجم الدائرة بالكامل.

سبب حدوث هذه المشكلة هو أن ملف الصورة SVG يفتقر إلى بعض المعلومات. يجب أن تقوم بتعيين قيمة لخاصية SVG viewBox. خاصية SVG viewBox تحدد كم من لوحة SVG يجب عرضها (في اتجاه X وY).

في مثالنا، نريد فقط عرض الجزء الذي يحتوي على أيقونة الدائرة في لوحة SVG. هذا الجزء يمتد من النقطة 0,0 إلى النقطة 128,128 (قطر الدائرة 64، مركز 64،64). باستخدام خاصية SVG Viewbox، يمكننا تحديد فقط هذا الجزء من لوحة SVG ليرender. إليك شكل أيقونة الدائرة التي تم تعيين قيمة Viewbox لها:

<svg　xmlns="http://www.w3.org/2000/svg"　　xmlns:xlink="http://www.w3.org/1999/xlink"　　viewBox="0　0　128　128">
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

هذا هو أيقونة SVG التي تظهر، طولها 32، 48 و 64 بكسل على التوالي: