مقدمة إلى HTML5 SVG 2D 1 - SVG (رسومات متجه قابلة للتطوير)

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

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

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

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

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

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

يمكن القول أن SVG هو بروتوكول ولغة ؛ إنه عنصر قياسي من HTML وتنسيق الصورة.

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

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

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

• SVG أصغر في الحجم وأكثر انضغاطًا مقارنةً بصور JPEG و GIF.

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

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

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

• SVG هو معيار مفتوح.

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

فيما يتعلق بالمتصفحات التي تدعم HTML5 و SVG ، فهي ليست محور المناقشة هنا. في الأساس ، يتم تقريبًا مع أحدث متصفح Chrome أو Firefox (أي أن المستخدمين مطلوبة لتثبيت IE9. أما بالنسبة للإصدارات قبل IE9 ، إذا كنت بحاجة إلى تثبيت المكونات SVG ، فسوف أتخطى هنا). بالنسبة للمتصفحات التي تدعم SVG مباشرة ، تعتمد SVG بشكل أساسي طرق عرض على الوجهين وذات الجوانب.

SVG هو عنصر HTML قياسي ، فقط اكتبه مباشرة في HTML ، انظر المثال التالي:

<؟

<! doctype html>

<html>

<head>

<!-<meta content = "text /html ؛ charset = utf-8" http-equiv = "content-type" />->

<title> أول صفحة SVG الخاصة بي </title>

</head>

<body>

<svg xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1"

العرض = "200px">

<rect x = "0" y = "0"

Fill = "None" Stroke = "Black"/>

<circle cx = "100" cy = "100" r = "50"

النمط = "السكتة الدماغية: أسود ؛ ملء: أحمر ؛"/>

</svg>

</body>

</html>

يرجى ملاحظة أن الجزء الأول من إعلان XML ، والذي يرتبط بمساحة الاسم SVG XMLNS ، الإصدار ، وأجزاء أخرى ، مع الأخذ في الاعتبار مشكلات التوافق ؛ هذه الأجزاء غير مطلوبة بشكل أساسي في HTML5 (من الأفضل أن تفعل ذلك بنفسك سواء أكتبها أم لا).

يشير SVG المستقل إلى توفير تنسيقات ملفات رسومات ناقلات باستخدام ملحقات ملف SVG. تضمين ملف SVG هذا في المتصفح ويمكنك استخدامه.

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

<svg>

<!- ​​علامة SVG هنا. ->

</svg>

احفظ هذه الملفات النصية في ملفات مع SVG كملحق ، مثل Sun.SVG. يمكن فتح هذه الملفات وتصفحها مباشرة في المتصفح أو المضمنة في صفحات أخرى كمراجع.

2. HTML يشير إلى ملفات SVG الخارجية.

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

<! doctype html>

<html>

<head>

<title> أول صفحة SVG الخاصة بي </title>

</head>

<body>

<كائن بيانات = "sun.svg" type = "image/svg+xml"

العرض = "300px">

<!-قم بتنفيذ رمز العودة هنا ، أو عرض رسالة:->

<p> لا يدعم متصفحك SVG - يرجى الترقية إلى متصفح حديث. </p>

</object>

<img src = "sun.svg" />

</body>

</html>

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

يتم تقديم SVG بدقة بترتيب تحديد العناصر ، وهو يختلف عن HTML الذي يتحكم في التسلسل الهرمي بقيم z-index. في SVG ، يتم تقديم العناصر المكتوبة في المقدمة أولاً ، ويتم تقديم العناصر المكتوبة في الخلف لاحقًا. العناصر التي تم تقديمها لاحقًا ستكتب العناصر السابقة. على الرغم من أنه يتأثر أحيانًا بالشفافية ولا يبدو أنه يتم الكتابة فوقه ، إلا أن SVG يتم تقديمه بالفعل بترتيب التسلسل.

ملاحظة: يتم تعريف SVG في XML ، لذلك فهو حساس للحالة ، وهو مختلف عن HTML.

المستند الرسمي: http://www.w3.org/tr/svg11/

فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

مركز التطوير: https://developer.mozilla.org/en/svg

المرجع الشعبي: http://www.chinasvg.com/