SVGs: إنشاء رسومات HTML5 التي تعمل في أي متصفح

إفشاء: يساعدك دعمك في الحفاظ على تشغيل الموقع! نحصل على رسوم إحالة لبعض الخدمات التي نوصي بها في هذه الصفحة.


عند العمل مع الصور على الويب ، من المهم استخدام نوع الملف الصحيح للغرض المقصود. في حين أن تنسيقات مثل JPG و PNG و GIF مألوفة لمستخدمي الويب ، إلا أنها قد لا تكون دائمًا الخيار المناسب.

ستعرفك هذه المقالة على أساسيات نوع آخر من تنسيق الصور: تنسيق SVG أو تنسيق رسومات متجهة قابلة للتحجيم.

SVG: رسومات موجهة قابلة للتحجيم

مكافحة ناقلات تنسيقات الصور النقطية

في عالم ملفات الصور ، هناك نوعان أساسيان من التنسيق: النقطية والمتجه. تعتمد التنسيقات القائمة على البيانات النقطية على وحدات البكسل. تتضمن هذه التنسيقات أنواع ملفات مثل JPG و PNG و GIF.

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

يمكنك معرفة ما إذا كانت الصورة عبارة عن صورة نقطية (أو صورة نقطية) ببساطة من خلال النظر إليها عن قرب و (عادةً) في التكبير / التصغير المكبر. إذا رأيت الملايين من المربعات الصغيرة بدقة عالية بما يكفي (خاصة في الأماكن التي يتغير فيها لون إلى لون آخر) ، فأنت تنظر إلى وحدات البكسل ، وبالتالي فهي صورة نقطية.

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

نظرًا لأن الصور التي تعتمد على المتجه هي رسوم توضيحية ، فهي ليست مناسبة للصور الفوتوغرافية. ومع ذلك ، يمكن إنشاء صورة أنشأها فنان بناءً على صورة في ملف SVG. ربما تكون الشعارات هي الاستخدام الأساسي لـ SVG على الويب ، جنبًا إلى جنب مع الرسوم التوضيحية الأخرى الخاصة بالعلامة التجارية.

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

وذلك بسبب الاختلافات بين المتجهات والتنسيقات النقطية ؛ تنسيق SVG هو الطريق للذهاب هنا.

مزايا SVG

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

لذلك عند تكبير رسم نقطي – ملف JPG أو PNG ، على سبيل المثال – سترى الصورة باهتة ومشوهة بشكل متزايد.

بتنسيق SVG ، لن تفعل ذلك. يمكنك التكبير والتكبير دون تشويه الصورة نفسها.

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

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

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

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

مساوئ SVG

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

بعض هذه البرامج ، مثل Adobe Illustrator ، لا يمكن الوصول إليها فورًا لكل من قد يحتاج إلى العمل مع تلك الصور ، على عكس عدد كبير من المحررين (العديد منها مجاني) المتاح للعمل مع الصور النقطية.

ومع ذلك ، يعد Inkscape محررًا مجانيًا ومفتوح المصدر يمكنه التعامل مع ملفات SVG.

ملحقات تنسيق المتجهات الأخرى

بالإضافة إلى SVG (الرسم المتجه القابل للتحجيم) ، تشمل امتدادات ملفات المتجه الأساسية:

  • .drw (ملف ناقل)
  • .eps (بوستسكريبت مغلف)
  • .pct (تنسيق رسومات نقطية Macintosh)
  • .pif (تنسيق صورة متجهة GDF)
  • .ps (Adobe PostScript)
  • .svf (تنسيق متجه بسيط)

عناصر SVG في HTML5

باستخدام عناصر HTML ، يمكنك إنشاء بعض الأشكال الأساسية باستخدام SVG في المستعرض. يجب أن يكون كل عنصر من هذه العناصر متداخلاً داخل العلامة.

خط

يمكن استخدام العنصر لإنشاء خط مستقيم واحد يتكون من نقطتين – بداية ونهاية. سيكون لكل نقطة ، بالطبع ، إحداثيات ، “س” و “ص”.

سيبدو الرمز على النحو التالي:

يمكنك أيضًا إقران سمات أخرى بـ < خط > العنصر: تحدد السكتة الدماغية اللون ويتحكم عرض الخط في سمك الخط.

مستطيل

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

دائرة

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

إذا لم تحدد سمات cx و cy ، فسيفسر المتصفح القيمة الافتراضية “0”.

تتضمن العناصر الأخرى التي يمكنك اللعب بها ، و .

دعم المتصفح

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

ماذا عن SWF?

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

مع دعم Flash المتضاءل لصالح HTML5 و CSS وجافا سكريبت و SVG ، من المهم أن يفهم متخصصو الويب الاختلافات بين SVG و SWF ويتعلمون استخدام التقنيات الحديثة.

ما هو SWF?

SWF هو اختصار يرمز إلى تنسيق الويب الصغير. إنه تنسيق ملف Adobe Flash يمكن استخدامه للرسومات والرسوم المتحركة وعناصر واجهة مستخدم التطبيق المصغر المضمنة. يجب تثبيت المكوّن الإضافي Flash في المستعرض حتى يتم عرض محتوى SWF.

كان SWF موجودًا منذ فترة طويلة ، ويدعمه مجموعة كبيرة من المطورين المؤهلين ، وهناك العديد من الرسوم المتحركة والدروس SWF المصممة مسبقًا والمتاحة بسهولة.

أوجه التشابه والاختلاف بين SVG و SWF

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

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

تم تطوير معيار SVG من قبل اتحاد شبكة الويب العالمية (W3C) ، ونتيجة لذلك ، فهو مفتوح تمامًا ومجاني للاستخدام والبناء عليه. SWF ، من ناحية أخرى ، هو تنسيق Flash مملوك لشركة Adobe. في عام 2008 ، أزالت Adobe العديد من القيود التي تحكم استخدام ملفات SWF ، لكن SWF يظل تنسيقًا مملوكًا.

SVG أسهل للعمل معه

كود SVG هو نص عادي يمكن قراءته من قبل XML. يمكن إنشاء SVGs باستخدام أي محرر نص عادي وإنشاء SVGs البسيط أمر سهل ويمكن تعلمه بسرعة من قبل أي شخص على دراية بلغات الويب مثل HTML و CSS و JavaScript. يجب إنشاء ملفات SWF وتحريرها باستخدام برامج معقدة مثل Adobe After Effects أو بدائل مفتوحة المصدر مثل مترجم Motion-Twin ActionScript 2 Compiler.

بالإضافة إلى ذلك ، يمكن إجراء برمجة SVGs للرسوم المتحركة والتفاعل باستخدام CSS وجافا سكريبت – اللغات التي يعمل بها كل مصمم ويب ومطور على أساس يومي. من ناحية أخرى ، يتم كتابة ملفات SWF باستخدام Adobe ActionScript الذي يشبه جافا سكريبت ولكن ليس متطابقًا ، ومعظم المطورين يتعاملون معه على أساس أقل تكرارًا.

إن إضافة SVG إلى موقع ويب هو أيضًا أمر بسيط مثل إسقاط الرمز في مستند HTML بما يتماشى مع عناصر HTML الأخرى. بدلاً من ذلك ، يمكن تضمين SVGs في مستند HTML. يجب تضمين ملفات SWF في مستند HTML.

SVG أفضل لـ SEO

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

دعم SVG ينمو

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

يدعم كل من SVG و SWF أنواع وسائط متعددة

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

ملخص SWF

بينما كانت الرسومات المستندة إلى Flash تحكم الويب في الماضي ، فإن المستقبل ينتمي إلى SVG المتحركة مع CSS و JavaScript. ستساعد الموارد التالية مصممي الويب ومشرفي المواقع في الحفاظ على مهاراتهم محدثة والبدء في استخدام SVG في مشاريعهم.

موارد SVG

هناك العديد من المقالات والبرامج التعليمية والأدلة المجانية لمساعدتك على بدء استخدام SVG. وهنا بعض من أفضل.

تعلم الأساسيات

إذا كنت قد بدأت للتو مع SVG ، فراجع هذا البرنامج التعليمي من Creative Bloq لإنشاء أشكال بسيطة واستخدام التعبئات والتدرجات. الخيار الثاني الذي يغطي الكثير من نفس التقنيات الأساسية هو هذا الدليل لبدء استخدام SVG من Envato Tuts+.

استخدم برنامج الرسومات لإنشاء SVGs

إذا كنت ستنشئ أي شيء أكثر تعقيدًا من الأشكال البسيطة ، فستحتاج إلى العمل باستخدام برنامج رسومات متجهية مثل Adobe Illustrator والذي يمكنه تصدير الملفات بتنسيق SVG. سيوضح لك هذا الدليل السريع من CSS-Tricks كيفية استخدام Illustrator لإنشاء إعلان متحرك يستخدم HTML و CSS فقط. مصدر آخر رائع لتعلم كيفية استخدام المصور لإنشاء SVGs يأتي من Web Designer Depot.

إذا لم تتمكن من الوصول إلى Adobe Illustrator ، فأنت لست محظوظًا. إنكسكيب هو برنامج رسومات متجهة ذات جودة احترافية مجاني ومفتوح المصدر. هناك أيضًا العديد من البرامج التعليمية الرائعة المتاحة من Inkscape والتي ستساعدك على بدء البرنامج وتوضح لك كيفية تصدير إبداعاتك بتنسيق SVG.

تعلم تقنيات SVG المتقدمة

إذا كنت تريد إتقان SVG حقًا ، فهناك مصدران تحتاج إلى قضاء بعض الوقت في مراجعتهما:

  • برنامج SVG التعليمي من شبكة مطوري موزيلا.
  • SVG Primer لمتصفحات اليوم, كتاب إلكتروني مجاني من W3C.

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

إنشاء الرسوم المتحركة SVG

يمكن استخدام SVG لإنشاء رسوم متحركة رائعة حقًا. بمجرد أن تكون مرتاحًا للعمل مع SVG ، إذا كنت تريد معرفة كيفية إنشاء رسوم متحركة رائعة لـ SVG ، فراجع هذه الموارد:

  • برنامج تعليمي من David Walsh لإنشاء رسوم متحركة SVG باستخدام CSS و JavaScript.
  • برنامج تعليمي شامل من Jenkov يغطي جميع جوانب العمل مع SVG ، بما في ذلك الرسوم المتحركة CSS وبرمجة JavaScript.
  • قائمة Hongkiat التي تضم ثمانية مكتبات JavaScript رائدة لإنشاء رسوم متحركة بتنسيق SVG.

مزيد من الموارد

  • برنامج SVG التعليمي لشبكة مطوري Mozilla: برنامج تعليمي قيد التقدم يناقش كل جانب من جوانب تنسيق SVG للاستخدام في متصفحات Mozilla.
  • مقدمة بسيطة عن الرسوم المتحركة SVG: برنامج تعليمي رائع كتبه ديفيد والش.
  • ImageMagick مقدمة وموارد: مجموعة من أدوات الرسومات ، والتي تتضمن بعضها لـ PostScript.

استنتاج

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map