كيف تقوم Svg بتضمين الصور

إذا كنت تتطلع إلى تضمين صورة في موقع الويب الخاص بك ، فقد تتساءل عن كيفية القيام بذلك باستخدام Scalable Vector Graphics (SVG). SVG هو تنسيق صورة متجه مستند إلى XML للرسومات ثنائية الأبعاد مع دعم التفاعل والرسوم المتحركة. مواصفات SVG هي معيار مفتوح تم تطويره بواسطة World Wide Web Consortium (W3C) منذ 1999. هناك عدة طرق مختلفة لتضمين صورة SVG على صفحة ويب. الطريقة الأكثر شيوعًا هي استخدام العنصر ، والذي تدعمه جميع المتصفحات الرئيسية. تتضمن الطرق الأخرى استخدام العنصر أو تضمين الصورة في السطر باستخدام العنصر. العنصر هو أسهل طريقة لتضمين صورة SVG. وهي مدعومة من قبل جميع المتصفحات الرئيسية ، وتتيح لك تحديد عرض الصورة وارتفاعها. يجب أن تحتوي السمة src الخاصة بالعنصر على عنوان URL لصورة SVG. هي طريقة أخرى لتضمين صورة SVG. يسمح لك بتحديد محتوى احتياطي في حالة عدم دعم المستعرض لـ SVG. يجب أن يحتوي العنصر على عنوان URL لصورة SVG في سمة البيانات. يمكن استخدام العنصر لتضمين صورة SVG مضمنة. هذه هي الطريقة الأكثر تعقيدًا ، ولكنها توفر أكبر قدر من التحكم في مظهر الصورة. يجب أن يحتوي العنصر على عنوان URL لصورة SVG في السمة xlink: href.

عند الارتباط بصورة ، يمكن تضمينها في SVG من خلال مرجع الارتباط الخاص بها. انتقل إلى http://www.w3.org/TR/SVG/struct.html#ImageElement لمعرفة كيفية استخدام هذا العنصر. يتم ترميز الصور في تدفقات البايت وفي base64. نظرًا لإمكانية احتواء SVG على URIs للبيانات ، يمكنك جعلها قائمة بذاتها. تمثل IMAGE_DATA بيانات الصورة ، والتي يتم ترميزها باستخدام base64. يمكن استخدام معرّف الموارد المنتظم للبيانات لبيانات الصورة ؛ على سبيل المثال ، يمكن أن يكون URI: سيخضع لأي تحويل قياسي. بالإضافة إلى ذلك ، يمكن إضافة الصور النقطية.

من الممكن أيضًا استخدام التحويلات للقيام بذلك. يمكن استخدام الصورة عدة مرات داخل sva كملف واحد (المرجع) :. في 19 أكتوبر 2021 ، كتبت إجابة نُشرت في الجريدة في 19 أكتوبر 2021. الشارات البرونزية 1 و 2 و 4255 هي أمثلة على الشارات التي حصل عليها Alex Szucs.

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

يتم استخدام HTML لإنشاء الرسومات ، بينما يتم استخدام SVG لإنشاء الرسومات. تحدد ملفات XML النصية السلوكيات ومعلمات البحث الخاصة بصور SVG ، مما يسمح بفهرستها وبرمجتها وضغطها. هذا يعني أيضًا أنه يمكن إنشاؤها وتحريرها بسهولة باستخدام أي محرر نصوص أو برنامج رسم.

كيف تخزن Svg بيانات حول الصور؟

صورة SVG هي نوع من الرسوم المتجهية. تتكون الرسومات المتجهة من خطوط ومنحنيات محددة بواسطة كائنات رياضية تسمى المتجهات ، والتي يمكن تحجيمها دون فقدان الجودة. عادةً ما يكون ملف SVG أصغر من الرسم النقطي ، مثل ملف JPG أو PNG.

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

إذا كنت تستخدم WordPress ، فإن نظام إدارة المحتوى (CMS) لا يدعم SVGs. التحدي الحقيقي للمصممين هو تحديد SVG من البداية أو البحث عن الصور لتحويلها إلى التنسيق. أفضل الأدوات للقيام بالأمرين هما Adobe Illustrator و GIMP.

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

ما هو Svg مضمن؟

ملف svg المضمن هو ملف Vector Graphics قابل للتطوير تم تضمينه في صفحة ويب. هذا يعني أن ملف svg مضمن في كود HTML للصفحة ، ويتم عرضه بشكل مضمّن مع بقية المحتوى على الصفحة.

يتم تعريف المحتوى المضمن على أنه محتوى يتم إدراجه في مستند مع مورد آخر. يمكن قول الشيء نفسه بالنسبة لمحتوى HTML المضمن. يتم وضع المحتوى المضمن في منطقة مستطيلة نتيجة لخصائص هندسة x و y والعرض والارتفاع. يتم استخدام خصائص أبعاد عرض HTML وارتفاع هذه العناصر كتلميحات عرضية. عند استخدام CSS لتخطيط محتوى فرعي ، يحدد مستطيل الموضع حدود الكتلة المحتوية. يمكن تحديد مقياس الكتلة المحتوية باستخدام نظام الإحداثيات الحالي ، والذي يتضمن جميع التحويلات الصريحة والضمنية (على سبيل المثال ، "viewBox."). إذا تم تعيين خاصية overflow ، فسيتم إخفاء المحتوى الذي يمتد إلى ما بعد مستطيل تحديد الموضع.

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

PNG) ، يمكن تعريف عرض وارتفاع البكسل كنسبة عرض إلى ارتفاع جوهرية. إذا لم تكن السمة "saveRatioAspect" على صورة مضمنة صفراً ، فيجب معاملة مستطيل عرض الصورة المعرّف كخاصية لعنصر "الصورة" كقيمة فارغة. عند تضمين عنصر صورة ، يتم تطبيق قيمتي تجاوز على عناصر "الصورة". تحدد القيمة الموجودة في العنصر الجذر لـ SVG المشار إليه ما إذا كانت الرسومات ستعرض في مستطيل العرض أم لا. كنتيجة للقواعد الجديدة ، يمكن الحفاظ على التحكم في التدفق الزائد الموجود في الصورة المرجعية دون تعريض التحكم في التدفق للخطر. إذا لم يكن العنصر SVD ، فيمكن العثور عليه في عنصر "كائن خارجي". مساحة الاسم هي منطقة من الملف.

يمكن استخدام عمليات أخرى لإنشاء رسم SVG . إدراج تعبير في ملف MathML ، على سبيل المثال. يمكن رسم صورة باستخدام MathML3] أو يمكن إضافة كتلة معقدة باستخدام HTML. نص HTML أو مدخلات النموذج التي تم تنسيقها CSS. نظرًا لأن هذه المواصفات لا تحدد طريقة لتعيين قيم الامتدادات المطلوبة إلى لغات XML معينة ، فلا يمكن تعريفها. يتم تمثيل العنصر المعروف باسم "صورة" بواسطة الكائن "VSLImageElement." من المتوقع أن تأتي القدرة على تضمين محتوى HTML و MathML بتنسيق CSS في متصفحات الويب التجارية مع إصدار HTML5 في وقت لاحق من هذا العام. يتم تحويل كل عنصر في المحتوى المعروض وتكوينه معرّف في الجزء.

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

كيفية إضافة صورة Svg إلى مستند Html الخاص بك

يمكن استخدام صورة SVG بهذه الطريقة عن طريق فتحها في كود VS أو IDE المفضل لديك ، ونسخ الكود وإدخاله في عنصر النص الأساسي لمستند HTML الخاص بك.

كيف يعمل Svg؟

SVG هو صورة رسومية متجهة. يمكن إنشاؤه بإحدى طريقتين: إما باستخدام محرر SVG عبر الإنترنت مثل Vectr ، أو عن طريق إنشاء الرسم في برنامج تحرير متجه مثل Adobe Illustrator ثم تصديره كملف SVG. بمجرد أن يكون لديك ملف SVG ، يمكنك استخدامه على موقع الويب الخاص بك بعدة طرق. تتمثل إحدى الطرق في تضمينها كصورة ، تمامًا كما تفعل مع أي ملف صورة آخر. هناك طريقة أخرى لاستخدامها كصورة خلفية. وهناك طريقة أخرى تتمثل في تضمين كود SVG مباشرة في كود HTML الخاص بك.

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

ليس من الرائع النظر إلى كود XML فحسب ، بل يجعله أيضًا أداة قوية جدًا لإنشاء مواقع الويب وتطبيقات الويب. حتى إذا تم تقليص SVG إلى حجم أصغر ، فلن تتعرض جودتها للخطر. بغض النظر عن حجم أو نوع الصورة التي تستخدمها ؛ تبدو دائمًا متشابهة بغض النظر عن حجم أو نوع العرض الذي تستخدمه. بسبب افتقارها إلى التفاصيل ، يتم تصوير صورة نقطية في SVGs. إنها تمنح المصممين والمطورين سيطرة كاملة على رسوماتهم. طور اتحاد شبكة الويب العالمية تنسيق ملف أصبح الآن معيارًا لرسومات الويب. يتكون كود XML من ملف نصي ، مما يعني أنه يمكن عرضه وفهمه في غضون دقائق.

لتغيير مظهر SVGs ديناميكيًا ، استخدام CSS و JavaScript. يمكن أن تكون القدرة على إنتاج مجموعات كبيرة من الرسومات المتجهة مفيدة في مجموعة متنوعة من المواقف. إنها قابلة للتكيف وتفاعلية وسهلة الإنشاء باستخدام محرر رسومات لأنها سهلة الاستخدام ومتعددة الاستخدامات. منحنى التعلم والقيود الخاصة بكل برنامج فريدة من نوعها. قبل أن تتخذ قرارًا ، جرب بعض الخيارات المجانية أو المدفوعة وتعرّف على كيفية عملها.

نظرًا لسهولة استخدامه ، يعد تنسيق SVG تنسيقًا شائعًا للرسومات والشعارات. تكون الرسومات المتجهة واضحة بصريًا وتكون أحجام الملفات عادةً أصغر من تلك الموجودة في الرسومات النقطية. ملفات المتجه هي أيضًا ملفات رياضية تتكون من خطوط ونقاط ، مما يعني أنها تحتفظ بالحدة حتى عند عرضها بدقة أقل أو أعلى. لن ترى رسومات ضبابية في جهاز الكمبيوتر الخاص بك.

هل تستخدم Svgs وحدات البكسل؟

نظرًا لأنها تعتمد على المتجهات ، فإنها تجعلها غير معتمدة على الدقة. بدلاً من حساب وحدات البكسل ، فإنهم يعدون الأشكال على أنها صور SVG. المقياس الذي يستمر إلى أجل غير مسمى دون أي تدهور في الجودة يعني أنه يمكن أن يصل إلى سعة لا نهائية.

Scalable Vector Graphics (SVG) هو نوع من الرسومات. الصورة المتجهة هي تنسيق صورة يحتوي على إرشادات رسم لرسم الأشكال. بعبارة أخرى ، بغض النظر عن عرض الصورة أو ارتفاعها ، يتم عرضها بشكل صحيح لأن متصفحنا يقوم بإنشائها بشكل سريع. حتى إذا قمت بالتكبير أو التصغير ، فإن دقة صورة SVG تظل كما هي. نظرًا لأن الشاشة الفعلية تطلب بيانات بكسل أكثر مما تحتويه الصورة الأصلية ، ستظهر صورك ضبابية مع تنسيقات الصور النقطية. نظرًا للطريقة التي تحفظ بها تعليمات الرسم وليس وحدات البكسل الفعلية ، ستكون صورتك النهائية دائمًا واضحة لأن حجم الصورة غير ذي صلة. تعد SVGs أداة رائعة لعرض الأشكال والمرئيات الأخرى التي يمكن تخصيصها بسهولة في أنماط هندسية. كان من الصعب العثور على محرر صور يمكنه تصدير Fireworks SVGs خارج Adobe (RIP) أو Adobe Illustrator. لم تكن قوة التحجيم الواضحة لـ SVG مطلوبة في عالم كانت فيه شاشات DPI العالية غير واردة.

إن سهولة تخزين الصور في ملفات SVG ، فضلاً عن قدرتها على عرض أوضاع عرض الإخراج المختلفة ، تزيد من شعبيتها. من الممكن تحويل ملفات PostScript و PDF و SVG إلى ملفات متجهة ، والتي يمكن إخراجها في مجموعة متنوعة من أوضاع عرض الشاشة على أنظمة Linux و Macintosh. وبالمثل ، يمكنك استخدام الصور النقطية وملفات SVG لإنشائها.

تضمين Svg في Svg

من الممكن تضمين صورة svg في صورة svg أخرى. يمكن القيام بذلك باستخدام عنصر "صورة". يأخذ عنصر "الصورة" سمتين ، "xlink: href" و "العرض". تحتوي السمة 'xlink: href' على URI الذي يحدد موقع الصورة. تحدد السمة "العرض" عرض الصورة.

هل ما زلنا بحاجة إلى علامة <object>؟ ما هي مزاياها وعيوبها؟ يمكنك تمييز الخطوط وتضمينها باستخدام Nano. سيساعدك استخدام أداة Brotli في ضغط SVG. سنواجه مشكلات في العرض نتيجة لنمو الصور على مواقعنا الإلكترونية ، مما يجعل التعرف عليها أمرًا صعبًا. نتيجة لذلك ، إذا استخدمنا طريقة التضمين ، فستتمكن محركات البحث من سرد صورنا عند البحث عن الصور. يتم تضمين HTML بسهولة مع العلامة> img>.

إذا كنت تحتاج إلى التفاعل في ملفات الصور الخاصة بك ، فيمكنك استخدام علامة الكائن. إذا قمت بتضمين علامة <img> كخلفية ، فستكون محشوًا مزدوجًا ما لم تقم بتخزين صورك مؤقتًا. يمكن استخدام CSS والخطوط والبرامج النصية الخارجية لإدارة التبعيات على SVG ، والتي هي أساسًا DOM. تظل فئات المعرف والفئات في الملف مغلفة ، لذا فإن الحفاظ على صور SVG باستخدام علامات الكائنات أمر بسيط. عند التضمين المضمّن ، من الضروري التأكد من أن جميع المعرفات والفئات فريدة. إذا تغير تفاعل المستخدم في SVG الخاص بك ، فأنت مطالب فقط بإجراء تغييرات ديناميكية. في معظم الحالات ، لا نوصي باستخدام SVG المضمّن ، والاستثناء الوحيد هو عندما يتعلق الأمر بتحميل الصفحات. تشكل إطارات iframe عددًا من التحديات ، بما في ذلك صعوبة الحفاظ عليها ، وعدم القدرة على فهرستها بواسطة محركات البحث ، وعدم كفاءة مُحسنات محركات البحث.

يمكنك تضمين الصور في Svgs

باستخدام عنصر الصورة ، يمكنك تضمين صورة في SVG.

تضمين png في Svg

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

عند إنشاء شاشة HMI ، يجب علينا تضمين شعار الشركة أو الصور ذات الصلة. عادةً ما يتم حفظ معظم الصور بتنسيق JPEG أو PNG ، ولكن يمكن أيضًا حفظها بتنسيقات نقطية. من السهل إدراج صورة مضمّنة (JPEG / PNG) كعنصر HTML في ملف sva. نتيجة للزيادة الهائلة في حجم ملف SVG ، ستواجه Ecava IGX تدهورًا كبيرًا في الأداء. الخطوة الأولى هي نسخ الصور إلى مجلد المشروع المسمى "PROJECT_FOLDER / images /". الخطوة الثانية هي سحب وإفلات الصورة النقطية في ملف SAGE الخاص بك باستخدام Inkscape (قم بالتنزيل هنا). يمكن إضافة الصورة كصورة ارتباط عن طريق تحديد الخيار ارتباط. باستخدام Blocky ، يمكنك تحسين أداء تحميل SVG بحيث يمكن تحديد تفضيل حجم الصورة.

هل يمكنني تضمين الصورة في Svg؟

عنصر الصورة في HTML sva هو نفس نوع عنصر img في HTML. يمكن استخدام التطبيق لإنشاء صور عشوائية نقطية (ومتجهة). تتطلب المواصفات أن تدعم التطبيقات ملفات PNG و JPEG و.VG على الأقل.

تراكبات Svg: طريقة رائعة لإضافة رسومات أو نص إلى صفحة الويب الخاصة بك

يتيح لك تراكب SVG إضافة رسومات أو نصوص إضافية إلى صفحة الويب الخاصة بك. يمكن وضع صورتين خارجيتين SVG بجوار بعضهما البعض في مستند HTML باستخدام تحديد الموضع المطلق. كبديل ، يمكنك وضع التراكب فوق أو أسفل عناصر HTML. أحد عيوب SVGs هو أنها غير قادرة على عرض روابط لمواقع أخرى. من ناحية أخرى ، يمكن استخدام العنصر a لربط نص أو أي شكل داخل SVG.

كيف يمكنني تضمين ملف Svg؟

ليس من الضروري الإشارة إلى عنصر صورة باستخدام عنصر img> ؛ كل ما عليك فعله هو تضمين عنوان URL في سمة src. إذا كان SVG يفتقر إلى نسبة عرض إلى ارتفاع متأصلة ، فستحتاج إلى الحصول على سمة ارتفاع أو عرض.

لماذا يجب عليك استخدام صور Svg على موقع الويب الخاص بك

يمكن استخدام HTML لإدراج الصور المستندة إلى XML باستخدام تنسيق صورة HTML. يمكنك جعل تضمين svega في صفحاتك أسهل كثيرًا باستخدام بعض ملحقات jQuery SVG المجانية. يمكنك استخدام المكون الإضافي Raphael-Vector Graphics لإنشاء رسومات متجهة وإدراجها في صفحاتك. علاوة على ذلك ، فإن ميزة SVG pan و Zoom التي تعمل باللمس تعمل على تمكين التفاعل على الشاشة مع العناصر الموجودة في sva.

عنصر صورة Svg

عنصر صورة svg هو عنصر يمكن استخدامه لتضمين صورة Scalable Vector Graphics (SVG) في مستند HTML. يحتوي عنصر الصورة svg على سمتين مطلوبتين: العرض والارتفاع. تحدد سمات العرض والارتفاع عرض الصورة وارتفاعها بالبكسل.

صورة / svg نوع Mime

ملف image / svg + xml هو ملف XML يحتوي على محتوى SVG. يمكن استخدامه لإنشاء وعرض صور رسومية متجهة على الويب.

باستخدام نوع MIME ، من الممكن تحديد نوع الموارد التي يتم تسليمها بواسطة بروتوكولات مثل HTTP أو البريد الإلكتروني الذي يدرك MIME. كان نوع SVG MIME لا يزال قيد التسجيل في سجل نوع وسائط IANA لأنواع وسائط الصور / * اعتبارًا من أبريل 2009. ويدعمه خادم الويب Apache بعدة طرق ، ويتم تضمينه في قائمة المدعومة أنواع MIME كإعداد افتراضي. يمكن للمسؤول تكوين نوع MIME لخادم ويب IIS ، ولكنها عادة ما تكون عملية بسيطة. توجد مشاكل مع أنواع .svg و MIME في الإصدارات القديمة من Internet Explorer (الإصدار 6 أو أحدث). إذا كنت تريد أن تقبل جميع المتصفحات المحتوى الخاص بك بشكل صحيح ، فيجب عليك استخدام عنوان URL ينتهي بـ * .svg.

قد لا يعرض Safari صور Svg

على جميع الأنظمة الأساسية ، يمكنك تقديم ملفات SVG مع نوع المحتوى image / svg- XML ​​، لكن بعض المتصفحات (مثل Safari على macOS) ، مثل Adobe Reader ، قد لا تعرض الصور إذا لم يتم تعيين نوع المحتوى على image / svg- XML.

صورة SVG

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

Scalable Vector Graphics (SVG) هو نوع من رسومات المتجهات التي يمكن إنشاؤها بسرعة وبتكلفة زهيدة. لغة التوصيف القابلة للتوسيع (XML) هي تنسيق صورة يسمح لك بإنشاء رسومات قائمة على المتجهات. يمكن استخدام الصورة في CSS أو HTML بعدة طرق. سيرشدك هذا البرنامج التعليمي إلى ستة تقنيات مختلفة. ستوجهك هذه المقالة خلال عملية استخدام SVG كصورة خلفية CSS. تُضاف الصورة إلى مستند بهذه الطريقة بنفس طريقة إضافتها إلى مستند HTML. ومع ذلك ، هذه المرة نستخدم CSS ونخصص الكود أكثر.

بدلاً من ذلك ، يمكن استخدام عنصر HTML لإضافة صورة إلى صفحة الويب. يتم دعم استخدام الخاصية> object> في جميع المستعرضات التي تدعم Scalable Vector Graphics (SVG). باستخدام عنصر HTML هذا جنبًا إلى جنب مع بناء جملة CSS ، يمكن عرض الصورة بتنسيق HTML و CSS باستخدام HTML. لا يعد استخدام امتداد> embed> فكرة جيدة بشكل عام لأن المتصفحات الحديثة لم تعد تدعم المكونات الإضافية للمتصفح.