دليل عملي لـ SVG وأدوات التصميم

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

في هذه المقالة ، سألقي الضوء على ثلاثة من أكثر أدوات التصميم شيوعًا: Adobe Illustrator و Sketch و Figma. هناك أيضًا أدوات أخرى متوفرة تدعم SVG والتي قد يكون لها وظائف أخرى وتقوم بتنفيذ حلول أخرى.

ملاحظة : ما لم يذكر خلاف ذلك ، فإن محتوى هذه المقالة يشير إلى SVG 1.1 الإصدار الثاني. بعض النقاط التي تمت مناقشتها أدناه لن تنطبق على SVG 2 ، ومع ذلك ، لم تصل بعد إلى حالة التوصية ، تاركة SVG 1.1 كأحدث المواصفات.

لماذا تهتم بأدوات التصميم؟

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

يعد العمل باستخدام الأشكال والرسومات المعقدة بتنسيق مستند إلى النص ممكنًا تمامًا ، ولكنه عادة ما يكون صعبًا ومملًا للغاية. لذلك ، من الشائع استخدام تطبيقات مثل Adobe Illustrator أو Sketch أو Figma لتصميم الرسومات بشكل مرئي ، ثم تصديرها إلى تنسيق SVG.

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

الأشكال الأساسية

يتم إنشاء العديد من الرسومات المتجهة من عدد قليل من الأشكال الأساسية - مجمعة ومُحوّلة ومدمجة مع بعضها البعض. يمثل الجدول أدناه أدوات الشكل المتوفرة في Illustrator و Sketch و Figma وعناصر SVG التي يتم تصديرها بها.

القطع الناقص والدوائر

أحد الأشكال الأساسية في كل أداة تصميم هو القطع الناقص. في SVG ، سنجد عنصر <ellipse /> مطابق ، محددًا بإحداثيات مركز القطع الناقص ( cx و cy ) ونصف قطر ( rx و ry ).

هذا ما يبدو عليه شكل القطع الناقص في SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

النوع الخاص جدًا من القطع الناقص هو الدائرة. الدائرة عبارة عن قطع ناقص حيث أن نصف قطر rx و ry متساويان. يحتوي SVG على عنصر <circle /> خاص به يأخذ سمة واحدة أقل نظرًا لوجود نصف قطر واحد فقط يجب أخذه في الاعتبار:

 <circle cx="400" cy="300" r="250"/>

في حالة الأشكال البيضاوية والدوائر ، تعمل جميع أدوات التصميم بنفس الطريقة: أداة Ellipse Tool في Illustrator ، أداة Oval في أداة Sketch and Ellipse في Figma ستنشئ عنصرًا <ellipse /> ما لم تكن نصف القطر متساوية: في مثل هذه الحالات سننتهي مع عنصر <circle /> .

المستطيلات والمستطيلات مدورة

شكل أساسي آخر مشترك لجميع أدوات التصميم هو المستطيل. في حالة جميع أدوات التصميم ، يؤدي استخدام أداة المستطيل إلى إنشاء عنصر <rect /> في SVG. يتم تعريف <rect /> أساسي من خلال 4 سمات: إحداثيات x و y ، إلى جانب عرضه وارتفاعه:

 <rect x="150" y="100" width="500" height="400"/>

لاحظ أنه بينما يتم تحديد موضع <ellipse /> و <circle /> من خلال المراكز الهندسية الخاصة بهم ، فإن موضع <rect /> يتم تحديده بواسطة إحداثيات الزاوية اليسرى العلوية.

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

بالإضافة إلى ذلك ، في Sketch و Illustrator ، هناك أدوات مخصصة لإنشاء مستطيلات مستديرة ( أداة Rounded Rectangle Tool في Illustrator وأداة Rounded في Sketch). ومع ذلك ، لا يوجد فرق بين مستطيل عادي به نصف قطر مطبق ومستطيل مستدير الزوايا مرسوم بأداة Rounded Rectangle tool.

لذلك ، بغض النظر عن كيفية إنشائه ، سيتم تصدير مستطيل مستدير الزوايا باستخدام الصيغة التالية:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

في هذه الحالة ، rx هي سمة مسؤولة عن نصف قطر الزوايا الدائرية:

مستطيلات مدورة بزوايا بيضاوية الشكل

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

وفي الوقت نفسه ، يمكن تعريف نصف قطر حدود SVG بخاصيتين: rx (كما في المثال أعلاه) و ry . إنها تسمح لنا بإنشاء مستطيلات بزوايا بيضاوية. يمكنك التفكير في الزوايا الدائرية مثل الأشكال البيضاوية المستخدمة كأقنعة بدلاً من الدوائر:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

لذلك ، في هذه الحالة ، يوفر لك SVG إمكانيات أكثر من أدوات التصميم.

ملاحظة : على الرغم من أنها ليست مرتبطة تمامًا بموضوع هذه المقالة ، إلا أنه من الجدير بالذكر أن الاختلاف الموضح أعلاه ينطبق على كل من SVG و HTML / CSS. يسمح أيضًا border-radius خاصية CSS المستخدم لتصميم العقد مثل divs و spans بإنشاء زوايا بيضاوية الشكل. يمكنك رؤية مثال أدناه.

 border-radius: 10px 5% / 20px 25em 30px 35em;

القيم قبل الشرطة المائلة ( / ) هي نصف قطر أفقي (مكافئ لـ rx ) والقيم بعد الشرطة المائلة هي قيم عمودية (مكافئة لـ ry ).

مستطيلات مستديرة ذات أنصاف أقطار متعددة

في أدوات التصميم ، كما هو الحال في CSS ، يمكن التحكم في كل زاوية من زوايا المستطيل بشكل منفصل. بمعنى آخر ، يمكن أن يكون لكل زاوية نصف قطرها الخاص (أو لا يوجد نصف قطر كليًا). هذه العملية غير ممكنة على عنصر <rect /> في SVG. يحتوي كل عنصر <rect /> على سمة rx واحدة ry واحدة فقط. إذا قمت بإنشاء مستطيل به عدة أنصاف أقطار مطبقة على أركانه ، فستقوم أداة التصميم بإنشاء عنصر <path /> بدلاً من عنصر <rect /> . سنتحدث أكثر عن عنصر <path /> في القسم التالي.

زوايا ناعمة

إحدى الميزات المثيرة للاهتمام التي قدمتها Sketch و Figma منذ وقت ليس ببعيد هي الزوايا الناعمة. باختصار ، تستخدم الزوايا الملساء نصف قطر حد غير منتظم لتحقيق نتيجة تبدو أكثر طبيعية وسلسة. التطبيق الأكثر شيوعًا للزوايا المتجانسة هو أيقونات التطبيقات والعناصر المستديرة الأخرى على iOS. استخدمت Apple الزوايا الدائرية "العادية" على نظامها الأساسي للجوّال حتى iOS6 ثم تحولت إلى ما نسميه اليوم الزوايا "السلسة" كجزء من إعادة التصميم الكبيرة التي تم تقديمها في عام 2013 (iOS7).

في Sketch ، يمكنك تحقيق تأثير الزوايا المتجانسة عن طريق التبديل بين Round Corners و Smooth Corners في Inspector . تمنحك Figma مزيدًا من التحكم في زواياك حيث يمكنك التلاعب بمستوى النعومة في قائمة Corner Smoothing .

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

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

خطوط

النوع الأساسي التالي من العنصر هو الخط. في هذه الحالة ، نشير إلى الخط باعتباره خطًا مستقيمًا واحدًا ينتقل من النقطة A إلى النقطة B. يقدم كل من Illustrator و Sketch و Figma أدوات الخط الخاصة بهم المخصصة لرسم الخطوط. في SVG ، لدينا عنصر <line /> . أربعة من سماته مطلوبة: إحداثيات نقطة البداية وإحداثيات نقطة النهاية:

 <line x1="100" y1="100" x2="200" y2="200"/>

عندما يتعلق الأمر بالتصدير ، سيقوم Illustrator و Figma بتصدير الخطوط كعناصر <line /> حيثما أمكن ، بينما يحسب Sketch دائمًا الخطوط إلى عناصر <path /> .

خطوط متعددة

الآن دعونا نلقي نظرة على الخطوط المتعددة. Polyline عبارة عن سلسلة متصلة من الخطوط المستقيمة. لا تحتوي Polylines على أدوات مخصصة في أدوات التصميم. يمكن رسمها باستخدام أداة Pen (في Illustrator و Figma) أو باستخدام أداة Vector (في Sketch).

في SVG ، يتم تعريف الخطوط المتعددة الخطوط بعنصر <polyline /> . يتم رسم <polyline /> باستخدام سمة points وهي قائمة إحداثيات تحدد جميع النقاط التي تنشئ خطًا متعدد الخطوط. دعنا نلقي نظرة على مثال على شكل متعدد الخطوط مكون من ثلاثة أجزاء وأربع نقاط:

 <polyline points="10,20 10,20 30,10 40,20" />

يقوم Illustrator و Sketch بترجمة الخطوط المتعددة إلى عناصر <polyline/> ، بينما تصدر Figma خطوط متعددة كـ <path /> s.

السهام

في جميع الأدوات الثلاثة ، يمكنك التحكم في نهايات الخطوط لتحويلها إلى أسهم وما إلى ذلك. وستقوم جميع الأدوات الثلاثة بتصدير خطوط مثل <path /> ق ، حتى إذا لم يتم تطبيق الأحرف الاستهلالية ، فسيتم ترجمة نفس الأشكال إلى <line /> s أو <polyline /> s. هل ذلك بسبب أن SVG لا يدعم الأسهم؟ ليس تماما.

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

<marker> هو عنصر SVG منفصل يمكن تعريفه ضمن <defs> الخاص بـ SVG ثم استخدامه في عناصر <line> و <polyline> و <path> مع سمات العلامة: marker و marker-start و marker-mid و marker-end . إذا كنت ترغب في معرفة المزيد حول هذه السمات ، فإنني أوصيك بمراجعة وثائق W3C الرسمية.

المضلعات والنجوم

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

بعض المضلعات عبارة عن مضلعات منتظمة. ما يميز المضلعات العادية هو أن جميع جوانبها وزواياها متساوية. لرسم مضلعات منتظمة ، مثل مسدس أو خماسي ، يمكنك استخدام أداة Polygon ، كما هو الحال في Illustrator و Sketch و Figma. ستنشئ أدوات المضلع في Illustrator و Sketch عناصر <polygon /> في SVG. في Figma ، من ناحية أخرى ، تؤدي جميع الأشكال المصنوعة باستخدام أداة Polygon إلى عناصر <path /> .

تحتوي أدوات التصميم الثلاثة أيضًا على أدوات Star مخصصة لرسم النجوم. ومع ذلك ، عندما يتعلق الأمر بالتصدير ، فإن الأشكال التي تم إنشاؤها باستخدام أدوات Star تتصرف تمامًا مثل تلك التي تم إنشاؤها باستخدام أدوات Polygon . في SVG ، النجوم هي مجرد مضلعات ، ولا يوجد عنصر ~~<star />~~ .

من المهم أن تتذكر أن أدوات Star و Polygon تُستخدم لإنشاء نجوم ومضلعات منتظمة ، بينما يمكن استخدام عنصر <polygon /> في SVG لأي مضلع ، عادي أو غير منتظم.

كل الطرق تؤدي إلى <path />

كما تعلمنا بالفعل ، في SVG ، هناك ثلاثة أشكال أساسية مخصصة لرسم أشكال مصنوعة من خطوط مستقيمة: <line /> و <polyline /> و <polygon /> . لكن ماذا لو أردنا أن تكون خطوطنا منحنية؟ حان الوقت لنتحدث عن عنصر <path /> .

العنصر <path />

يعد <path /> عنصر SVG الأكثر تنوعًا. يمكن استخدامه لرسم أي خط وشكل محتملين ، بما في ذلك ، على سبيل المثال لا الحصر ، جميع الأشكال الأساسية المذكورة أعلاه. في الواقع ، يمكن وصف كل شكل أساسي ( <circle/> ، <ellipse /> ، <مستقيم / <rect /> ، <line /> ، <polyline /> ، <polygon /> ) على أنه عنصر <path /> . علاوة على ذلك ، هناك العديد من الأشكال التي يمكن إنشاؤها باستخدام <path /> ولكن لا يمكن إنشاؤها باستخدام أي عنصر SVG آخر. لمعرفة المزيد حول <path /> وصياغته ، أوصيك بالاطلاع على هذه المقالة الممتازة التي كتبها كريس كويير.

الآن ، كيف ننشئ عناصر <path /> في أدوات التصميم؟ بادئ ذي بدء ، كما تعلمنا أعلاه ، تحسب بعض الطبقات التي تم إنشاؤها باستخدام أدوات الشكل لعناصر <path /> على الرغم من أنها يمكن أن تكون من الناحية النظرية عناصر أخرى (على سبيل المثال ، تصدر Figma جميع المضلعات على أنها <path /> s على الرغم من أنها قد تكون كذلك يتم تعريفه على أنه <polygon /> s. بعد ذلك ، يجب تصدير كل شكل غير منتظم نرسمه باستخدام أداة Pen أو أداة Vector كـ <path /> حيث لا يوجد عنصر SVG آخر يمكنه تحديدها. أخيرًا ، في Sketch و Figma ، يمكننا تحويل أي شكل أساسي إلى طبقة تحسب إلى <path /> . في Sketch ، يمكننا تحقيق ذلك عن طريق اختيار Layer> Combine> Flatten ، بينما في Figma يمكننا العثور على هذه الوظيفة ضمن Object> Flatten Selection ( ⌘ + E في نظام macOS و Ctrl + E على نظام التشغيل Windows).

العمليات المنطقية

العمليات المنطقية هي وظائف يتم إجراؤها على الأشكال لدمجها بعدة طرق مختلفة. في Illustrator و Sketch و Figma ، هناك 4 عمليات منطقية قياسية:

• الاتحاد (اتحدوا)
  مجموع الأشكال
• طرح (بدون مقدمة)
  الشكل السفلي مطروح من المنطقة المشتركة بين الأشكال
• تتقاطع
  المنطقة المشتركة بين الأشكال
• الفرق (استبعاد)
  مجموع الأشكال مطروحًا من المساحة المشتركة بين الأشكال.

في Illustrator ، تولد كل هذه الوظائف شكلًا واحدًا (مخطط تفصيلي). إنه إجراء لا يمكن التراجع عنه - بخلاف استخدام التراجع ( ⌘ + Z على macOS ، Ctrl + Z في Windows). في Sketch and Figma ، من ناحية أخرى ، تنشئ العمليات المنطقية مجموعات طبقات يمكن فك تجميعها لاحقًا دون حدوث أي ضرر للأشكال الداخلية. ومع ذلك ، يمكنك دمج هذه المجموعات في شكل واحد لتحقيق نتيجة مماثلة كما في Illustrator باستخدام وظائف Flatten المذكورة في الفقرة السابقة.

السؤال هو ، هل يدعم SVG العمليات المنطقية؟ لا ، لا. لقد تم دمجهم فقط. لذلك ، سيتم تصدير كل شكل مدمج تقوم بإنشائه باستخدام عمليات منطقية في Figma أو Sketch كعنصر <path /> مفرد.

إنها تبدو متشابهة ، فلماذا هي مهمة؟

من حيث كيفية تعريف الأشكال المختلفة في SVG ، فإن تركيبها متعدد الاستخدامات للغاية. لنفكر في المستطيل الأساسي:

يمكن تعريف مثل هذا الشكل في SVG بعدة طرق مختلفة. يمكن أن يكون عنصر <rect /> ، عنصر <polygon /> . بالتأكيد يمكن أن يكون عنصر <path /> (حيث يمكن أن يكون كل شيء عنصر <path /> ). يمكن أن يكون أيضًا عنصر <line /> (أو عنصر <polyline /> ) إذا قررنا إنشاؤه باستخدام الحدود بدلاً من التعبئة.

يعرض كل عنصر من هذه العناصر مستطيلًا يبدو متماثلًا تمامًا:

ولكن ، إذا كانت النتيجة النهائية (الرسم الذي يقدمه وكيل المستخدم في المتصفح) تبدو متشابهة ، فهل يهم حقًا النهج الذي نختاره؟ حسنًا ، إنها كذلك. كقاعدة عامة ، أوصي دائمًا باستخدام الأشكال الأساسية حيثما أمكن ذلك.

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

1. الدلالات / المقروئية
   تمنحك أدوات الضغط ، مثل SVGO ، خيارًا لحساب كل الأشكال الأساسية لعناصر المسار. يمكن أن يوفر لك بضع أجزاء ولكنه سيقلل بالتأكيد من قابلية قراءة الكود الخاص بك. بناء الجملة <path /> غير بديهي للغاية ، لذلك إذا كان SVG على وشك التعديل في محرر كود بدلاً من أداة تصميم ، فسيكون من الأسهل فهمه إذا احتفظت بالأشكال الأساسية كأشكال أساسية.
2. حجم الملف
   قد يساعدك ضغط الأشكال على المسارات في تصغير الملفات ولكن هذا ليس هو الحال دائمًا! على سبيل المثال ، يأخذ مستطيل مستدير الزوايا مساحة أكبر بكثير باعتباره <path /> من <rect /> .
3. الرسوم المتحركة
   هل سبق لك أن حاولت تحريك SVG؟ إنه ممتع للغاية - طالما أنك تعمل باستخدام SVG النظيف والدلالي. باستخدام الأشكال الأساسية ، يمكنك بسهولة معالجة مثل هذه المعلمات مثل نصف القطر أو العرض أو الارتفاع أو موضع النقطة. إذا قمت بدمج الأشكال الخاصة بك في مسارات ، فسيكون تحقيق معظم هذه العمليات أصعب بكثير أو ببساطة مستحيل.
4. المتغيرات / الاستجابة
   تذكر أن SVG ليست صورة ثابتة مثل JPG. يمكنك تصميمه وتصميمه وجعله سريع الاستجابة وما إلى ذلك. كما هو الحال مع الرسوم المتحركة ، فإن الاحتفاظ بملفك منظمًا ودلاليًا جيدًا سيساعدك بالتأكيد في أي من هذه المهام.

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

الآن ، دعنا نلقي نظرة على السمات والميزات الأخرى مثل viewBox والمجموعات والتحويلات والتأثيرات المرئية.

width height viewBox

إذا كانت لديك بالفعل بعض الخبرة مع SVG ، فمن المحتمل أنك لاحظت أن علامة الفتح <svg> غالبًا ما تحتوي على السمات التالية: width height وصندوق viewBox . في أدوات التصميم ، لدينا أبعاد اللوحات الفنية (أو الإطارات في حالة Figma). إذن ما مدى ارتباط هذه القيم ببعضها البعض؟

لنبدأ بشرح سمات <svg> التي ذكرناها للتو. يمكنك التفكير في viewBox افتراضي في شكل نظام إحداثيات. يتم وضع مركز نظام الإحداثيات هذا في الزاوية اليسرى العلوية للمنطقة المحددة. يتم وضع جميع العناصر داخل <svg viewBox="…"> وفقًا لنظام الإحداثيات هذا ويتم قصها أيضًا - لن يتم عرض أي شيء يفيض في viewBox . يقبل viewBox 4 أرقام كقيمة له:

 <svg viewBox="0 0 12 8"> … </svg>

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

لا تحدد viewBox حجم SVG. إنه يحدد فقط إحداثيات المنطقة التي يتم رسم SVG فيها. لذلك ، عند استخدامه على الويب ، فإن <svg> مع viewBox المحدد سيأخذ دائمًا كل المساحة المتاحة ويحافظ على النسبة التي حددها viewBox - ما لم نمنع ذلك باستخدام CSS أو عيّننا سمات width و / أو height .

width height هما سمات <svg> التي تعين العرض والارتفاع الفعليين لعنصر SVG. على عكس viewBox ، يجب عليهم استخدام وحدات محددة مثل البكسل أو ems أو rems. هذا يعني أنه يمكننا أيضًا تحويل SVG معهم - إذا كانت النسبة بين width height مختلفة عن النسبة بين قيم viewBox ، فإن SVG سيحرف الرسم المحدد في viewBox وفقًا لقيم width height :

الآن ، ماذا يحدث عندما نقوم بتصدير SVG من أدوات التصميم؟ في Sketch و Figma ، ستحصل جميع الأصول (بغض النظر عما إذا كانت طبقات فردية أو مجموعات أو لوحات فنية) دائمًا على viewBox مساويًا لأبعاد العنصر المُصدَّر width height المعينين بالبكسل ، أي ما يعادل القيمتين الأخيرتين من viewBox . في Illustrator ، تحتوي جميع الأصول على viewBox ، محددًا بنفس الطريقة كما في Sketch و Figma ، ولكن لم يتم تطبيق width height .

مجموعات

المجموعات هي الوسيلة الأساسية لتنظيم الطبقات في أدوات التصميم. بصرف النظر عن تعيين التسلسل الهرمي ، يتم استخدام المجموعات لتطبيق عمليات مجمعة ، مثل التحويلات ، على عناصر متعددة. لا يوجد فرق كبير في كيفية عمل المجموعات عبر Illustrator و Sketch و Figma ، ولحسن الحظ ، فإن الوظائف الأساسية لمجموعات SVG ( <g>…</g> ) هي نفسها إلى حد كبير.

يتحول

في SVG ، هناك خمسة تحويلات أساسية يمكننا تطبيقها على عنصر:

1. translate : يحرك العنصر على طول المحور الرأسي و / أو الأفقي ؛
2. scale : يقيس العنصر على طول المحور الرأسي و / أو الأفقي:
3. rotate : إنشاء دوران ثنائي الأبعاد بزاوية معينة محددة بالدرجات حول نقطة معينة ؛
4. skew (انحراف skewX أو انحراف skewY ): يحرف العنصر بزاوية معينة محددة بالدرجات على طول المحور الرأسي أو الأفقي ؛
5. matrix : أكثر وظائف التحويل المتاحة تعقيدًا وتنوعًا. نظرًا لأنه سيتطلب الكثير من الحديث في الجبر لشرح كيفية عمل تحويلات المصفوفة ، فإنه يتجاوز نطاق هذه المقالة. دعنا نعترف فقط بأن matrix تسمح لك بإجراء العديد من التحويلات المعقدة مثل التمدد والضغط والقص وما إلى ذلك.

ملاحظة : لاحظ أنه على الرغم من أن بعض تحويلات SVG تبدو مشابهة جدًا لتحويلات CSS ، إلا أنها ليست متماثلة. على سبيل المثال ، يوفر CSS وظائف استدارة ثنائية وثلاثية الأبعاد بينما يحتوي SVG على وظيفة تدوير ثنائية الأبعاد واحدة فقط. أيضًا ، بينما يقبل CSS وحدات زاوية مختلفة مثل الدرجات أو الراديان ، يتم دائمًا تعيين دوران SVG بالدرجات ، لذلك يمكن حذف الوحدة (على سبيل المثال ، rotate(45) ، NOT ~~rotate(45deg)~~ ).

يمكن تطبيق كل هذه التحويلات على أي عنصر SVG ، مثل الأشكال أو المجموعات ، وهي غير مدمرة ، أي لا تؤثر على الهندسة الأصلية للعنصر. نطبق التحويلات عبر سمة transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

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

التدوير هنا هو الاستثناء ، حيث يتم تخزين قيمها في المفتش بشكل منفصل عن هندسة العنصر ويتم تصديرها كوظيفة transform="rotate(…)" .

ومن المثير للاهتمام أن نفس القاعدة تنطبق على التقلبات (الانعكاسات) في Sketch و Figma (وليس في Illustrator!). كل واحد منهم لديه نهج خاص به بالرغم من ذلك. يستخدم Sketch مزيجًا من القياس السلبي والترجمة لتحقيق تأثير انعكاس ، بينما يقوم Figma بإجراء انعكاس داخل دالة مصفوفة واحدة.

نصف قطر الحدود

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

لكن ماذا عن SVG؟ هل عناصر <polygon /> و <path /> لها سمات rx و ry أيضًا؟ للاسف لا. أي شكل بخلاف المستطيل ، بمجرد قيامك بتدوير أي من أركانه ، سيتم تصديره دائمًا كعنصر <path /> يعالج الزوايا الدائرية كجزء لا يتجزأ من هندسة الشكل.

يملأ والسكتات الدماغية

يدعم كل من Illustrator و Sketch و Figma التعبئة والحدود باعتبارها الخصائص الأساسية لأي أشكال ، وهذا يحدث في SVG. لذلك ، يتم تصدير التعبئة المحددة في أدوات التصميم ضمن سمة fill ويتم تصدير علامات stroke ضمن سمة حد. لا تعتقد أن الأمر واضح ومباشر. الشر في التفاصيل.

تعبئة اللون

تعبئة اللون هي أبسط عمليات التعبئة المتاحة ويتم تحديدها بلون واحد عادي (على سبيل المثال #3fd8e2 ). في SVG ، يتم وضع هذه القيمة مباشرة في سمة fill (على سبيل المثال ، fill="#3fd8e2" ).

تقوم أدوات التصميم بتصدير تعبئة الألوان بقيم سداسية عشرية (على سبيل المثال #0000ff ) ، على الرغم من أنه ، في SVG ، يمكنك أيضًا استخدام جميع أنظمة التسمية الأخرى المعروفة لـ CSS ، مثل أسماء الألوان (مثل blue ) ، وقيم RGB (على سبيل المثال ، rgb(0,0,255) ) أو حتى قيم HSL (مثل hsl(240,100%,50%) ).

ملء التعتيم

عندما يتعلق الأمر بتعبئة العتامة ، يقبل SVG الألوان شبه الشفافة (مثل قيم RGBA) ، على الرغم من أنه يوفر أيضًا خاصية fill-opacity . نظرًا لقضايا التوافق ، يعد استخدام fill-opacity نهجًا موصى به وهو أيضًا الأسلوب المستخدم بواسطة Figma و Sketch. (لا أذكر Illustrator هنا ، لأن Illustrator لا يسمح لك بالتحكم في عتامة التعبئة). لذلك ، إذا كنت تريد إنشاء مربع SVG مملوء بلون أحمر نصف شفاف ، يمكنك القيام بما يلي:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

لكن النهج الموصى به (الذي يستخدمه Sketch و Figma) سيكون:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

ملء الانحدار

إذا كنت معتادًا على CSS ، فقد تعلم أنه عندما يتعلق الأمر بالخلفيات ، يكون التبديل بين الخلفيات الملونة والمتدرجة أمرًا بسيطًا نسبيًا. يمكن استخدام خاصية background-color (أو background ) نفسها في كلتا الحالتين. نظرًا لأن التدرجات في SVG أقدم بكثير من تدرجات CSS ، فإن تركيبها مختلف تمامًا أيضًا.

لاستخدام التدرج اللوني هو SVG ، تحتاج أولاً إلى تعريفه ضمن <defs>…</defs> ثم الرجوع إليه في سمة fill ، على سبيل المثال:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

لذا ، ما يحدث أثناء تصدير SVG عند استخدام تعبئة متدرجة هو أن التدرج اللوني يضاف إلى <defs> ويتم الإشارة إليه في الكود أدناه.

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

تعبئة النقش / الصورة

يقدم Sketch و Figma أيضًا تعبئة صورة حيث يتم استخدام رسم نقطي إما لملء العنصر بأكمله أو كنمط متكرر.

عندما يتعلق الأمر بتصدير تعبئة الصورة إلى SVG ، فإنها في الواقع تشبه التدرجات اللونية تمامًا. يتم تعريف الصور في <defs> باستخدام عنصر <pattern>…</pattern> ثم يتم الرجوع إليها ضمن سمة fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

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

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

حدود

سمة stroke في SVG ، مثل سمة fill تقبل الألوان بتنسيقات مختلفة ، على سبيل المثال ، hex أو RGB أو HSL. وبالمثل fill ، يمكنك التحكم في عتامة الحد stroke-opacity الحد. أيضًا ، كما هو الحال مع fill ، يمكن أن تستخدم السكتات الدماغية التدرجات كقيمة لها. يمكن تحقيق كل هذه التأثيرات في أدوات التصميم وتصديرها بنجاح إلى SVG.

قبعات السكتة الدماغية وينضم

هناك أيضًا بعض السمات المحددة للسكتة الدماغية. أولاً ، يمكنك التحكم في عرض الحد. تدعمها أدوات التصميم ويتم تصديرها stroke-width الحد. يمكنك أيضًا التحكم في نهايات ووصلات الحدود. يسمح لك SVG stroke-linecap من خلال سمات stroke-linejoin . هناك ثلاثة أغطية ممكنة: غطاء butt ، وغطاء round ، وغطاء square ، وثلاث وصلات محتملة: miter ، ووصلة round ، bevel . يمكن التحكم في كل من الأحرف الاستهلالية والصلات في Illustrator و Figma و Sketch وتتطابق الأحرف الاستهلالية والصلات المتاحة مع تلك المتوفرة في SVG.

ضربات متقطعة ومنقط

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

يسمح لك SVG بإنشاء خطوط متقطعة stroke-dasharray . يسمح stroke-dasharray تسلسل من الشرطات والفجوات المتعددة كقيمة تتطابق مع ميزات Figma و Illustrator. هذا يعني أيضًا أن Sketch لا يسمح لك باستخدام الإمكانيات الكاملة لـ SVG في هذه الحالة.

حالة الحافة المثيرة للاهتمام عبارة عن خط منقط. نحقق ذلك من خلال ضبط خط خط stroke-linecap round الشرطة على الصفر ، على سبيل المثال:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

ملاحظة : يواجه مستخدمو Figma حاليًا خطأً لا يسمح لهم بإنشاء خطوط منقطة. على سبيل المثال ، باستخدام 0, 10 أو 10, 0 كشُرط بنفس طريقة تفسير 10, 10 ويعطي خطًا متقطعًا عاديًا بدلاً من خط منقط. لحسن الحظ ، هناك طريقة للالتفاف حوله. بدلاً من استخدام الصفر ، استخدم قيمة صغيرة جدًا ، على سبيل المثال 0.0001, 10 - يجب أن ينتج عن ذلك خط منقط تمامًا ، كما هو متوقع.

محاذاة السكتة الدماغية

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

في مثل هذه الحالة ، يقوم Illustrator بتصدير الشكل وحدته كشكلين منفصلين. لذلك إذا قمت بتطبيق حد داخلي أو حد خارجي على مستطيل في Illustrator ، فسيؤدي ذلك في SVG إلى مستطيل وعنصر <path /> منفصل يمثل حد المستطيل ، على سبيل المثال:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

هذا السلوك له بعض الانعكاسات الهامة جدا. على سبيل المثال ، لم يعد بإمكانك تغيير عرض الحد أو جعله متقطعًا. كما أنها لن تحجيم بنفس طريقة الضربات "الحقيقية". علاوة على ذلك ، يقوم Illustrator بتغيير أبعاد الشكل الأصلي ، على سبيل المثال ، سيتم تصدير 100 × 100 مربع بضربة داخلية غامقة مكونة من 20 وحدة كمربع 120 × 120 لتجنب مشكلات التقديم. في النهاية ، إنها ليست مجرد سكتة دماغية. إنه مجرد شكل آخر بتعبئة.

لكن فيجما وسكتش لهما نهج مختلف. يقومون بتصدير جميع السكتات الدماغية بأمانة كضربات لكنهم يعيدون حساب أبعاد الشكل. لذا ، إذا كانت لديك دائرة نصف قطرها 5 وضربة داخلية تساوي 2 ، فإن ما ستجده في SVG سيكون دائرة نصف قطرها 4 (والحد لا يزال يساوي 2).

يسمح هذا الأسلوب لـ Figma و Sketch بتجنب معظم المشكلات المذكورة في حالة Illustrator. ومع ذلك ، مع بعض الأشكال الأكثر تعقيدًا ، قد يتبين أن هذه التقنية ليست دقيقة والنتيجة النهائية مختلفة قليلاً عما هو متوقع. هذا هو السبب في أن نهج Sketch و Figma ليس بالضرورة أفضل - إنه بالتأكيد أكثر دلالات وأداء ومرونة ، لكن حل Illustrator أكثر دقة.

ملاحظة: تنطبق نفس مشكلة محاذاة الحد على CSS أيضًا. لا تدعم خاصية CSS border المحاذاة الداخلية أو الخارجية أيضًا. ومع ذلك ، إذا كنت تريد ، يمكنك اختراق هذا السلوك بخصائص outline ومربع box-shadow .

يملأ وسكتات دماغية متعددة

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

الظلال والمرشحات والتأثيرات الأخرى

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

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

يجب تعريف المرشحات ، مثل الأنماط أو التدرجات ، لتطبيقها لاحقًا على طبقة. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. نحن نقدر. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

أوضاع المزج

تسمح أوضاع المزج (مثل Darken أو Multiply أو Overlay ) بمزج عنصرين أو أكثر من خلال دمج قيمهم بطرق مختلفة. معروفة جيدًا لمصممي الرسوم (والتطبيقات مثل Adobe Photoshop) ، تعمل أوضاع المزج في Sketch و Figma و Illustrator أيضًا.

في SVG ، توجد أوضاع المزج كأحد المرشحات. لديهم بدائية مرشح <feBlend /> الخاصة بهم. ومع ذلك ، نظرًا لأن بناء جملة <feBlend /> معقد إلى حد ما ، فإن Sketch و Figma و Illustrator يستخدمون CSS بدلاً من ذلك:

 .rectangle { mix-blend-mode: overlay; }

نظرًا لأن دعم متصفح mix-blend-mode جيد إلى حد ما في الوقت الحاضر ، لا ينبغي أن يكون مشكلة كبيرة. ومع ذلك ، إذا كان من المهم بالنسبة لك ضمان دعم متصفح مضاد للرصاص يتضمن Microsoft Edge و IE ، فسيتعين عليك استبدال أوضاع مزيج CSS بفلاتر SVG يدويًا.

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

الرموز والمكونات

في بعض أمثلة التعليمات البرمجية أعلاه ، ربما تكون قد لاحظت عنصرًا لم نناقشه بعد: عنصر <use>…</use> . يتيح لنا <use> تحديد العناصر وإعادة استخدامها في SVG ، وهو مشابه قليلاً للرموز الموجودة في Illustrator و Sketch أو المكونات في Figma. هل تتذكر تحديد الأنماط والتدرجات والفلاتر داخل <defs>…</defs> بحيث يمكن استخدامها في جزء آخر من شفرة SVG؟ في الواقع ، يمكن تعريف أي عنصر SVG وإعادة استخدامه بهذه الطريقة. بمجرد تحديد شكل أو مجموعة ، يمكنك الرجوع إليها في باقي المستند عدة مرات كما تريد ، على سبيل المثال:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

يمكنك أيضًا إعادة استخدام هياكل أكثر تعقيدًا باستخدام علامة <symbol>…</symbol> . يعمل الرمز كجسم منفصل داخل SVG ويمكن أن يكون له سمة viewBox الخاصة به (انظر العرض والارتفاع ومربع العرض للرجوع إليها).

هل يعني ذلك أنه سيتم تصدير رموز ومكونات أدوات التصميم الخاصة بنا إلى رموز SVG؟ في Illustrator - نعم ، إنها كذلك. في Sketch and Figma - لا ، لا. لماذا ا؟ في المقام الأول ، لأن رموز Illustrator بسيطة إلى حد ما ويمكن ترجمتها بسهولة إلى SVG بينما رموز Sketch ومكونات Figma ليست بهذه البساطة على الإطلاق ، وسيكون تصدير بعض ميزاتها (مثل التجاوزات المتداخلة) أمرًا صعبًا للغاية أو حتى مستحيلًا.

نص

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

يدعم كل من Illustrator و Sketch و Figma تصدير النص إلى SVG ويحسب طبقات النص إلى عناصر <text>…</text> في SVG. يتم عرض عناصر نص SVG مثل أي عناصر رسومية أو أشكال أخرى وما إلى ذلك مع الاختلاف الوحيد هو أنها نصوص.

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

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

خطوط عادية

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

لحسن الحظ بالنسبة لنا ، يلعب SVG بشكل جيد للغاية مع CSS ، مما يعني أنه يمكننا استخدام خطوط الويب بدلاً من خطوط SVG ، على سبيل المثال:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

اسمحوا لي ألا أخوض في تفاصيل تنفيذ خطوط الويب هنا بصرف النظر عن ملاحظة مهمة واحدة: لا تنسَ ذلك. بمعنى آخر ، إذا كنت تستخدم خطوطًا مخصصة في SVG ، فعليك أن تتذكر توفير هذه الخطوط للعميل ، كما هو الحال في HTML / CSS.

الخطوط العريضة

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

1. لا يمكنك تحرير النص المحدد - قبل التصدير أو بعده.
   عند العمل باستخدام نص محدد ، عليك أن تتذكر الاحتفاظ بنسخة قابلة للتحرير في ملف Illustrator أو Sketch أو Figma في جميع الأوقات. خلاف ذلك ، لن تتمكن من تحرير طبقات النص الخاصة بك ، بمجرد تحديدها. هذا يضيف تعقيدًا غير ضروري للعملية. ناهيك عن تحرير النص المحدد بعد تصدير SVG. يمكن تحديث النص في SVG في أي وقت. يتطلب النص المحدد فتح الملف المصدر في كل مرة تريد إجراء أصغر تغيير في النسخة.
2. النص المفصل لا يمكن الوصول إليه .
   يمكن قراءة النص في SVG ، مثل العناصر النصية الأخرى على الويب ، بواسطة برامج قراءة الشاشة والتقنيات الأخرى التي يمكن الوصول إليها. من خلال تحديد طبقات النص ، فإنك تمنع الأشخاص من استخدام هذه التقنيات من الوصول إلى المحتوى الخاص بك.
3. يتوقع الناس أن يكون النص نصًا .
   لا يعرف معظم الأشخاص الذين يستخدمون الويب شيئًا مطلقًا عن SVG أو HTML أو أدوات التصميم. إذا رأوا نصًا ، فإنهم يتوقعون أن يكون الأمر كذلك. قد يرغبون في تحديده أو نسخه أو وضعه في محرك بحث. كل هذا ممكن مع النص في SVG - ما لم تحدده.
4. لا تنسى تحسين محركات البحث .
   يمكن أيضًا الوصول إلى النص في SVG واستخدامه بواسطة محركات البحث. من خلال تحديد النص ، فإنك تجعل المحتوى الخاص بك أقل قابلية للبحث ويحتمل أن يكون أقل وضوحًا للجمهور.

ملخص

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