مطورو الويب: احصل على ما يصل إلى السرعة مع SVG

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

نظرًا لأن SVGs مستقلة عن الدقة ، يمكننا استخدامها بحجم صغير أو كبير كما نريد. لا تفقد SVG ، على عكس JPG أو PNG ، الجودة نتيجة لحجم أو دقة الشاشة أو الدقة المستخدمة. معظم ملفات SVG ، ما لم تكن على شاشة كبيرة ، لها حجم ملف صغير جدًا مقارنة بملفات PNG أو JPEG. بدلاً من ملفات JPEG أو PNG ، ستحتاج إلى استخدام SVGs لإنشاء موقع الويب الخاص بك بالعديد من الرسومات والصور. يمكنك تغيير خصائصها في نفس الوقت الذي تقوم فيه بالبرمجة باستخدام مصدر ملف واحد لتغيير خصائصها. سيؤدي استخدام SVGs على موقع الويب الخاص بك إلى زيادة السرعة بلا شك ، وسيكون لك بلا شك تأثير كبير على جمهورك المستهدف.

لا يوجد حد لحجم الصور التي تم إنشاؤها باستخدام SVG لأنها سهلة الاستخدام ويمكن تغيير حجمها إلى أي حجم. يستخدم العديد من الأشخاص تنسيقات الملفات بناءً على قيود حجم الملف ، مثل إضافة الصور إلى موقع الويب الخاص بك بحيث يتم تحميله بأسرع ما يمكن لتحسين مُحسّنات محرّكات البحث.

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

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

هل Svg مهم في تطوير الويب؟

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

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

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

هل يجب أن أتعلم Canvas أو Svg؟

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

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

الفرق بين Svg والقماش

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

متى يجب استخدام Svg

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

PNG و JPG نوعان مختلفان من تنسيقات الصور ، لكن Adobe Illustrator يدعم أيضًا تنسيق Scalable Vector Graphics (SVG). نتيجة لذلك ، هناك مجموعة من دعم المستعرض المحدد لـ Internet Explorer 8 والإصدارات الأقدم و Android 2.3 والإصدارات الأقدم التي يمكن تمكينها من خلال هذه الطريقة. يمكن استخدام الصورة كصورة خلفية بنفس الطريقة التي يمكن استخدامها بها كصورة img. عندما لا تدعم عناصر HTML no-svg ، يضيف modernizr اسم فئة. يتيح لك CSS ، مثل أي عنصر HTML آخر ، التحكم في العناصر التي يتكون منها تصميمك. علاوة على ذلك ، لديك خيار منحهم أسماء فئات وإعلامهم بالخصائص التي تعمل جنبًا إلى جنب مع الفصل. من أجل استخدام ورقة أنماط خارجية ، يجب تضمين عنصر> نمط> داخل ملف SVG نفسه.

عندما تستخدم ذلك في HTML الخاص بك ، فلن تحاول الصفحة حتى العرض. نظرًا لوجود البيانات ، قد لا يوفر عنوان URL للبيانات حجم الملف الفعلي ، ولكنه قد يكون أكثر كفاءة. موقع mobefish.com هو أداة تحويل من أجل base64ing لهم. من المرجح أن يكون Base64 خيارًا أفضل من استخدام Base64. في معظم الأحيان ، يتم استخدام التنسيق الأصلي. على الرغم من سرعة gzip الأكبر ، فإن ملف SVG أكثر تكرارا من ملفات base64. تولى grunticon المجلد. يشار إليه عادةً باسم ملف صورة أو ملف PNG (لأنك ترسم الرمز في تطبيق مثل Adobe Illustrator وترسله إلى CSS). تتوفر عناوين url للبيانات ، وبيانات uls ، وصور png العادية في ثلاثة تنسيقات مختلفة.

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

مزايا استخدام صور Svg

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

Svg مقابل Img

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

في CodePen ، يؤثر ما تكتبه في محرر HTML على علامات نص HTML5 التي تضعها هناك. نرحب بك لإضافة فئات إلى هذا الموقع يمكن أن يكون لها تأثير كبير على المستند بأكمله. يتم تطبيق CSS على Pen الخاص بك بواسطة أي متصفح يدعم CSS. يمكنك استخدام القلم لتطبيق نص من أي مكان على الويب. يمكنك إضافة عنوان URL إلى Pen هنا ، وسنضعه بالترتيب الذي يظهر به في JavaScript. إذا كان امتداد ملف البرنامج النصي الذي قمت بربطه يحتوي على معالج مسبق ، فسنحاول معالجته قبل التقديم.

إنه اختصار لرسومات متجهة قابلة للتحجيم. على عكس تنسيقات الملفات الأخرى مثل JPG و PNG و GIF ، فإنه يستخدم تنسيق رسوم متجه يمكن مقارنته من حيث قابلية التوسع. هناك العديد من المزايا لاستخدام ملفات SVG ، بما في ذلك سهولة تحسين محركات البحث وقابلية التوسع. هناك العديد من البدائل الأخرى لـ SVG ، مثل js و Raphael و Modernizr و Modernizr و Lodash. Js هي مكتبة JavaScript لجافا سكريبت تم إنشاؤها لتوفير نفس مستوى الأداة المساعدة مثل jQuery أو AngularJS. كان هدف رافائيل هو توفير نفس الأسلوب وخيارات التصميم مثل مكتبات CSS الشائعة الأخرى مثل Bootstrap و Foundation. تمكّن Modernizr ، وهو امتداد للمتصفح ، المستخدمين من اكتشاف إعدادات المتصفح وتخصيصها بنفس الطريقة التي تعمل بها الإضافات مثل AdBlock و Chrome Extension. ملفات SVG مدعومة أيضًا بواسطة Modernizr. Lodash هي أداة مساعدة JavaScript تقدم نفس المستوى من الأداء والراحة مثل مكتبات JavaScript الشائعة الأخرى مثل Node.js و Express.

لماذا يجب عليك استخدام Svg لرسومات الويب

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

أداء Svg

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

لماذا Svgs هي مستقبل ملفات الصور

في الواقع ، تكون سرعة SVG على PNG أكبر بكثير. يعتبر تحميل ملفات SVG أسهل بكثير لأنها أصغر بكثير.