أساسيات اتش.تي.إم.إل

الخطوة الأولى :

ابدأ بإنشاء عنصر svg على الصفحة.

الكود :

code 

<svg>
</svg>
	

معاينة :

الخطوة الثانية :

الخطوة التالية هي ضبط سمات العرض width والارتفاع height لعنصر svg. عند إنشاء أيقونة icon، يجب ضبط كلتا القيمتين على حجم صغير.

اضبط كلتا القيمتين على 24.

الكود :

code 

<svg width="24" height="24">
</svg>
	

معاينة :

الخطوة الثالثة :

أنت تقترب. الخطوة التالية هي ضبط سمة viewBox لعنصر svg. سيتحكم هذا في مقدار الصورة المرئية. يُحدد الرقمان الأولان مركز الصورة center of the image.

الرقمان التاليان يحددان حجم الصورة size of the image التي يمكننا رؤيتها: العرض width متبوعًا بالارتفاع height.

نظرًا لأنه يجب أن يكون الرمز بأكمله مرئيًا هنا، فيجب عليك تعيين سمة viewBox إلى 24 24 0 0.

الكود :

code 

<svg width="24" height="24" viewBox="0 0 24 24">
</svg>
	

معاينة :

الخطوة الرابعة :

قبل أن تبدأ بتلوين الصورة، يجب عليك تضمين عنصر مسار path واحد داخل عنصر svg لإعطاء الصورة الشكل shape.

إنشاء عنصر المسار path.

الكود :

code 

<svg width="24" height="24" viewBox="0 0 24 24">
            <path />
</svg>
	

معاينة :

الخطوة الخامسة :

يحتاج عنصر المسار path إلى تحديد شكله. وهنا يأتي دور السمة d. تُستخدم لإنشاء سلسلة من حروف الأوامر والأرقام التي ترسم شكلًا draw a shape.

تمثل هذه الأحرف أوامر commands مثل الانتقال إلى، ورسم خط، وإغلاق، في حين تمثل الأرقام الإحداثيات coordinates.

اضبط سمة شكل القلب d على :

الكود :

code 

<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z" />
</svg>
	

معاينة :

الخطوة الأخيرة :

أيقونة القلب heart icon جاهزة تقريبًا. ما عليك سوى تلوينها باللون الأحمر. للقيام بذلك، اضبط سمة تعبئة fill عنصر svg على اللون الأحمر red.

الكود :

code 

<svg width="24" height="24" viewBox="0 0 24 24" fill="red">
    <path d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z" />
</svg>
	

معاينة :

مبروك على الانتهاء من هذه الورشة!