┐─ تحليل الملف ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ┌
│ المطور : اتحاد شبكة الويب العالمية (W3C)
│ الفئة : صورة
│ نوع MIME : image/svg+xml
┘ ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── └
ما هو ملف SVG؟
SVG (Scalable Vector Graphics — رسومات متجهية قابلة للتحجيم) هي صيغة صور متجهية قائمة على XML وضعها معيار W3C عام 1999. خلافاً للصور النقطية (JPEG، PNG) التي تُخزِّن مصفوفة من البكسلات، تُعرِّف SVG الأشكال رياضياً (خطوط، دوائر، مسارات بيزييه) — مما يعني أنها تتحجم لأي حجم بدون أي تشوه أو ضبابية.
ملفات SVG نصية عادية يمكن قراءتها وتحريرها في أي محرر نصوص. يمكن للمتصفح عرضها مباشرةً في HTML، ويمكن التحكم في عناصرها عبر JavaScript وCSS. هذا يجعل SVG صيغة أيقونات الويب الأولى وأداة تصور البيانات الرئيسية.
كيفية فتح ملفات SVG
- أي متصفح ويب (كروم، فايرفوكس، سفاري، إيدج) — عرض مباشر بالسحب والإفلات
- Adobe Illustrator (ويندوز، ماك) — تحرير احترافي كامل
- Inkscape (ويندوز، ماك، لينكس) — محرر متجهي مجاني ومفتوح المصدر
- Figma (ويب، سطح المكتب) — تصميم واستيراد SVG بكفاءة
- VS Code مع إضافة SVG Preview — معاينة داخل المحرر
- GIMP (ويندوز، ماك، لينكس) — يستورد SVG كصورة نقطية
المواصفات التقنية
| الخاصية | القيمة |
|---|---|
| نوع MIME | image/svg+xml |
| المعيار | W3C SVG 1.1 / SVG 2.0 |
| الصيغة | XML نصي |
| قابلية التحجيم | ✅ لا نهائية بدون فقدان |
| CSS والرسوم المتحركة | ✅ مدعوم |
| JavaScript DOM | ✅ يمكن التحكم بعناصره |
| SMIL Animation | ✅ (محدود الدعم) |
| الشفافية | ✅ opacity وRGBA |
الاستخدامات الشائعة
- أيقونات الويب: أيقونات واجهة المستخدم تُعرض بوضوح على كل دقة، من شاشة 72DPI إلى Retina 4K
- الشعارات والهوية البصرية: الشعارات بصيغة SVG تظهر حادة على البطاقات وعلى اللافتات الضخمة
- تصور البيانات: D3.js وChart.js يولّدان SVG للرسوم البيانية التفاعلية
- رسوم متحركة CSS: أيقونات متحركة وعروض توضيحية للواجهة
- خرائط جغرافية: طبقات الخرائط والحدود والأقاليم
- لوجو المواقع: الـ favicon وشعار الموقع والأيقونات الاجتماعية
SVG مقابل PNG مقابل WebP
| الميزة | SVG | PNG | WebP |
|---|---|---|---|
| التحجيم | ✅ لا نهائي | محدود بالدقة | محدود بالدقة |
| حجم الملف | صغير (أيقونات) | متوسط | صغير |
| الشفافية | ✅ | ✅ | ✅ |
| الرسوم المتحركة | ✅ CSS/SMIL | ❌ | ❌ |
| الصور الواقعية | ❌ | ✅ | ✅ |
| دعم الويب | ✅ | ✅ | ✅ حديث |
استخدام SVG في HTML
<!-- مضمن مباشرة في HTML -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" fill="#4A90E2"/>
<path d="M8 12 L11 15 L16 9" stroke="white" stroke-width="2" fill="none"/>
</svg>
<!-- كصورة عادية -->
<img src="logo.svg" alt="شعار الشركة" width="200">
<!-- كخلفية CSS -->
.icon { background-image: url('icon.svg'); }تحويل SVG إلى PNG
# باستخدام Inkscape
inkscape --export-type=png --export-width=512 logo.svg -o logo.png
# باستخدام ImageMagick
convert -density 300 logo.svg logo.png