متى يجب استخدام SVG مضمنة مقابل صورة img؟

Question

Accepted Answer

SVG هي صيغة صورة **متجهة** (قائمة على XML)، لذا تتسع إلى أي حجم بدون تشويش. يمكنك تضمينها بطريقتين رئيسيتين، لكل منهما مقابلات. ## SVG مضمنة — markup مباشرة في HTML ```html ``` **المميزات:** يمكنك تنسيقها باستخدام CSS (`fill`، `stroke`)، وتحريك أجزاؤها، وتغيير اللون عبر `currentColor` (يرث لون النص)، والاستجابة للأحداث — لأنها DOM حقيقية. لا توجد طلبات HTTP إضافية. **العيوب:** تضخم HTML، لا يتم تخزينها مؤقتًا بشكل منفصل، الرموز المتكررة تكرر markup. ## SVG عبر `` — مرجع كملف ```html

``` **المميزات:** يتم تخزينها مؤقتًا من قبل المتصفح، تحافظ على HTML نظيفة، بسيطة. **العيوب:** لا يمكنك تنسيق أو إنشاء سكريبت لأجزائها الداخلية باستخدام CSS/JS الخاصة بك — إنها صورة معتمة. ## دليل القرار ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## إمكانية الوصول ```html ``` ## لماذا يهم يتلخص الاختيار بين SVG مضمنة و`` في ما إذا كنت بحاجة إلى **تنسيق/تحريك** الرسومات (مضمنة) أو مجرد **عرضها** بكفاءة (``). الرموز التي تغير اللون عند التمرير أو التبديل تكون مضمنة (غالبًا كمكونات)؛ الأصول الثابتة للعلامة التجارية تذهب عبر ``. على أي حال، تبقى المتجهات حادة عند كل دقة — مثالية للرموز والشعارات.

SVG مضمنة — markup مباشرة في HTML

SVG عبر <img> — مرجع كملف

دليل القرار

إمكانية الوصول

لماذا يهم

SVG عبر `<img>` — مرجع كملف