كيفية تطبيق الشفافية على SVGs

نادرًا ما يتم تسليم رسومات SVG من Adobe Illustrator CC إلى المصممين الرقميين ذوي الخلفيات. عادةً ما تطفو الرسومات فوق أي خلفية موجودة في موقع الويب أو التطبيق أو الرسوم المتحركة أو السياق التفاعلي.

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

شكل SVG شبه معتم أعلى خلفية ملونة.

كيفية إخراج صور SVG بخلفيات شفافة

اعتاد المصممون على التفكير في الخلفيات التي إما أن تكون شفافة أو تظل مرئية. نفكر في التخلص من الخلفية. تعمل صور PNG وصور GIF على هذا النحو - إما أن تنشئ بخلفية أو تختار خلفية شفافة في برنامج مثل Illustrator أو Photoshop لإخراج تلك الخلفية.

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

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

قد يكون لهذا الرسم خلفية بيضاء أو قد لا يكون له خلفية.

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

يكشف عرض شبكة الشفافية عن مستطيل أبيض خلف الرسم.

اسمحوا لي أن أؤكد وأسلط الضوء على هذا من زاوية أخرى. عندما أذهب لتصدير هذه الصورة كملف SVG ، لا يحتوي مربع الحوار Export for Screens ، المعروض ، على خيار لتحديد لون الشفافية.

لا يمكنك اختيار لون شفاف في SVG لأنه لا يوجد لون للخلفية.

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

الحل الأفضل هو تحديد "شبكة" شفافية بلون واحد يتوافق مع البيئة التي سيتم وضع الرسم فيها. لماذا أضع الشبكة في علامات الاقتباس؟ لأن هذه التقنية تغش: باستخدامها ، يمكنك تحديد كل من ألوان الشبكة بنفس اللون ، مما يؤدي إلى محاكاة صفحة الويب أو لون خلفية التطبيق بشكل فعال.

لاستخدام هذه التقنية لإنشاء خلفية مخصصة أثناء قيامك بتطوير عمل SVG الفني ، اتبع الخطوات التالية:

اختر ملف ← إعداد المستند.

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

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

تحديد معاينة لون الخلفية بشبكة الشفافية.

حدد الثانية من لوحين لون الشبكة ، وقم بتعيين نفس اللون لها.
تذكر أنه يمكنك استخدام قطارة منتقي الألوان لالتقاط هذا اللون.

انقر فوق "موافق" في مربع الحوار "إعداد المستند".

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

في هذا الشكل ، قمت بتحديد لوح الرسم بالرسم ، وأنا أقوم بمعاينة المشروع مقابل لون الخلفية المحاكى.

معاينة لون الخلفية الناتج باستخدام شبكة شفافية مخصصة.

قم بتطبيق تأثيرات الشفافية على SVG

عند تطبيق الشفافية (مثل عتامة 50 بالمائة) أو تأثيرات الشفافية مثل احتراق اللون أو التعتيم أو الضرب على رسومات SVG ، فإن تلك التأثيرات تحافظ على قابلية توسيع SVG.

يعرض هذا الشكل نفس الرسم - ثلاثة مستطيلات برتقالية شبه شفافة - تم تصديرها كملف PNG (أعلى) و SVG. يمكنك أن ترى كيف تتدهور جودة ملف PNG عندما أقوم بتكبيره في المتصفح. ما لا يمكنك رؤيته هو أن ملف PNG يكاد يكون ضعف حجم ملف SVG.

مقارنة إخراج PNG (أعلى) مع SVG عند تطبيق الشفافية

فيما يلي ملخص لمزايا استخدام SVG لتأثيرات الشفافية:

• حجم الملف أصغر نوعيا.
• يمكن لمطور الويب أو التطبيق تعديل أو تحرير قيم الشفافية وتعيين التفاعل.
• لن تتدهور الصورة والشفافية بغض النظر عن مقدار تكبير الملف.

بالمناسبة ، إذا كنت مهتمًا بالشكل الذي يبدو عليه رمز SVG الذي تم إنشاؤه لهذه المجموعة من المستطيلات ، ومدى سهولة تعامل مطور الويب أو التطبيق معها ، فإليك رمز أول مربعات SVG الثلاثة ، مع تطبيق عتامة بنسبة 60 بالمائة:

<= "" code = "">