صور SVG: كيفية إنشاء الصور وتعديلها

Scalable Vector Graphics (SVG) هو تنسيق صورة متجه مستند إلى XML للرسومات ثنائية الأبعاد مع دعم للتفاعلية والرسوم المتحركة. مواصفات SVG هي معيار مفتوح تم تطويره بواسطة World Wide Web Consortium (W3C) منذ 1999. يتم تعريف صور SVG وسلوكياتها في ملفات نصية XML. هذا يعني أنه يمكن البحث عنها وفهرستها وبرمجتها وضغطها. كملفات XML ، يمكن إنشاء صور SVG وتحريرها باستخدام أي محرر نصوص ، ولكن غالبًا ما يتم إنشاؤها باستخدام برامج الرسم.

يتم وصف الرسومات والتطبيقات ثنائية الأبعاد في XML باستخدام تنسيق ملف Scalable Vector Graphics (SVG). تُستخدم المسارات والأشكال في تنسيق الرسم الخطي والشعارات والرسوم البيانية والصور التي تصور مسارًا أو شكلًا. إنه مخلوق صغير نسبيًا بحجم صغير نسبيًا ، ومن السهل تغيير الحجم إلى الحجم المطلوب دون فقدان الوضوح (إلا إذا كان صغيرًا للغاية). باستخدام خصائص التصميم ، نحدد كيفية عرض عناصر الرسوم في محتوى SVG. يمكن عمل الأنماط باستخدام السمات أو خصائص CSS. تحظى برامج تحرير الرسومات مثل Illustrator و Sketch و Inkscape بشعبية كبيرة. نظرًا لوجود عدد قليل من مُحسِنات SVG ، فإنهم كثيرًا ما يكونون قادرين على تقليل حجم الملف وتسهيل العمل معهم.

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

يعد تضمين عناصر SVG مباشرة في صفحة HTML الخاصة بك خيارًا.

على الويب ، يمكن عرض ملفات SVG مباشرةً ، أو يمكن تضمينها في ملفات HTML باستخدام مجموعة متنوعة من الطرق: إذا كان HTML هو XHTML وتم تسليمه كنوع application / xhtml + xml ، فيمكن تضمين SVG مباشرةً في XML ملف. يمكن أيضًا تضمين HTML مباشرةً في SVG. من الممكن استخدام عنصر img.

كيف يمكنني استخدام Svg في Html؟

لاستخدام SVG في HTML ، يجب أن يكون لديك صورة SVG أولاً. هناك طريقتان للقيام بذلك: 1. استخدم محولًا عبر الإنترنت لتحويل صورتك إلى SVG. 2. استخدم محرر SVG لإنشاء صورة SVG الخاصة بك. بمجرد حصولك على صورة SVG الخاصة بك ، يمكنك بعد ذلك استخدامها في كود HTML الخاص بك. للقيام بذلك ، سوف تحتاج إلى استخدام العلامة. تُستخدم العلامة لتضمين صورة في مستند HTML. تُستخدم سمة src الخاصة بالعلامة لتحديد عنوان URL للصورة. يتم استخدام سمات العرض والارتفاع لتحديد عرض الصورة وارتفاعها. يوضح الكود التالي كيفية استخدام العلامة لتضمين صورة SVG في مستند HTML: يتم تصوير الصورة بعناصر مثل النظام الإحداثي وإطار العرض. تُستخدم بيانات المتجه لإنشاء تنسيق صورة يسمى Scalable Vector Graphics (SVG). نظرًا لطبيعة SVG ، ليس لديك نفس وحدات البكسل الفريدة مثل أنواع الصور الأخرى. يستخدم بيانات المتجه بدلاً من بيانات الصورة لإنشاء صور يمكن تحجيمها إلى أي دقة. يمكن استخدام عنصر HTML لعمل مستطيل. يتم إنشاء النجمة باستخدام علامة SVG "المضلعة". يمكن إنشاء شعار باستخدام تدرج خطي في sva. نظرًا لأن أحجام ملفات SVG أصغر ، سيتم تحميل الصور بشكل أسرع على موقع الويب الخاص بك إذا كنت تستخدمها. لا يوجد ارتباط بين الدقة والرسومات. نظرًا لأنها تستند إلى المستعرض ، فمن الممكن تشغيلها على مجموعة متنوعة من الأجهزة. JPEG و PNG من بين التنسيقات النقطية التي تعرضت للتلف نتيجة للضغط. عند استخدام SVG المضمن ، فإنه يلغي طلبات HTTP لتحميل ملف صورة. نتيجة لذلك ، سيكون موقعك أكثر استجابة للمستخدمين ، ويمكن استخدام تنسيقات رسومات المتجهات مثل SVG لإنشاء صفحات الويب. يمكن استخدام هذا البرنامج كبديل للصور للأزرار والرسومات الخاصة بالعناوين وحتى الصفحات بأكملها. يمكن لصفحات الويب استخدام SVG باعتباره URI مضمنًا مع البيانات ، ولكن فقط عندما يتم ترميزها ؛ عناوين URL للبيانات غير مطلوبة. إذا قمت بترميز SVG باستخدام encodeURIComponent () ، فسيعمل في كل مكان. إذا كنت تحاول استخدام SVG أو CSS كصورة خلفية ، فيجب ربط الملف بشكل صحيح ويبدو أن كل شيء يعمل بشكل صحيح ، لكن المستعرض لا يعرضه ، ربما لأن الخادم يقدمه بصيغة غير صحيحة المحتوى- عند استخدام SVG في صفحة ويب ، تأكد من تنسيق الملف بشكل صحيح وأن السمة xmlns مضبوطة بشكل صحيح ؛ خلاف ذلك ، ستعرض صفحة الويب الخاصة بك خطأ تنسيق ملف غير صالح. قد يكون السبب في ذلك هو أن المتصفح لا يدعم SVG ، مما يعني أن الملف مشفر بشكل صحيح وأن السمة xmlns مضبوطة ، لكن المتصفح لا يزال لا يعرضها. مجموعة متنوعة من التأثيرات ، لكن المرشحات المضمنة في SVG أكثر تنوعًا ، مما يسمح لك بإنشاء العديد من التأثيرات المعقدة مع تأثيرات واجهة مستخدم أكثر جاذبية. علاوة على ذلك ، يعد تأثير Gooey أحد أكثر تأثيرات مرشح SVG إثارة للإعجاب. ما هو استخدام Scalable Vector Graphics Svg In Html5؟ التطبيقات. يتم بعد ذلك تقديم ملفات XML باستخدام عارض SVG. المخططات المتجهة ، مثل المخططات الدائرية والرسوم البيانية ثنائية الأبعاد في نظام إحداثيات X و Y ، تُرسم عادةً على SVG ، وتعتبر الصور المتجهية أكثر أنواع الصور شيوعًا. الصورة النقطية لها دقة محددة وتتكون من وحدات البكسل. عندما يتم تكبير الملف ، قد يبدو منقسمًا أو محببًا ، مما يؤدي إلى فقدان الجودة. يمكنك تغيير حجم الصورة لأعلى أو لأسفل في الوقت الفعلي دون فقدان الجودة باستخدام SVG. عند استخدام ملفات SVG ، من الممكن أن يتم تحسين الملفات الأصغر حجمًا مما لو كانت أنواع ملفات أخرى. إنها مفيدة بشكل خاص عند التعامل مع الشاشات عالية الدقة. إذا كنت تستخدم SVGs مضمنة ، فسيؤدي موقع الويب الخاص بك بشكل أفضل. يتيح لك CSS التحكم في خصائص ألوان التعبئة ، وألوان الحد ، والحجم. وتتمثل إحدى مزايا SVG في أنه يعتمد على XML ، مما يعني أنه يمكن الوصول إلى أي عنصر داخل DOM. لإرفاق معالجات أحداث JavaScript ، يجب تضمينها مع العنصر. يشار إلى كل شكل مرسوم على أنه متجه في SVG. إذا تم تغيير سمات كائن SVG ، فسيعرض المتصفح تلقائيًا الشكل بدلاً من السمة المحددة مسبقًا. يمكنك الحفاظ على الرسم التخطيطي متسقًا عبر مستعرضات متعددة باستخدام هذه الميزة. هذا يرجع إلى حقيقة أنه قابل للتطوير. نظرًا لأنه تم تخزينه في المستعرض ، يمكن عرض الرسم التخطيطي بسرعة أكبر إذا كان بتنسيق المستعرض. عند استخدام SVG ، يجب الانتباه إلى بعض الأشياء. للبدء ، يجب أن يكون لديك أحدث إصدار من عارض SVG مثبتًا على جهاز الكمبيوتر الخاص بك. القاعدة الثانية هي استخدام السمات الصحيحة عند إنشاء كائناتك. يمكن استخدام سمات التعبئة والحد ، على سبيل المثال ، لرسم ولون الخطوط والأشكال ، على التوالي. من ناحية أخرى ، يكون الرسم البياني المتجه فعالًا بشكل خاص في استخدام SVG. من المهم تذكر الأشياء الأربعة الأكثر أهمية عند إنشاء رسم تخطيطي في SVG.