تقدم هذه المقالة بشكل أساسي المفاهيم الأساسية لـ SVG ، وكذلك الفرق بين SVG و Canvas ، وأخيراً تعطي مثالًا بسيطًا لتسهيل الجميع لفهم رسومات متجه SVG القابلة للتطوير بشكل أفضل. موصى به للجميع.
موسوعة بايدو:
SVG Dector Vector Graphics عبارة عن تنسيق رسومي يعتمد على لغة الترميز القابلة للتمديد (XML) التي تصف رسومات المتجهات ثنائية الأبعاد. SVG عبارة عن تنسيق جديد للرسومات المتجهات ثنائية الأبعاد صاغته W3C وهو أيضًا معيار رسومات متجه الشبكة في المواصفات. يتبع SVG بصرامة بناء جملة XML ويستخدم لغة وصفية بتنسيق نص لوصف محتوى الصورة ، لذلك هو تنسيق رسومات متجه مستقل عن دقة الصورة.
ما هو SVG؟يشير SVG إلى رسومات متجه قابلة للتطوير (رسومات متجه قابلة للتطوير)
يتم استخدام SVG لتحديد الرسومات المستندة إلى المتجهات للشبكات
تحدد SVG الرسومات بتنسيق XML
لن تفقد صور SVG جودة الرسومات الخاصة بها عندما يتم توسيعها أو تغييرها في الحجم.
SVG هو المعيار لتحالف الويب العالمي
SVG هو كلي مع معايير W3C مثل DOM و XSL
الفرق بين القماش و SVG:SVG
SVG هي لغة تستخدم XML لوصف الرسومات ثنائية الأبعاد.
يعتمد SVG على XML ، مما يعني أن كل عنصر في SVG DOM متاح. يمكنك إرفاق معالج حدث JavaScript بعنصر.
في SVG ، يتم التعامل مع كل رقم مرسوم ككائن. إذا تغيرت خصائص كائن SVG ، يمكن للمتصفح إعادة إنتاج الرسومات تلقائيًا.
سمات:
لا تبعية القرار
دعم معالجات الأحداث
الأفضل للتطبيقات مع مناطق العرض الكبيرة (مثل خرائط Google)
التعقيد العالي يمكن أن يتباطأ التقديم (لا يوجد تطبيق يفرط في DOM)
غير مناسب لتطبيقات الألعاب
قماش
Canvas يرسم الرسومات ثنائية الأبعاد من خلال JavaScript.
يتم تقديم القماش بكسل بواسطة بكسل.
في قماش ، بمجرد رسم الرسم البياني ، لا يستمر في الحصول على انتباه المتصفح. إذا تغير موقعه ، فيجب إعادة طلاء المشهد بأكمله أيضًا ، بما في ذلك أي كائن قد يكون مكتوبًا من قبل الرسومات.
سمات:
يعتمد على القرار
لا يتم دعم معالجات الأحداث
قدرة عرض النص الضعيف
القدرة على حفظ الصور الناتجة بتنسيق .png أو .jpg
الأفضل للألعاب المكثفة للصور ، والتي يتم طلاؤها في كثير من الأحيان
مثال SVG:انسخ الرمز