يكتشف "التقاط SVG" جميع ملفات SVG بصيغها المختلفة على صفحة الويب — عناصر SVG المضمنة، مراجع ملفات svg. الخارجية، نقوش SVG (أنماط use/symbol)، والصور المشفرة كـ data URIs. قم بمعاينة كل SVG بأحجام مختلفة، وتحقق من الشفافية على الخلفيات الفاتحة والداكنة، وانسخ ترميز SVG الخام، أو قم بتنزيل ملفات SVG المحسنة.
تتواجد ملفات SVG في كل مكان على مواقع الويب الحديثة — الشعارات، والأيقونات، والرسوم التوضيحية، والرسومات التزيينية، والتمثيلات البصرية للبيانات — ولكن استخراجها صعب بشكل مدهش. تُدمج ملفات SVG المضمنة مباشرةً في HTML ولا يمكن تحديد خيار "حفظ كصورة" لها. تستخدم نقوش (sprites) الـ SVG مراجع use/symbol التي لا تنحل كملفات مستقلة. بينما ملفات SVG الخارجية المحملة عبر مصادر الصور (img src) أو CSS لا يمكن فحصها دون فتح تبويب الشبكة (network tab) في أدوات المطور. أداة التقاط SVG تتعامل مع جميع هذه المصادر تلقائياً. تقوم بمسح DOM لملفات SVG المضمنة، وتحلل مراجع النقوش إلى تعريفات الرموز الكاملة الخاصة بها، وتبحث عن عناوين URL الخارجية لملفات SVG، وتفك تشفير صور data URIs. يتم عرض كل SVG في معرض مع معاينة حية، ويمكنك التبديل بين الخلفيات الفاتحة، والداكنة، ورقعة الشطرنج للتحقق من الشفافية. انسخ كود SVG الخام لتضمينه في المكونات الخاصة بك، أو قم بتنزيل SVG كملف جاهز للاستخدام في مشروعك.
اعثر على ملفات SVG من كل مصدر في الصفحة: عناصر <svg> المضمنة في الـ DOM، ملفات svg. الخارجية المُحملة عبر علامات img أو object، ملفات SVG من خصائص background-image في CSS، مراجع نقوش use/symbol (تم تحليلها إلى ملفات SVG كاملة)، والصور المُشفرة بصيغة data URI الأساسي رقم 64.
عاين كل SVG بأحجام مختلفة (الأصلي، 2x، 4x) مقابل ثلاث خلفيات: داكنة، فاتحة (أبيض)، ورقعة الشطرنج. تُظهر رقعة الشطرنج مناطق الشفافية التي قد لا تكون مرئية على خلفية ذات لون واحد.
انقر على "نسخ SVG" للحصول على ترميزات SVG الكاملة — viewBox، المسارات، المجموعات، وكافة الخصائص متضمنة. قم بلصقها مباشرة في HTML الخاص بك، أنماط JSX، قوالب Vue، أو ملف نقوش SVG. الأكواد نظيفة وذات تنسيق سليم.
قم بتنزيل ملفات SVG فردية بصيغة svg. باستخدام إعلانات XML وترميزات صحيحة. يتم تسمية الملفات استنادًا إلى المعرف ID لـ SVG، واسم الفئة، أو الـ aria-label الخاص به — وليس بأسماء عامة مثل "download.svg".
يُظهر كل SVG نوع مصدره (مضمن، خارجي، نقش sprite، صيغة data URI)، وأبعاد viewBox، وحجم الملف، ومكان العثور عليه في DOM. هذا مفيد لفهم كيفية تنفيذ الموقع لاستراتيجيته مع الـ SVG.
عندما تستخدم إحدى الصفحات نقوش SVG ذات مرجع use href="#icon-name"، تقوم الأداة بتحليل كل رابط لتعريفه الكامل — مما يمنحك عنصر SVG المستقل بكامله دون الاكتفاء بعنصر الاستخدام فقط.
تفضل بزيارة موقع إلكتروني يعمل بنظام ممتاز للأيقونات واحصل على مجموعة الأيقونات بأكملها. ستجد الأداة الأيقونات في النقوش (sprites)، المضمنة ، والملفات الخارجية — مما يجمع مكتبة الأيقونات بأكملها، بغض النظر عن طريقة تنفيذها.
هل تحتاج لشعار شركة بصيغة SVG لإدراجه بصفحة الشراكة أو دراسة الحالة أو الملف الصحفي؟ معظم الشعارات على المواقع الحديثة هي SVGs. تجدها الأداة وتستخرجها بجودتها المتجهة الأصلية — مع قابلية التكبير غير المحدودة.
ادرس كيفية تعامل المواقع الإلكترونية مع الرسوم التوضيحية أو الرسوم المتحركة أو تمثيلات البيانات الخاصة بـ SVG. انسخ كود SVG الخام لترى تنظيم المسارات وأبعاد viewBox وتطبيق استايلات CSS.
هل تنتقل إلى نظام أيقونات جديد؟ خذ ملفات SVG من الموقع المرجعي واسحبها في ملفات الـ sprite أو نظام الأيقونات الخاص بمشروعك. ستحصل على كود SVG نظيف مع viewBox صحيح جاهز للدمج.
تأكد من كيفية استخدام ملفات SVG بموقعك — هل تم تضمينها (مفيدة للمعالجة)، خارجية (مفيدة من أجل التخزين المؤقت)، أو كـ sprites (مفيدة من أجل الكفاءة)؟ توضح أداة التقاط SVG نوع المصدر لكل SVG، لمساعدتك في تحسين استراتيجيتك مع SVG.
افتح اللوحة العائمة لـ DevSuite Pro وانقر فوق أيقونة التقاط SVG. ستقوم الأداة بمسح الصفحة بحثاً عن جميع مصادر SVG ثم بناء المعرض.
تظهر شبكة من صور SVG المصغرة المتواجدة على الصفحة. يُظهر كل إدخال اسم الـ SVG ونوع مصدره وأبعاد الـ viewBox الخاصة به.
انقر على أي صورة SVG لفتح معاينة أكبر لها. قم بالتبديل بين الخلفية الداكنة أو الفاتحة أو المربعة. غير حجم المعاينة لترى كيف يختلف مقاس الـ SVG.
انقر على "نسخ SVG" للحصول على الكود لتضمينه ببرمجتك الخاصة أو انقر على "تنزيل" لحفظه كملف svg. مستقل على جهازك.
عُد إلى المعرض لاكتشاف المزيد من ملفات SVG. يوضح الشارة المرفقة إجمالي عدد الملفات المكتشفة في الصفحة.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
