كيفية تصدير أنماط SVG

كان من المفترض أنه يمكنك فقط إخراج صورة tileable كمؤشر gif أو jpg عند 72 نقطة في البوصة وقم بتلوينها باستخدام CSS. انها ممارسة شائعة بين مصممي الويب ، وكانت لسنوات. إنها طريقة سريعة وسهلة لإضافة نمط أو نسيج إلى عملك. ثم أصدرت تلك الأجسام المزعجة في Apple شاشات شبكية العين وقبل أن نعرفها بكسل لم يكن بكسل اي طول. فجأة أصبحت تلك الأنماط الحبيبة التاريخ.

أصبحت SVGs (Scaleable Vector Graphics) بسرعة معيارًا للرسومات الهشة على الويب. إنها تحل مشكلة الحاجة إلى إنشاء ملفات صور منفصلة لاستيعاب أجهزة شبكية العين. إنها حقًا ممتعة وسهلة الإنشاء ، وتفتح عالمًا من الاحتمالات ...

الخطوة 1: إنشاء نمط

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

افتح Adobe Illustrator وأنشئ مستندًا جديدًا بحجم 300 بكسل × 300 بكسل. ثم ، انتقل إلى Object> Pattern> Make وستتغير اللوحة القماشية. ستلاحظ أنه سيكون هناك مربع أزرق في منتصف لوح الرسم الخاص بك. أيضا ، سيتم فتح لوحة خيارات النمط .

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

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

بعد ذلك ، ارسم مربعًا ، 50 بكسل × 50 بكسل. قم بمحاذاة الحواف العلوية والسفلية للمربع.

بعد ذلك ، انقر مع الاستمرار فوق مؤشر الماوس فوق أداة القلم . ستظهر الأدوات الفرعية ، حيث يمكنك تحديد أداة Add Anchor Point Tool . من هنا ، أضف نقطة ربط إلى وسط الجانبين الأيمن والأيسر من الساحة.

باستخدام Direct Selection Tool ، حدد نقاط الربط (اضغط مع الاستمرار على مفتاح shift ). ثم ، من القائمة العلوية حدد Object> Transform> Move.

حرّك النقطتين 20px إلى اليمين لتشكيل نوع من السهم.

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

حدد الشكل الجديد واسحبه إلى الزاوية السفلية اليسرى من مربع النمط.

مع تحديد الشكل ، اسحب الزاوية وقم بتدويرها 180 درجة. (اضغط باستمرار على مفتاح shift لالتقاط إلى 180 درجة بالضبط.)

من القائمة العلوية حدد Object> Transform> Move and move the new shape -20px.

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

الخطوة 2: تصدير النمط

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

بعد ذلك ، غيّر حجم شاشتك بحيث تغطي كامل اللوحة الفنية بحجم 300 بكسل × 300 بكسل.

حدد ملف> حفظ باسم. احفظ ملفك بتنسيق .svg.

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

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

الخطوة 3: تحرير نمط SVG

افتح ملف .svg في محرر نصي. أنا أستخدم نص Sublime ، ولكن يمكنك استخدام Notepad أو Dreamweaver أو أيًا ما تقوم بتشفير HTML في.

افتح الملف نفسه في متصفح حتى تتمكن من معاينة أي تغييرات تجريها على الشفرة.

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

سوف ترى: في الأسفل. قم بتغيير القيمتين 300 إلى 100٪ بدلاً من ذلك. لذا ، سيبدو الرمز الخاص بك:

لا يجب أن تلاحظ أي تغيير حتى الآن. يجب أن يكون مربعًا. لماذا ا؟ نظرًا لأنه تم ضبط مربع العرض على 300 × 300 ، وهي أبعاد مربعة. لتعبئة العرض والارتفاع للمتصفح ، قم بتغيير الرمز على السطر 4 من viewBox = ”0 300 300 ″ إلى viewBox =” 0 0 100٪ 100٪ ” .

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

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

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

لتغيير ألوان نمطنا ، كل ما يجب علينا فعله هو تغيير قيم التعبئة.

إذا كنت من النوع الذي يحب النسخ واللصق ، فإليك كود SVG النهائي:

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

استنتاج

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