SVG هي صيغة صورة متجهة (قائمة على XML)، لذا تتسع إلى أي حجم بدون تشويش. يمكنك تضمينها بطريقتين رئيسيتين، لكل منهما مقابلات.
SVG مضمنة — markup مباشرة في HTML
المميزات: يمكنك تنسيقها باستخدام CSS (fill، stroke)، وتحريك أجزاؤها، وتغيير اللون عبر currentColor (يرث لون النص)، والاستجابة للأحداث — لأنها DOM حقيقية. لا توجد طلبات HTTP إضافية.
العيوب: تضخم HTML، لا يتم تخزينها مؤقتًا بشكل منفصل، الرموز المتكررة تكرر markup.
<img> — مرجع كملف<img src="logo.svg" alt="Company logo" width="120" />
المميزات: يتم تخزينها مؤقتًا من قبل المتصفح، تحافظ على HTML نظيفة، بسيطة. العيوب: لا يمكنك تنسيق أو إنشاء سكريبت لأجزائها الداخلية باستخدام CSS/JS الخاصة بك — إنها صورة معتمة.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
يتلخص الاختيار بين SVG مضمنة و<img> في ما إذا كنت بحاجة إلى تنسيق/تحريك الرسومات (مضمنة) أو مجرد عرضها بكفاءة (<img>).
الرموز التي تغير اللون عند التمرير أو التبديل تكون مضمنة (غالبًا كمكونات)؛ الأصول الثابتة للعلامة التجارية تذهب عبر <img>.
على أي حال، تبقى المتجهات حادة عند كل دقة — مثالية للرموز والشعارات.