أفضل ما في العالمين: العمل باستخدام SVGs و HTML Canvas

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

في هذه المقالة ، سوف نتعلم كيفية استخدام صور SVG المضمنة. لكتابة صور SVG مباشرة في مستند HTML ، استخدم علامة * svg. باستخدام رمز VS أو IDE المفضل ، افتح صورة SVG وانسخ الكود والصقه داخل "جسم" عنصر HTML.

SVG مضمن. في علامة SVG ، قم بتضمين سمة aria-bylabel التي تتوافق مع العنوان> العلامة. بالنسبة للأشكال التي تحتوي على أكثر من نوع واحد ، فإن تضمين علامة العنوان لكل مجموعة شكل يجعل عملية الإنشاء أكثر إمتاعًا. من المفيد جدًا لمستخدمي التكنولوجيا المساعدة تضمين وصف وعلامة العنوان في نفس المقالة.

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

يعد SVG المضمن نوعًا من العلامات المضمنة في ترميز صفحة الويب.

كيف يمكنك مقارنة قماش Html و Svg؟

يتم رسم الرسومات باستخدام JavaScript باستخدام عنصر HTML. يتم تعريف عنصر الرسوم على أنه عنصر لوحة الرسم . يفضل استخدام SVG عندما يكون هناك عدد أقل من الكائنات أو مساحة سطح أكبر. تتمتع اللوحة القماشية بأداء أعلى عندما يتعلق الأمر بالأسطح التي تحتوي على عدد أقل من الكائنات أو عندما يتعلق الأمر بأشياء على سطح أكبر.

تعد كل من Canvas و SVG من تقنيات HTML5 التي تسمح بإنشاء الرسومات والصور والأشكال. نظرًا لأن Canvas تعتبر حاوية ، لا يمكن إنشاء أي رسم في Canvas بدون JavaScript. أنشأنا عنصر لوحة الرسم باستخدام getElementById () في مقتطف الشفرة أعلاه ، ثم رسمنا مستطيلًا على اللوحة القماشية بعد استخدام getElementById () مرة أخرى.

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

Svg مقابل. اللوحة القماشية

إذا كنت تفضل عرضًا متجهًا ثابتًا ، فإن sva هو أفضل رهان لك. وضع Canvas ممكّن في HTML5.

يمكنك جعل Svg في قماش؟

نعم ، من الممكن عرض SVG في لوحة الرسم. يمكن القيام بذلك باستخدام مكتبة مثل canvg.

هذه المكتبة ، التي تسمح لك بتحويل أي عقدة DOM تعسفية إلى صورة متجه (SVG) أو صورة نقطية (PNG أو JPEG) باستخدام JavaScript خالص ، كانت إحدى المكتبات التي استخدمتها. عندما يتم تصدير عناصر DOM إلى SVG ، يمكنك تغيير حجم عناصر DOM لمطابقة الحجم الذي تريده ، مثل 3500x ، وهو أكبر بكثير من الحجم الأصلي للأزرار. سنشرح كيفية استخدام JavaScript لعرض ملف an.svg أو an.string لصورة في هذا البرنامج التعليمي. لاسترداد البيانات العادية ، سنحتاج إلى عنوان URL للبيانات. يمكنك استخدام عنوان URL الخاص ببيانات SVG كمصدر لعنصر صورة في HTML لاختبار صلاحيته. بمجرد اختيار لوحة قماشية فارغة ، يمكنك استخدامها لتصيير SVG بالحجم المخصص ، ثم تصديرها إلى PNG أو JPEG. في هذا المثال ، سنستخدم Wikipedia Tiger SVG كنقطة بداية ، ثم ننشئها يدويًا عن طريق تخزين SVG في متغير سلسلة قبل استخدام مخطط عنوان URL للبيانات لتحديد عنوان URL المشفر.

هل تنتج Canvas رسومات متجهة؟

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

لماذا استخدام Svg Over Raster Graphics؟

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

هل يجب أن تكون Svg مضمنة؟

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

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

قماش إلى Svg

Canvas عبارة عن سطح رسم يعتمد على البكسل ، حيث يمكن تعيين كل بكسل على لون معين. Svg هو تنسيق صورة قائم على المتجهات ، حيث يتم تحديد كل عنصر من خلال مجموعة من الإحداثيات.

برنامج Scalable Vector Graphics (SVG) هو اختصار لـScalable Vector Graphics. يُستخدم عنصر Canvas ، وهو عنصر HTML ، لإنشاء رسومات على صفحة ويب. دعنا نلقي نظرة فاحصة على الاختلافات بين هذين الخيارين الشائعين. كما تمت مناقشة الاختلافات بين الرسوم البيانية وجداول المقارنة بالتفصيل.

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

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

قماش

Canvas.todataurl svg هي وظيفة يمكن استخدامها لتحويل عنصر قماش إلى ملف svg. يمكن أن يكون هذا مفيدًا إذا كنت تريد حفظ محتويات عنصر لوحة الرسم كصورة أو إذا كنت تريد إنشاء صورة متجهة.

في هذه المقالة ، سوف نتعلم كيفية رسم SVG على لوحة الرسم ثم تنزيله باستخدام JavaScript. من أجل تحديد عرض SVG وارتفاعه ، يمكننا استخدام هذه الطريقة. سيتم إرجاع كائن بقيمة يسار ، وأعلى ، وعرض ، وارتفاع باستخدام هذه الطريقة. هذا هو المربع المحيط لعنصر ansvg. بعد تحميل الصورة ، يمكننا رسم اللوحة القماشية. في هذه الحالة ، سنستخدم DataURL لتحويل اللوحة القماشية. يجب علينا تمرير سلسلة base64 من عنوان URL للبيانات إلى عنوان URL الخاص بالبيانات لعرض الصورتين.

بالإضافة إلى ذلك ، يمكن تحديد جودة الصورة باستخدام صور jpeg و webp. لإنشاء ملف مضغوط ، يمكننا استخدام مكتبة JSZip. إذا لاحظت أي أخطاء ، يرجى إعلامي.

كيفية استخدام Svg مع قماش

يعد Canvas سطح رسم قويًا يسمح لك بإنشاء رسومات وصور لمواقع الويب. يمكن دمج Canvas وتنسيق الصور المتجه الشهير SVG لإنشاء صور مذهلة. تتمثل الخطوة الأولى في استخدام عنصر HTML لعنصر "كائن غريب" لرسم SVG على اللوحة. يجب عليك بعد ذلك رسم صورة SVG في اللوحة القماشية. علاوة على ذلك ، هناك عنصر مستطيل يمكن استخدامه لرسم خطوط ودوائر ومستطيل وكائنات مسار ، بالإضافة إلى عنصر كائن خارجي>. في العنصر> الكائن الأجنبي ، يوجد عنصر صورة يمكن استخدامه لرسم الصور. يمكن أيضًا استخدام عنصر الإحداثيات للإشارة إلى إحداثيات مركز الصورة. يحتوي عنصر الكائن الغريب ، بالإضافة إلى عنصر الكائن الغريب ، على عنصر نوع يمكن استخدامه لتحديد نوع الصورة. بالإضافة إلى الكائن الأجنبي> العنصر ، هناك عنصران: العرض وعنصر الارتفاع ، والذي يمكن استخدامه لتحديد ارتفاع الصورة وعرضها. عناصر الكائن مثل هذه مطلوبة أيضًا لرسم الصورة على سطح الرسم. تحدد معلمة النوع عنصر كائن غريب باستخدام طريقة toDataURL> التي تُرجع عنوان URL للبيانات يحتوي على تمثيل للصورة بالتنسيق المحدد. يمكنك تحديد تنسيق الملف وجودة الصورة المطلوبة. سيتم تصدير البيانات كصورة أو PNG إذا لم يتم تحديد تنسيق ملف معين أو إذا لم يتم توفير دعم. يجعل الكائن الأجنبي الخاص بهذا العنصر وطريقة toDataURL من السهل إنشاء عناوين URL للبيانات التي تحتوي على الصور التي أنشأتها.