.SVG Scalable Vector Graphics
.svg

Scalable Vector Graphics

حوّل رسوميات SVG المتجهية إلى PNG أو JPG أو WebP مباشرةً في متصفحك — بدون رفع ملفات، بدون خوادم. FileDex يُحوّل ملف SVG محلياً باستخدام Canvas API، مع الحفاظ على كل مسار وتدرج لوني وطبقة شفافية بالدقة التي تختارها.

بنية الصيغة
عنصر SVG الجذري
تعريفات وأنماط
عناصر رسومية (مسارات وأشكال)
سمات العرض
متجهW3C2001

أسئلة شائعة

كيف أحوّل SVG إلى PNG؟

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

هل يمكنني تحرير SVG في محرر نصوص؟

نعم. ملفات SVG هي مستندات XML نصية عادية. افتح أي ملف SVG في VS Code أو المفكرة أو vim أو أي محرر نصوص لعرض وتعديل الأشكال والألوان والأبعاد والنصوص مباشرةً. عنصر دائرة يبدو هكذا: `<circle cx="50" cy="50" r="40" fill="blue"/>` — قابل للقراءة والتحرير بالكامل بدون برامج متخصصة.

ما الفرق بين SVG وPNG؟

SVG يُخزّن الرسوميات كوصف رياضي للأشكال يتوسع لأي حجم بدون فقدان الجودة. PNG يُخزّن شبكة ثابتة من البكسلات تتشوّه عند التكبير. استخدم SVG للشعارات والأيقونات والرسوم التوضيحية؛ واستخدم PNG للقطات الشاشة والصور الفوتوغرافية والأعمال النقطية المعقدة.

هل من الآمن رفع ملفات SVG إلى موقعي؟

ملفات SVG يمكنها احتواء JavaScript مُضمّن ومراجع كيانات خارجية، مما يجعلها مصدر خطر كبير لهجمات XSS. لا تعرض ملفات SVG المرفوعة من المستخدمين من نطاقك الرئيسي بدون تنقية. استخدم مكتبة مثل DOMPurify لإزالة البرمجة، أو حوّلها إلى PNG عند الرفع.

كيف أُقلّل حجم ملف SVG؟

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

لماذا يبدو ملف SVG مختلفاً في متصفحات مختلفة؟

عارضات SVG في المتصفحات تختلف في تعاملها مع حركات SMIL وتأثيرات المرشحات وبعض خصائص CSS. Chrome وFirefox لديهما أكمل دعم لـ SVG 2. اختبر رسوميات SVG التفاعلية عبر المتصفحات المستهدفة وفضّل حركات CSS على SMIL للتوافق الأوسع.

هل يمكن لملفات SVG أن تحتوي حركات؟

SVG يدعم ثلاث طرق للحركة تخدم استخدامات مختلفة. حركات CSS والانتقالات توفر أوسع توافق مع المتصفحات وتعمل جيداً لتأثيرات التمرير والحركة البسيطة. عناصر الترميز التصريحي تتعامل مع تتبع المسارات والتحويلات المعقدة بدون برمجة. مكتبات JavaScript للحركة توفر التحكم بالجدول الزمني والتسلسلات التفاعلية للرسوميات المتحركة الغنية.

كيف أجعل SVG متجاوباً على صفحة ويب؟

أزل سمتي width وheight الثابتتين من عنصر SVG الجذر وأبقِ فقط سمة viewBox. سيتوسع SVG مرناً ليملأ حاويته CSS. طبّق max-width وheight auto في CSS لسلوك متجاوب متناسب عبر جميع أحجام الشاشات.

ما يميز .SVG

صورة نصية
كل ملف SVG هو XML قابل للتحرير
ملف SVG هو مستند نصي حيث <circle cx="50" cy="50" r="40" fill="red"/> يرسم دائرة حمراء. افتحه في المفكرة، غيّر اللون، احفظ — بدون أي محرر صور.
دقة لا نهائية
يتوسع من أيقونة إلى لوحة إعلانية
لأن الأشكال مُعرّفة رياضياً، نفس ملف SVG بحجم 2 كيلوبايت يُعرض بوضوح تام على شاشة هاتف 320 بكسل وشاشة 4K ولافتة مطبوعة بعرض 10 أمتار.
ثورة الأيقونات
Font Awesome تخلّت عن خطوط الأيقونات في 2017
Font Awesome v5 انتقلت من خطوط الأيقونات إلى SVG مُضمّن. GitHub اتخذت نفس الخطوة سابقاً. أيقونات SVG وفّرت تعدد الألوان والتحميل الفردي وإمكانية الوصول الحقيقية — ما لم تستطع خطوط الأيقونات تقديمه.
قاتل Flash
SVG حلّ محل Flash للرسوميات المتجهية على الويب
مع توقف المتصفحات عن دعم Flash بين 2015 و2020، استوعبت SVG وحركات CSS استخداماته — مخططات تفاعلية وشعارات متحركة ورسوم توضيحية — بدون أي إضافة خارجية.

لغة XML للرسوميات المتجهية

تحت كل ملف SVG يكمن مستند XML مُحكم البنية، حيث تُعبَّر الأشكال والنصوص والمؤثرات البصرية كعناصر موسومة بسمات — نفس القواعد البنيوية التي تُشغّل HTML وRSS وXHTML. هذا الأساس XML هو ما يجعل SVG مختلفاً جذرياً عن كل صيغة صور نقطية: فهو في آنٍ واحد صورة ومستند، قابل للقراءة من البشر والآلات على حدٍّ سواء.

اكتشف التفاصيل التقنية

نظام إحداثيات viewBox

يُصرّح العنصر الجذر <svg> عن سمة viewBox تُنشئ مستوى إحداثيات مجرد. مثلاً viewBox بقيمة "0 0 100 100" يُنشئ لوحة بمئة وحدة في مئة وحدة بغض النظر عن أبعاد البكسل الفعلية على الشاشة. يُسقط المتصفح هذا الفضاء المجرد على أي حجم فيزيائي يُعيّنه CSS أو HTML، مُجرياً القياس رياضياً. هذا هو السبب في أن صور SVG تبقى حادة عند أي مستوى تكبير — لا توجد بكسلات للاستيفاء بينها، فقط إحداثيات تُعاد حسابها.

تتحكم سمة viewBox أيضاً في سلوك نسبة العرض إلى الارتفاع من خلال سمة preserveAspectRatio. القيمة الافتراضية "xMidYMid meet" تُوسّط الرسم وتُقيّسه بشكل منتظم ليناسب الحاوية. يمكن للمصممين تجاوز هذا لقص المحتوى أو تمديده أو محاذاته — مستوى من التحكم في التخطيط لا توفره أي صيغة نقطية.

بيانات المسار وسمة d

عنصر <path> هو العمود الفقري لـ SVG. سمته d تقبل قواعد رسم مُكثّفة: M (انتقال)، L (خط مستقيم)، H (خط أفقي)، V (خط عمودي)، C (منحنى بيزيه تكعيبي)، S (تكعيبي أملس)، Q (بيزيه تربيعي)، A (قوس بيضاوي)، وZ (إغلاق المسار). مسار واحد يمكن أن يصف أيقونة كاملة أو مخطط رسم توضيحي معقد أو شكل حرف.

هذه الكثافة هي سبب صغر حجم أيقونات SVG. أيقونة 24x24 مُصدّرة من Figma قد تحتوي مسار <path> واحداً بـ 80-120 حرفاً من بيانات d — الملف بأكمله يزن أقل من 500 بايت. قارن ذلك بنسخة PNG من نفس الأيقونة بدقة 2x: من 4 إلى 12 كيلوبايت حسب التعقيد. اضرب ذلك في نظام تصميم يضم 400 أيقونة، وSVG يوفر مئات الكيلوبايتات.

تنسيق CSS داخل SVG

عناصر SVG تقبل خصائص CSS عبر ثلاث آليات: سمات النمط المباشرة، كتل <style> المُضمّنة، وأوراق أنماط خارجية. سمات العرض مثل fill وstroke وopacity وfont-size يمكن تعيينها كسمات XML أو خصائص CSS، مع أسبقية CSS عند وجود كليهما.

هذا التكامل مع CSS يُمكّن التخصيص المرئي. أيقونة SVG واحدة تتغير لونها بناءً على صنف CSS للعنصر الأب — تبديل الوضع الداكن وحالات التمرير وتخصيص ألوان العلامة التجارية كلها تعمل بدون تكرار الرسم. متغيرات CSS المخصصة (custom properties) تخترق إلى SVG المُضمّن، فيمكن لنظام تصميم أن يُعرّف --icon-color مرة واحدة وتُورثه كل أيقونة SVG.

الحركة: SMIL وCSS

يدعم SVG الحركة التصريحية عبر عناصر SMIL (لغة تكامل الوسائط المتعددة المتزامنة): <animate> و<animateTransform> و<animateMotion> و<set>. هذه العناصر تُعرّف حركات الإطارات المفتاحية مباشرةً في الترميز بدون JavaScript. أعلنت Chrome إيقاف SMIL عام 2015 لكنها تراجعت بعد ضغط المجتمع — يظل SMIL فعّالاً في جميع المتصفحات الرئيسية حتى 2025.

حركات CSS والانتقالات تعمل أيضاً على عناصر SVG. خصائص مثل transform وopacity وstroke-dashoffset وfill يمكن تحريكها بقواعد @keyframes المعيارية. تقنية stroke-dashoffset شائعة بشكل خاص لتأثيرات الرسم التلقائي: بتحريك إزاحة الشرطة لمسار مُخطط من طوله الإجمالي إلى صفر، يظهر المسار كأنه يرسم نفسه على الشاشة.

إمكانية الوصول: title وdesc وARIA

SVG هي صيغة الصور الوحيدة التي تملك ترميز وصول مُدمج. عنصر <title> يوفر اسماً قصيراً للوصول (مكافئ لنص alt)، بينما <desc> يُقدّم وصفاً أطول. قارئات الشاشة مثل NVDA وVoiceOver تقرأ هذه العناصر عند تركيز الـ SVG. إضافة role="img" وaria-labelledby على عنصر <svg> الجذر يضمن سلوكاً متسقاً عبر التقنيات المساعدة.

لرسوميات SVG المعقدة كالمخططات البيانية، يمكن تطبيق سمات ARIA على العناصر الفردية — عمود في مخطط بياني يحمل aria-label="الإيرادات: 4.2 مليون ريال" بحيث يحصل مستخدمو قارئات الشاشة على نفس البيانات التي يراها المبصرون. لا توفر أي صيغة نقطية هذا المستوى من الدقة الدلالية.

SVGO: المُحسّن القياسي

ملفات SVG المُصدّرة من أدوات التصميم تحمل عبئاً كبيراً: بيانات وصفية للمحرر، كتل <defs> فارغة، إعلانات فضاء أسماء مكررة، معرّفات غير مُستخدمة، قيم سمات افتراضية، ودقة عشرية مفرطة في إحداثيات المسارات. أداة SVGO (مُحسّن SVG)، أداة Node.js بأكثر من 5,000 نجمة على GitHub، تُزيل هذا العبء بشكل منهجي.

تصدير نموذجي من Illustrator يكون أكبر بنسبة 30-60% من اللازم. مجموعة إضافات SVGO الافتراضية تُزيل التعليقات والبيانات الوصفية والمجموعات الفارغة والعناصر المخفية وسمات المحرر الخاصة مع تقريب إحداثيات المسارات لدقة قابلة للضبط (3 خانات عشرية افتراضياً). الفرق البصري لا يُدرك؛ فرق الحجم كبير. لنشر الويب الإنتاجي، تشغيل SVGO معيار كتصغير JavaScript.

نقطة تحوّل Font Awesome

أصدرت Font Awesome الإصدار 5 في أواخر 2017، واستبدلت توزيع خطوط الأيقونات بـ SVG مُضمّن. لم يكن هذا قراراً منعزلاً — GitHub كانت قد اتخذت نفس الخطوة مُستشهدةً بإمكانية الوصول والأداء وجودة العرض. أثبت هذا التحوّل أن SVG هو معيار الأيقونات في الصناعة وكشف قصور خطوط الأيقونات: لا دعم متعدد الألوان، وتشوهات عرض البكسل الفرعي، ووميض النص غير المُنسّق (FOUT) أثناء تحميل الخط، وسلوك ضعيف مع قارئات الشاشة.

أيقونات SVG حلّت المشاكل الأربع. كل أيقونة تُحمّل مستقلةً (بدون تحميل خط كامل)، وتدعم ألواناً متعددة وتدرجات لونية، وتُعرض عند حدود بكسل دقيقة بدون تلميحات البكسل الفرعي، ويمكنها حمل <title> وaria-label لإمكانية الوصول. تحوّل Font Awesome سرّع الاعتماد عبر صناعة الويب.

SVG المتجاوب وطرق التضمين

يمكن تضمين SVG في HTML بخمس طرق، لكل منها قدرات مختلفة. SVG مُضمّن <svg> في HTML يُعطي وصولاً كاملاً لـ CSS وJavaScript. وسم <img> يُعامل SVG كصورة ثابتة — بدون برمجة ولا وصول لأوراق أنماط خارجية، لكن قابل للتخزين المؤقت. CSS background-image يتصرف كـ <img>. وسم <object> يسمح بالبرمجة داخل سياق SVG الخاص. وdata URIs تُضمّن SVG مباشرةً في CSS أو سمات HTML.

للسلوك المتجاوب، حذف سمتي width وheight من عنصر <svg> الجذر والاعتماد فقط على viewBox يجعل الرسم يتمدد ليملأ حاويته. مع CSS max-width: 100% وheight: auto، يُنتج هذا SVG مرناً يتكيف مع أي تخطيط بدون استعلامات وسائط.

الخط العربي في SVG

تبرز SVG كصيغة مثالية للخط العربي الرقمي بفضل دعمها للمنحنيات الرياضية الدقيقة. حروف النسخ والثلث والديواني تتطلب منحنيات بيزيه معقدة يُعبّر عنها بأمر C في سمة d بكل أمانة. التشكيل والوصل بين الحروف يُحافظ عليهما كمسارات متجهية تتوسع بلا حدود — من شاشة هاتف 320 بكسل إلى لافتة مبنى وزارة بعرض عشرة أمتار — بدون أي فقدان في الجودة.

تتبنّى الهوية البصرية لرؤية السعودية 2030 شعارات SVG في منصاتها الرقمية لضمان وضوح الخط العربي المزخرف عبر جميع الأجهزة والقياسات. كذلك تشترط هويات الشركات السعودية الكبرى — من أرامكو إلى مصرف الراجحي — شعارات SVG في أدلتها التقنية لضمان التوحيد البصري عبر التطبيقات والمواقع والطباعة.

مكتبات SVG Sprite لأنظمة الأيقونات

مكتبات SVG sprite تُدمج أيقونات متعددة في ملف واحد باستخدام عناصر <symbol> داخل كتلة <svg> مخفية. كل رمز يملك معرّفاً فريداً وviewBox خاصاً به. تُستدعى الأيقونات في أي مكان بالصفحة عبر <svg>``<use href="#icon-id"/>``</svg>. يُعرض المتصفح الرمز المُشار إليه عند نقطة الاستخدام.

هذا النمط يُقلل طلبات HTTP (ملف واحد بدلاً من عشرات)، ويُمكّن تنسيق CSS للأيقونات الفردية، ويُحافظ على نظافة DOM. أدوات البناء مثل svg-sprite وsvgstore تُؤتمت توليد المكتبات من ملفات SVG فردية أثناء خطوة البناء.

مقارنة .SVG مع البدائل

.SVG vs .PNG
Scalability
SVG يُعرض بأي دقة بدون تشويه لأن الأشكال مُعرّفة رياضياً. PNG مُقيّد بشبكة البكسلات المُرمّزة — التكبير يُنتج تشوهات استيفاء ضبابية.
 SVG أفضل
.SVG vs .PNG
File size for icons and logos
أيقونة نموذجية 24 بكسل بصيغة SVG تزن 300-500 بايت من XML. نفس الأيقونة بصيغة PNG بدقة 2x (48x48) تتراوح بين 4 و12 كيلوبايت. حجم SVG يعتمد على تعقيد المسار، لا دقة الإخراج.
 SVG أفضل
.SVG vs .EPS
Web compatibility
SVG يُعرض أصلاً في كل متصفح حديث ويتكامل مع CSS وJavaScript. EPS يتطلب تحويلاً للعرض على الويب — المتصفحات لا تستطيع عرض PostScript.
 SVG أفضل

المرجع التقني

نوع MIME
image/svg+xml
المطوّر
World Wide Web Consortium (W3C)
سنة التقديم
2001
معيار مفتوح
نعم — عرض المواصفات

البنية الثنائية

SVG صيغة نص عادي بتنسيق XML بدون بنية ثنائية. تبدأ الملفات بإعلان XML اختياري (<?xml version="1.0" encoding="UTF-8"?>) يتبعه عنصر `<svg>` الجذر الذي يُصرّح عن فضاء الأسماء xmlns="http://www.w3.org/2000/svg". شجرة المستند تحتوي كتل تعريفات (`<defs>` للتدرجات والمرشحات ومسارات القص والرموز)، وبدائيات رسومية (`<path>` و`<rect>` و`<circle>` و`<ellipse>` و`<line>` و`<polyline>` و`<polygon>`)، وعُقد نصية (`<text>` و`<tspan>`)، وحاويات تجميع (`<g>`)، وأوراق أنماط مُضمّنة اختيارية (`<style>`). عناصر المسار تستخدم قواعد سمة d المُكثّفة (أوامر M وL وC وQ وA وZ) لوصف منحنيات بيزيه العشوائية. لأن SVG نصي، لا توجد إزاحات بايت ثابتة أو بايتات سحرية ثنائية — التعرّف على الملف يعتمد على كشف وسم <svg الجذر أو تحليل إعلان فضاء أسماء XML.

1999W3C تنشر مسودة عمل SVG 1.0 التي توحّد مقترحات متجهية متنافسة من Adobe وMicrosoft وSun2001SVG 1.0 تصبح توصية W3C في 4 سبتمبر — أول إصدار رسمي للمعيار2003SVG 1.1 تُنشر كتوصية W3C مُعيارية مع تحسين التوافقية عبر التطبيقات2008SVG Tiny 1.2 تصدر للأجهزة المحمولة؛ Firefox 3 وOpera 9.5 يُحققان دعماً شاملاً لـ SVG2011IE9 يصبح آخر متصفح رئيسي يُضيف دعم SVG الأصلي — عرض SVG أصبح عالمياً2016SVG 2 تدخل مرحلة توصية المرشح في W3C مع تكامل CSS مُحسّن وواجهة DOM مُبسّطة2017Font Awesome 5 تنتقل من خطوط الأيقونات إلى SVG مُضمّن — نقطة تحوّل صناعية تُثبت SVG كمعيار للأيقونات2018مواصفة SVG 2 تُحدّث (4 أكتوبر) مع إزالة SVG Fonts لصالح WOFF ومزيد من المواءمة مع CSS
تحسين SVG باستخدام SVGO أخرى 
svgo input.svg -o output.svg

SVGO يُزيل بيانات المحرر الوصفية والمجموعات الفارغة والسمات المكررة ويختصر بيانات المسارات. تقليص الحجم النموذجي 30-60% على ملفات مُصدّرة من Illustrator أو Figma.

تحويل SVG إلى PNG بعرض محدد (Inkscape) أخرى 
inkscape input.svg --export-type=png --export-width=1024 -o output.png

واجهة Inkscape السطرية تُحوّل SVG إلى PNG بعرض البكسل المُحدد؛ الارتفاع يُحسب من نسبة viewBox. تتعامل بدقة مع تنسيق CSS والمرشحات والخطوط المُضمّنة.

تحويل SVG إلى PNG بدقة عالية (ImageMagick) imagemagick 
magick convert -background none -density 300 input.svg output.png

علامة -background none تحفظ الشفافية. علامة -density 300 تضبط دقة التحويل — القيم الأعلى تُنتج مخرجات أكبر وأوضح. ImageMagick يُفوّض إلى librsvg أو عارض MSVG الداخلي.

تحسين جميع ملفات SVG في دليل دفعة واحدة أخرى 
svgo -f ./input-dir -o ./output-dir

يُعالج جميع ملفات SVG في دليل الإدخال بالتوازي، ويكتب النسخ المُحسّنة في دليل الإخراج. ضروري لتحسين مجموعات الأيقونات أو أصول نظام التصميم.

تحويل SVG إلى PDF (CairoSVG) أخرى 
cairosvg input.svg -o output.pdf

CairoSVG يستخدم مكتبة Cairo للرسوميات ثنائية الأبعاد لتحويل SVG إلى PDF مع الحفاظ على المسارات المتجهية — بدون تحويل نقطي. يُثبّت عبر pip: pip install cairosvg.

SVG → PNG render variable Canvas API يُحوّل مسارات SVG إلى صورة PNG نقطية بدقة ثابتة، وهو مطلوب لعملاء البريد الإلكتروني والصور المصغّرة لمواقع التواصل والمنصات التي لا تعرض الرسوميات المتجهية أصلاً.
SVG → JPG render lossy التحويل إلى JPEG يُسطّح الشفافية على خلفية بيضاء ويُطبّق ضغط DCT الفقود، مُنتجاً ملفات مضغوطة لأنظمة إدارة المحتوى القديمة وصور قوائم المنتجات.
SVG → WEBP render variable مخرجات WebP أصغر بنسبة 25-35% من PNG المكافئ مع دعم اختياري للشفافية، مما يجعلها الهدف النقطي المُفضّل لتحسين أداء الويب.
عالي

نقاط الضعف

  • تنفيذ JavaScript مُضمّن
  • استغلال foreignObject
  • حقن XXE (كيان XML خارجي)

الحماية: FileDex يُعالج ملفات SVG بالكامل في المتصفح باستخدام Canvas API للتحويل النقطي. لا يُرفع أي محتوى SVG إلى خادم. خط أنابيب التحويل يُعرض SVG كصورة نقطية، مما يُزيل تلقائياً جميع وسوم البرمجة ومعالجات الأحداث ومراجع الكيانات الخارجية من المخرجات.

SVGO أداة
مُحسّن SVG بـ Node.js — يُزيل البيانات الوصفية ويطوي المجموعات ويختصر المسارات لتقليص الحجم بنسبة 30-60%
Inkscape أداة
محرر رسوميات متجهية مجاني ومفتوح المصدر مع دعم كامل لـ SVG 1.1 ومعالجة دفعية عبر سطر الأوامر
D3.js مكتبة
مكتبة تلاعب بالمستندات مدفوعة بالبيانات تُولّد مخططات SVG وتصورات بيانية من ربط البيانات
Snap.svg مكتبة
مكتبة JavaScript للتلاعب بـ SVG DOM والحركة في تطبيقات الويب
librsvg مكتبة
مكتبة GNOME لعرض SVG تُستخدم بواسطة ImageMagick وGIMP وGTK للتحويل النقطي على جانب الخادم
CairoSVG مكتبة
محوّل Python من SVG إلى PDF/PNG يستخدم مكتبة Cairo للرسوميات لإخراج متجهي بجودة الطباعة
svg-sprite أداة
أداة بناء لتوليد مكتبات SVG sprite من ملفات أيقونات فردية أثناء خطوط أنابيب CI/CD
Figma أداة
أداة تصميم تعاونية مع استيراد وتصدير SVG وتحرير متجهي مباشر في المتصفح