أيقونات SVG: كيفية تعيين سمة ViewBox

من أجل جعل svg يتصرف مثل رمز ، من الضروري تعيين سمة viewBox للرمز على "0 0 24 24" ثم تضمين قواعد CSS التالية: .icon {width: 24px؛ الارتفاع: 24 بكسل ؛ ملء: CurrentColor ؛ } مع هاتين الخطوتين في مكانهما الصحيح ، سيتغير حجم رمز svg الآن بشكل صحيح مع حجم العنصر المحتوي ويحافظ على لونه بناءً على نظام الألوان الحالي.

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

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

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

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

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

يمكنك حفظ صورة في ملف a.svg باستخدام العلامة * svg> .svg> في HTML. يتم تحقيق ذلك عن طريق نسخ رمز صورة SVG وإدخالها في النص الأساسي> عنصر من مستند HTML الخاص بك. إذا سارت الأمور بسلاسة ، يجب أن يبدو موقع الويب الخاص بك تمامًا مثل الموقع الموضح أدناه.

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

كيف يمكنني الوصول إلى رمز Svg الخاص بي؟

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

كانت الرسومات المتجهة القابلة للتطوير (SVG) موجودة منذ عام 1999 ، لكنها بدأت في الظهور مرة أخرى. يعد تحديد الصور المزخرفة وأيها إعلاميًا أمرًا ضروريًا. عندما يتم اعتبار الصورة مزخرفة ، يجب استخدام سمة نص بديل فارغ أو فارغ. يجب أن يحتوي البديل الجيد على كلمات ذات معنى ووصفية ، وأن يكون طولها 250 حرفًا أو أقل ، وأن يكون فريدًا. يعد استخدام علامة <img> والإشارة إليها كملف طريقة جيدة لاستخدام صورة أساسية أو غير معقدة أو مزخرفة. إذا كنت تريد استخدام SVGs أكثر تعقيدًا أو أساسية ، فيجب استخدام ترميز HTML بدلاً من HTML. نتيجة لذلك ، لديك المزيد من الخيارات للتحكم في أنماط الصور والرسوم المتحركة باستخدام JavaScript و CSS.

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

صور Svg: للزينة أم للوصول؟

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

هل يجب علي استخدام Svg أو Icon؟

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

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

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

يؤدي استخدام SVG كصورة خلفية أو كارتباط إلى صفحة إلى تقييد أي ميزات إضافية يمكن أن تكون متاحة لكود SVG . الطريقة الوحيدة هي ألا تستسلم أبدًا ؛ هناك طريقة أخرى أيضًا. عند نسخ ولصق صورة مضمنة ، يمكن تحويلها إلى ملف an.svga. نظرًا لقدراتها الكاملة على الاستجابة ، أصبحت sva أكثر شيوعًا كبديل لـ HTML. يمكنك إنشاؤها يدويًا أو باستخدام أدوات مثل مطوري iconizr PHP أو grunticon لمستخدمي تطبيق Grunt. باستخدام CSS: ، يمكنك تغيير نوع الهدف من SVG معين في Sprite. تكون جميع صور SVGs مرئية بغض النظر عن الدقة.

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

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

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

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

أيقونات Svg

أيقونات SVG هي أيقونات يتم حفظها بتنسيق ملف SVG . يستخدم تنسيق الملف هذا للرسومات المتجهة ثنائية الأبعاد. يمكن إنشاء رموز SVG في برنامج تحرير متجه مثل Adobe Illustrator.

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

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

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

ما هو رمز Svg؟

ما هي أيقونة SVG؟ يشير المصطلح "SVG" (تنسيق متجه قابل للتحجيم) إلى تنسيق ملف لرسومات متجهة تسمح بالتحجيم. يتم وصف الرسومات المتجهة في الترميز المستند إلى XML. هذا يعني أن صور SVG يمكن أن تكون مبنية على CSS ، وجافا سكريبت ، وحتى قائمة على DOM ، اعتمادًا على السياق.

زر مع رمز Svg والنص

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

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

الاستخدامات العديدة لأيقونات Svg

تُستخدم الصور القائمة على تقنية المتجهات بشكل شائع في تطبيقات وخدمات الويب ، ويمكن تعديلها بسهولة لتلائم التطبيقات والخدمات المختلفة.

Svg كتفاعل زر

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

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

أيقونات Svg رسومات موجهة قابلة للتحجيم

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

كما هو الحال مع XHTML ، والذي يمكن استخدامه لإنشاء رسومات متجهة ، يمكن استخدام SVG لإنشاء رسومات متجهة. تعد مستندات SVG البسيطة في الأساس مجرد مجموعة من الأشكال مع العنصر الأساسي هو العنصر الجذر. تستخدم العديد من تطبيقات الرسم ، مثل Inkscape ، تنسيق الملف الأصلي لبرنامج Adobe Illustrator. وهي متوفرة في كل من الإصدارات الحديثة والقديمة من Firefox. قبل البدء ، من المستحسن أن يكون لديك فهم أساسي لـ XML أو لغة ترميزية أخرى مثل HTML. قبل أن تبدأ ، يرجى قراءة بعض الإرشادات الخاصة بـ XML. تم إطلاق الإصدار القادم من SVG ، الإصدار الكامل الجديد ، في وقت سابق من هذا العام ولكن تم سحبه للإصدار القادم 2.0.

الفرق بين الصور النقطية والمتجهة

الصور النقطية ، مثل JPEGs و PNG و GIF ، ليست صورًا متجهة ، ولكنها ملفات متجهة. نتيجة لذلك ، يتم عرض SVGs دائمًا بدقة 100٪ ، بينما لن يتم عرض ملفات JPEG و PNG و GIF. علاوة على ذلك ، إنه تنسيق XML مشابه لـ XHTML ، والذي يمكن استخدامه لإنشاء رسومات متجهة مثل تلك الموضحة أدناه. نتيجة لذلك ، يمكن استخدامه لإنشاء صور بعدة طرق ، بما في ذلك عن طريق تحديد جميع الخطوط والأشكال المطلوبة ، أو تعديل الصور النقطية الموجودة ، أو دمجها.
يمكن الحصول على نفس الفوائد باستخدام SVG ، لكنها تستخدم الأشكال والأرقام والإحداثيات بدلاً من وحدات البكسل. نتيجة لذلك ، بغض النظر عن حجم الشاشة ، ستتلقى دائمًا صورة عالية الجودة بغض النظر عن القياس أو التوسيع. نظرًا لأنه يمكن استخدام SVG على أي جهاز ، بغض النظر عن الدقة ، يمكن استخدامه أيضًا مع وضع الجودة في الاعتبار.