الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

4 طرق لإدخال صور SVG في صفحات الويب بتنسيق html

الكاتب：Eve Cole وقت التحديث：2024-12-18 10:41:14

يستخدم تطوير تطبيقات الويب صور SVG. لتلخيص ذلك، هناك أربع طرق:

1. أدخل مباشرة في الصفحة. 2. مقدمة لعلامة img. 3. مقدمة عن طريق CSS. 4. تم تقديم علامة الكائن.

1. أدخل مباشرة في الصفحة

في صفحات html، يمكنك استخدام علامات svg مباشرة.

<!DOCTYPE html>
<أتش تي أم أل>
	<الرأس>
		<ميتا محارف = "utf-8">
		<العنوان></العنوان>
	</الرأس>
	<الجسم>
		<!-- صورة بصيغة Svg-->
		<svg width="200" height="150" style="border: 1px Solid Steelblue">
			<!-- يوجد مستطيل بالداخل -->
			<rect x = "10" y = "10" العرض = "100" الارتفاع = "60" ملء = "skyblue"></rect>
		</svg>
	</الجسم>
</html>

تأثير العملية:

1

2. مقدمة لعلامة img

بالإضافة إلى كتابة علامات svg مباشرة في صفحة الويب، يمكنك أيضًا استيرادها من خلال img، تمامًا مثل استيراد صور jpeg وpng.

1) قم بإنشاء صورة Svg جديدة

ثم نحتاج إلى إنشاء ملف صورة svg جديد أولاً، ونستخدم ملف svg المكتوب مباشرة في صفحة الويب أعلاه:

<svg xmlns="http://www.w3.org/2000/svg" العرض = "200" الارتفاع = "150">
	<rect x = "10" y = "10" العرض = "100" الارتفاع = "60" ملء = "skyblue"></rect>
</svg>

هناك اختلافان في المحتوى هنا:

1. تحتاج إلى الإعلان عن سمة مساحة الاسم xmlns، ويمكن إدراج مساحة الاسم في المواد المرجعية في نهاية هذه المقالة. 2. تمت إزالة النمط المكتوب في الأصل على علامة svg، style = "border: 1px Solid Steelblue".

احفظ المحتوى في ملف test.svg. هذا ملف صورة. يمكنك محاولة فتحه في المتصفح.

2) الاستيراد باستخدام علامة img

افترض أن test.svg وملف صفحة الويب موجودان في نفس الدليل:

<img src="test.svg" style="border: 1px Solid Steelblue" />

كما هو الحال مع تقديم jpeg وpng، يمكنك تعيين مسار الصورة مباشرةً باستخدام السمة src، بالإضافة إلى ذلك، قمنا بنقل نمط svg الأصلي إلى علامة img.

تأثير التشغيل هو نفسه كما هو موضح أعلاه:

2

يوجد الآن العديد من صور SVG على الإنترنت، ويمكنك الرجوع إلى: https://www.iconfont.cn، وهو موقع ويب جيد للأيقونات.

3

3. مقدمة CSS

مقدمة CSS هي تقديم الصورة كصورة خلفية:

<نمط النوع = "نص/CSS">
	.svg {
		العرض: 200 بكسل؛
		الارتفاع: 150 بكسل؛
		الحدود: 1 بكسل أزرق صلب؛
		صورة الخلفية: url(test.svg); // استيراد كخلفية }
</نمط>
<div class="svg"></div>

4. مقدمة الكائن

كما هو الحال مع استيراد img، تحتاج إلى ملف svg، ثم تقوم باستيراده مع بيانات السمة:

<object data="test.svg" style="border: 1px Solid Steelblue"></object>

تأثير التشغيل مشابه لما ورد أعلاه، ولا مزيد من التعيين.

علامات أخرى

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

مراجع

مساحة الاسم: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

تضمين العلامة: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

علامة iframe: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

بهذا نختتم هذه المقالة حول الطرق الأربعة لإدخال صور svg في صفحات الويب بتنسيق HTML. لمزيد من المعلومات حول إدخال صور svg في HTML، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة أدناه في المستقبل.

مقالات ذات صلة