ملفات SVG: ما هي وكيف تفتحها وتنشئها وتحولها

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

ما هو SVG؟

SVG اختصار Scalable Vector Graphics، وهو معيار ويب مفتوح من W3C. يحفظ PNG البكسلات، بينما يحفظ SVG تعليمات الرسم. يحدد viewBox نظام الإحداثيات الداخلي، وتحدد width وheight الحجم الافتراضي.

متى تستخدمه؟

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

فتح ملف SVG

اسحب الملف إلى Chrome أو Firefox أو Safari أو Edge. لفحص التكبير والقص وviewBox استخدم SVG Viewer. استخدم Inkscape أو Illustrator أو Figma للتحرير، ومحرر الكود لقراءة XML والمراجع الخارجية.

إنشاء ملف SVG

يمكنك التصدير من برنامج متجهي أو كتابة أشكال بسيطة:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
  <title id="title">Blue circle and orange square</title>
  <circle cx="35" cy="40" r="24" fill="#2563eb" />
  <rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>

تحتاج الملفات المستقلة إلى مساحة الاسم. أضف title عندما تحمل الصورة معنى للقارئ.

التحرير والتحويل

عدّل العقد والمنحنيات في محرر متجهي، أو غيّر الألوان وviewBox والمسارات مباشرة في XML. افحص النتيجة عبر SVG Editor وSVG Viewer. نظّف ملفات المصادر الخارجية باستخدام SVG Sanitizer.

SVG to PNG للصور النقطية الشفافة.
SVG to JPG للمعاينات بلا شفافية.
SVG to PDF للمراجعة والطباعة.
SVG to Data URI للاستخدام داخل CSS أو HTML.

قائمة الفحص قبل النشر

تحقق من العرض وviewBox والنسب والقص والتباين. احذف البيانات الوصفية غير اللازمة، ونظّف الملفات غير الموثوقة، واضغط النسخة النهائية عبر SVG Optimizer. احتفظ بالمصدر القابل للتحرير منفصلاً.

الأسئلة الشائعة

هل SVG أفضل من PNG؟

SVG مناسب للأشكال القابلة للتكبير، وPNG مناسب للصور والأنسجة والأحجام الثابتة.

هل يمكن فتحه بلا برنامج تصميم؟

نعم، يعرضه المتصفح أو SVG Viewer مباشرة.

هل يمكن تحويل PNG إلى SVG؟

ينشئ التتبع تقريباً من المسارات، وتكون النتائج أفضل مع الرسومات البسيطة.

لماذا يظهر SVG فارغاً؟

افحص viewBox والقص والخلفية والمرشحات وصحة XML.

هل ملفات SVG آمنة؟

تعامل مع الرفع على أنه XML غير موثوق ونظفه قبل التضمين.

سير العمل مع SVGView

عاين في SVG Viewer، وعدّل في SVG Editor، ونظّف عبر SVG Sanitizer، وحسّن في SVG Optimizer، ثم حوّل فقط عند حاجة الوجهة.

ملفات SVG: ما هي وكيف تفتحها وتنشئها وتحولها