يمكن لـ HTML5 SVG تحجيم رسومات المتجهات

SVG Can Can ZOAD Vector Graphics (رسومات المتجه القابلة للتطوير) هو تنسيق رسومي يعتمد على لغة العلامة القابلة للتطوير (XML) لوصف رسومات المتجه المتجهين الأبعاد. SVG عبارة عن تنسيق جديد للرسوم المتجهية ذات الأبعاد التي تم صياغتها بواسطة W3C ، وهو أيضًا معيار رسومات متجه الشبكة في المواصفات. يتبع SVG بصراحة بناء جملة XML ويصف محتوى الصورة في اللغة الوصفية لتنسيق النص.

يشير SVG إلى رسومات متجه قابلة للتطوير

يتم استخدام SVG لتحديد الرسومات المستندة إلى المتجهات للشبكات

يستخدم SVG تنسيق XML لتحديد الرسومات

لن تفقد صور SVG جودة الرسومات عند التكبير أو تغيير الحجم

SVG هو معيار تحالف شبكة Wanwei

معايير SVG و W3C مثل DOM و XSL هي كلي

SVG هي لغة تصف الرسومات ثنائية الأبعاد في XML.

يعتمد SVG على XML ، مما يعني أن كل عنصر في SVG DOM متاح. يمكنك إضافة معالج حدث JavaScript إلى عنصر معين.

في SVG ، يعتبر كل رسم مرسوم كائنًا. إذا تغيرت سمة كائن SVG ، يمكن للمتصفح إعادة إنتاج الرسومات تلقائيًا.

سمات:

قرار غير معتمد

دعم معالج الأحداث

التطبيق الأنسب مع مناطق تقديم كبيرة (مثل خريطة Google)

سيؤدي التعقيد العالي إلى إبطاء العرض (تطبيق أي دوم غير متزايد ليس سريعًا))

غير مناسب لتطبيقات اللعبة

Canvas يرسم الرسومات ثنائية الأبعاد من خلال JavaScript.

يتم تقديم قماش بواسطة وحدات البكسل.

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

سمات:

التبعيات

لا تدعم معالج الأحداث

قدرة عرض النص الضعيف

يمكن حفظ صورة النتيجة بتنسيق .png أو .jpg

اللعبة الأكثر ملاءمة -كثافة ، سيتم رسم الكثير منها في كثير من الأحيان

مثال بسيط:

 <svg width = 100 ٪ ارتفاع = 100 ٪> <circle cx = 300 cy = 60 r = 50 stroke =#ff0 width = 3 fill = red /> </svg>

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

يتم تحديد مخطط المتجه لتحديد التعليمات المطلوبة لكل قيمة بكسل بدلاً من القيمة المحددة نفسها ، والتي تتغلب على جزء من هذه الصعوبات. على سبيل المثال ، لم تعد رسومات المتجه توفر قيمًا للبكسل لقطر بوصة واحدة ، ولكن أخبر المتصفح بإنشاء دائرة بقطر بوصة واحدة ، ثم اترك المستعرض (أو التوصيل -في) القيام بالباقي. هذا يلغي العديد من القيود المفروضة على الرسومات إذا كانت الصورة بحاجة إلى عرض ثلاث مرات الحجم العادي ، فسيتم استخدام المتصفح لرسم دائرة وفقًا للحجم الصحيح دون الحاجة إلى تنفيذ طريقة الإدراج الشائعة لصورة الصريف. وبالمثل ، يمكن أن تكون الإرشادات التي تلقاها المتصفح أسهل في ربط مصادر المعلومات الخارجية (مثل التطبيق وقاعدة البيانات)

في نظام HTML ، فإن تقنية المتجهات الأكثر استخدامًا هي عناصر القماش SVG و HTML5 المضافة حديثًا. كلا التقنيين تدعم رسم خرائط المتجهات والصريف.

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

رسم SVG تفاعلي وديناميكي. على سبيل المثال ، يمكنك استخدام البرامج النصية لتحديد الرسوم المتحركة وإعادتها. هذا قوي جدا بالمقارنة مع الفلاش. Flash هو ملف ثنائي ، والذي يصعب إنشاءه وتعديله. SVG هو ملف نصي ، والعملية الديناميكية سهلة للغاية. علاوة على ذلك ، توفر SVG مباشرة عناصر ذات صلة لإكمال الرسوم المتحركة ، والتي هي مريحة للغاية للعمل.

SVG متوافق مع معايير الويب الأخرى ويدعم مباشرة نموذج كائن المستند DOM. هذا أيضًا قوي جدًا مقارنةً بالقماش في HTML5 (ملاحظة هنا ، يستخدم SVG أيضًا لوحة قماشية مماثلة لإظهار رسومات SVG. ستجد أن العديد من الميزات تشبه إلى حد ما قماش HTML5 ؛ في المقالة إذا كان لم يذكر بوضوح أنه قماش SVG ، فهو يشير إلى عنصر القماش في HTML5). لذلك ، قد يكون من المناسب استخدام البرنامج النصي لتحقيق العديد من التطبيقات المتقدمة لـ SVG. وعناصر رسومات SVG تدعم بشكل أساسي الأحداث القياسية في DOM. يمكن تخصيص عدد كبير من برامج معالجة الأحداث (مثل OnMouseover و OnClick) لأي كائن رسومي SVG. على الرغم من أن سرعة التقديم لـ SVG ليست جيدة مثل عنصر القماش ، إلا أنها مرنة للغاية في عملية DOM.

يمكن القول أن SVG هو بروتوكول أو لغة ؛

SVG ليس شيئًا في HTML5 ، ولكنه أيضًا أحد التقنيات الفنية في الصفحة ، ودعنا نضعه على هذا الموضوع.

مقارنة بتنسيقات الصور الأخرى ، لدى SVG العديد من المزايا (العديد من المزايا تأتي من مزايا خريطة المتجه):

• ملف SVG هو XML نقي ، والذي يمكن قراءته وتعديله بواسطة الكثير من الأدوات (مثل المفكرة).

• مقارنة مع صور JPEG و GIF ، فإن SVG أصغر وأكثر ضغطًا.

• SVG قابلة للتطوير ويمكن توسيعها عند انخفاض جودة الصورة.

• النص الموجود في صورة SVG اختيارية ، وهو متاح أيضًا (مناسب لصنع الخرائط).

• يمكن تشغيل SVG مع تقنية Java.

• SVG هو مستوى الانفتاح.

المنافس الرئيسي لـ SVG هو فلاش. بالمقارنة مع Flash ، فإن أكبر ميزة لـ SVG هي أنها متوافقة مع المعايير الأخرى (مثل XSL و DOM) وهي مريحة للعمل ، في حين أن Flash هي تقنية خاصة غير شعبية. آخرون ، مثل تنسيقات التخزين والرسومات الديناميكية ، تحتل SVG أيضًا ميزة كبيرة.

المتصفح الذي يدعم HTML5 و SVG هو محور المناقشة هنا. بالنسبة للمتصفحات التي تدعم SVG مباشرة ، تستخدم SVG بشكل أساسي جانبين وطريقتين.

داخلي يونايتد إلى HTML

SVG هو عنصر HTML القياسي ، فقط اكتبه مباشرة إلى HTML.

 <؟ XML الإصدار = 1.0 الترميز = UTF-8؟> <! -> <title> أول صفحة SVG الخاصة بي </title> </head> <body> <svg xmlns = http://www.w3 x = 0 y = 0 width = 100 ٪ Quite = 100 ٪ fill = Black/> <circle cx = 100 cy = 100 r = 50 style: Black ؛ > </body> </html>

يرجى ملاحظة أن بداية بيان XML في البداية ، ومساحة اسم SVG ، XMLNS ، الإصدار ، وما إلى ذلك ، يمكن كتابة مشكلة التوافق بشكل أساسي ؛

ملف SVG مستقل

يشير SVG المستقل إلى توفير تنسيق ملف رسومي متجه عن طريق توسيع ملحق ملف SVG. يتم تضمين ملف SVG هذا في المتصفح.

1. ملف/صفحة SVG المستقلة ، القالب المحدد يشبه بشكل أساسي ما يلي:

 <svg width = 100 ٪ ارتفاع = 100 ٪> <!-علامة SVG هنا .-> </svg>

احفظ هذه الملفات النصية في ملفات SVG كملحق ، مثل Sun.SVG.

2.html يشير إلى ملف SVG الخارجي.

استخدم عناصر الكائن أو IMG لتضمين رسومات SVG ، على سبيل المثال ، المثال التالي:

 <! قم بتنفيذ رمز العودة هنا ، أو عرض رسالة:-> <p> لا يدعم المتصفح ترقية إلى متصفح حديث. = 10 عرض = 30 ارتفاع = 30 ضربة = تعبئة أسود = عرض السكتة الدماغية الشفافة = 5/> <RAD = 10 RX = 10 WIDTH = 30 ارتفاع = 30 TROKE = تعبئة أسود = عرض السكتة الدماغية الشفافة = 5/> <Circle CX = 25 cy = 75 r = 20 Stroke = fill red = width rockproom الشفافة = 5/> <Ellipse cx = 75 rx = 20 ry = 5 s troke = red fill = width السكتة الدماغية الشفافة = 5/> <السطر x1 = 10 x2 = 50 y1 = 110 y2 = 150 السكتة الدماغية = ملء البرتقال = عرض السكتة الدماغية الشفافة = 5/> <نقاط polyline = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 Stroke = Orange تعبئة = عرض السكتة الدماغية الشفافة = 5/> <نقاط polygon = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 السكتة الدماغية = تعبئة خضراء = عرض السكتة الدماغية الشفافة = 5/> <path d = M20 ، 230 Q40 ، 205 50 ، 230 T90 ، 230 Fill = None Stroke = Blue Stroke-Width = 5/SVG>

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