Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)
رسومات Vector قابلة للتطوير (SVG) هي تنسيق صور متجه بدأ في الحياة عام 1998. تم تطويره دائمًا مع وضع الويب في الاعتبار ، ولكن الآن فقط بدأ الويب بالفعل في اللحاق بالركب. لا يوجد إنكار لأهميتها اليوم ، لذلك دعونا نلقي نظرة على أساسيات أخذ SVG من Illustrator إلى متصفح الويب.
ملاحظة: أستخدم Adobe Illustrator CC لعرض الأمور هنا ، ولكن الإصدارات الأخرى لها خيارات وأدوات مماثلة (إن لم تكن متطابقة).
لماذا SVG مفيدة؟
تم تطوير تنسيق SVG ، ولا يزال يحتفظ به اتحاد شبكة الويب العالمية (W3C). يضم W3C مجموعة من الأشخاص الأذكياء الذين يسعون إلى توحيد الإنترنت ، مما يجعله مكانًا مفتوحًا ويمكن الوصول إليه للجميع.
يعتبر SVG مفيدًا للويب ، خاصةً هذه الأيام ، لأنه يتجاوز مشكلة دقة الشاشة. لا يهم مدى كثافة البيكسلات الجديدة للهاتف الذكي ، فسيتم عرض المتجهات دائمًا بشكل متدرج مثل الثلج الساقط حديثًا ، والذي لا ينطبق دائمًا على الصور المنقطعة.
حجم الملف دائمًا مشكلة مع الويب (لا يرغب أحد في الانتظار لتحميل صورة بحجم 5 تيرابايت في المتصفح عبر اتصال جوال) ، وبالتالي فإن تنسيق SVG هو تنسيق متجه مبسط. تم إنشاؤه باستخدام XML ، وتمت إزالة الكثير من "الأشياء" غير الضرورية ، مما يوفر ملفًا خفيف الوزن نسبيًا.
أخيرًا ، في ضوء كتل البناء هذه ، يمكن معالجة محتويات ملف SVG وتنسيقها تمامًا مثل أي عنصر آخر على صفحة الويب. يمكن عزل الأجزاء الموجودة داخل SVG ، ويمكن تغيير الألوان ، ويمكن تغيير وزن الضربات ، والشفافية ، ويمكننا أيضًا تطبيق بعض الفلاتر (مثل التعتيم) ، بل وحتى تنشيط - كل ذلك من خلال CSS وجافا سكريبت.
متى أستخدم SVG؟
إن مزايا جودة الخطوط الواضحة والقدرة على التعامل مع عنصر رسومي تفسر نفسها ، ولكن أين يمكنك الاستفادة من ذلك؟ فيما يلي قائمة سريعة بالمواقف التي تأتي فيها SVG إلى ذاتها:
رسومات كل يوم: إذا كنت تستخدم رسمًا على موقع ويب ، فكر في ما إذا كان يمكن أن يكون بتنسيق SVG أم لا. إذا كان الأمر كذلك ، فلماذا لا تستخدمه؟ قد يكون التصوير الفوتوغرافي مثالًا لا يكون فيه SVG منطقيًا ، ولكن بالنسبة إلى كل شيء آخر ، فكر فيه بعض الأفكار.

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

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

الديكور: لا أحتاج إلى بيع هذه الفكرة لحمل فنانين متجهين ، أليس كذلك؟

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

لذلك هذا هو SVG. شكل متجه ، تم تطويره مع وضع الشبكة في الاعتبار. دعونا نلقي نظرة على كيفية استخدامنا لها.
حفظ ملف كملف SVG
سنعمل مع صورة أساسية حقًا ، لإثبات ما يفعله SVG.
مستند جديد
افتح Illustrator ، وابدأ مستندًا جديدًا ( File> New Document ) ، وحدد اسمًا له إذا رغبت في ذلك ، واضبط Artboard على 300 × 300 بكسل.

اختر صورة
لا يوجد فرق كبير بين ما تستخدمه كمتجرب تجريبي في هذه المرحلة ، بل يمكنك الذهاب إلى شيء بسيط نسبيًا. لقد استخدمت الصورة الرمزية "بدون قراصنة مسموح بها" ، وهي متاحة مجانًا باستخدام خط "Webdings" (لم أظن أنني سأستخدم ذلك لأي شيء!)
انتقل إلى لوحة Glyphs ( Type> Glyphs ) ثم حدد الخط "Webdings" لتصفح مختلف الشخصيات المتاحة.

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

ثم انتقل إلى كتابة > إنشاء حدود خارجية .

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

سيتم بعد ذلك تقديم حوار آخر ، هذه المرة مع بعض خيارات SVG.

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

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

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

تعني (أكثر أو أقل) ما يلي:
- SVG 1.0 : أول (2001) تجسد SVG
- SVG 1.1 : جميلة إلى حد كبير مثل SVG 1.0 ، باستثناء أنه يمكن تقسيم SVG 1.1 إلى أنواع فرعية أخرى ، تلك التي تكون ..
- SVG Tiny 1.1 : هذا هو النوع الفرعي الأول من SVG 1.1 ويتم تحسينه مع وضع ويب المحمول في الاعتبار. إنه شكل بسيط للغاية من SVG ، مصمم لـ "أجهزة المحمول المقيدة للغاية". لا يدعم Tiny التدرجات ، أو الشفافية ، أو القص ، أو الأقنعة ، أو الرموز ، أو الأنماط ، أو النص المسطر ، أو النص المضرب ، أو النص الرأسي ، أو تأثيرات فلتر SVG.
- SVG Tiny 1.1+ : تطوير طفيف لـ SVG Tony 1.1 ، مضيفًا دعمًا للتدرجات والشفافية.
- SVG Basic 1.1 : هذا هو النوع الفرعي الثاني من SVG 1.1 ويتيح ميزات أكثر قدرة على الأجهزة المحمولة ، مثل الهواتف الذكية. لا يدعم Basic لقطة غير مستطيلة وبعض تأثيرات مرشح SVG.
- SVG Tiny 1.2 : كان الهدف في البداية هو أن تكون المواصفات الكاملة التالية لـ SVG ، ولكن انتهى بها الأمر إلى تطوير نوع ثانوي صغير. لا تسألني ما هو الفرق على الأرض.
قريباً ، سنتمكن من إضافة SVG 2.0 إلى هذه القائمة. في الواقع ، فإن الفروق الدقيقة في هذه الملامح لا علاقة لها بنا. إن SVG قادرة على التعامل مع جميع أنواع الأشياء ، ولكن للمتصفحات البسيطة تلتزم بالتعريفات الحالية لـ SVG 1.1 وستكون الرسومات الخاصة بك على ما يرام ، كلما كان ذلك ممكنًا ، على الويب.
الخطوط
يمكن أن تحتوي ملفات SVG على أكثر من مجرد مسارات متجهة. تعتبر كائنات النص مثالًا واحدًا ، ويتيح لك الخيار Font تحديد كيفية معالجة كائنات النص.

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

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

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

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

لا تدعم المتصفحات القديمة ، مثل Internet Explorer 8 والإصدارات الأقدم ، تنسيق SVG ، ومن المحزن عدم تشغيله.

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

أول شيء يجب أن تلاحظه هو أن ملف SVG قد احتفظ بالأبعاد التي قدمناها في الأصل. لقد تم فتح SVG في 300 × 300 بكسل ، وقد حددت Artboard الحدود الخارجية ، ووضع رمز القراصنة كما ينبغي أن يكون في المركز.

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

سيتم فتح هذا الملف في متصفح الويب على ما يرام ، ولكننا نحتاج إلى إضافة شفرة "ترميز" HTML لتضمين SVG. هناك عدد قليل من الطرق نحو القيام بذلك.
و <IMG>
الكلمات الدلالية نهج
أولاً ، يمكننا استخدام علامة صورة (والتي قد يتم استخدامها لاستخدامها مع ملفات JPG أو PNG وغيرها) تشير إلى مسار الملف بالضبط داخل السمة src = ""
. قم بلصق هذا المقتطف في ملف HTML الخاص بك:
<img src="SVG-Test.svg" />
وبافتراض صحة مسار الملف ، سيتم فتح صفحة HTML الخاصة بك في مستعرض مثل هذا:

نعم ، أعرف أن التأثير العام في هذه المرحلة هو بالضبط نفس الشيء عندما فتحنا SVG مباشرة في متصفح الويب ، ولكن الآن لدينا المزيد من القوة! على سبيل المثال ، يمكننا أن نجعل SVG أكبر على الفور ، باستخدام السمة width = ""
:
<img src="SVG-Test.svg" width="900" />

ربما يكون هذا النهج هو الأسهل ، لكنه يعاني من مشاكله. ستقوم بعض المتصفحات ، لأسباب أمنية ، بتقييد ما يمكنك فعله باستخدام SVG (مع JavaScript ، على سبيل المثال). دعونا ننظر إلى البدائل.
و نهج <كائن>
الكلمات الدلالية
يشبه استخدام العلامة <object>
، لكنك تشير إلى مسار الملف كما يلي:
<object type="image/svg+xml" data="SVG-Test.svg"></object>
والنتيجة هي نفسها على وجه التحديد:

بالنسبة للمتصفحات التي لا تدعم SVG ، يمكنك حتى وضع تحذير ضمن محتويات<الكائن>
، ليتم عرضها إذا لم يكن SVG:
<object type="image/svg+xml" data="SVG-Test.svg">This browser sucks</object>
يوافق العديد من مصممي الويب على أن هذا الأسلوب هو الطريقة الأكثر موثوقية ومرونة لاستخدام SVG في صفحة الويب في الوقت الحالي.
نهج مضمنة
لقد تحدثنا عن أصول XML الخاصة بـ SVG ، وإذا قمت بفتح ملف SVG باستخدام محرر النص الخاص بك ، فستشاهد شيئًا كالتالي:

واو ، يا له من هراء! في الواقع ، عندما تكون قد تجاوزت الصدمة الأولى ، يجب أن تكون قادرًا على رؤية بعض المعنى فيما بينها. يمكننا استخدام هذه XML كود مضمنة ، عن طريق لصق محتويات مباشرة إلى ملف HTML لدينا.
عندما تصبح أكثر إلمامًا بقاعدة XML SVG ، ستتمكن من إزالة أجزاء من الملف ، والتي تساعد جميعها في حجم الملف.
لا تتردد في إزالة خط <! DOCTYPE>
و <! - Generator: Adobe Illustrator
، وحتى <؟ xml
statement ، إذا كنت ترغب في ذلك.
كل ما تحتاجه حقا هو نسخة مبسطة ، تضم فقط بضعة علامات تمييز XML:
<svg> <path/> </svg>
ملف SVG الخاص بنا:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> <path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743 c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150c0-19.533,6.914-36.213,20.743-50.042 C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742C213.87,113.786,220.784,130.467,220.784,150z M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.537,150,90.537c-14.693,0-27.6,4.753-38.72,14.261 l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,36.819c0,16.422,5.804,30.438,17.415,42.048 c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791l-10.199-10.112l7.778-8.643l10.804,10.717 C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236 c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.071-5.013-7.605-11.092-7.605-18.236v-15.212 c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2.708,0.994-5.069,2.982-7.087 c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.593c7.548,5.302,11.322,12.044,11.322,20.225 V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45-3.774,3.674-7.173,3.674 c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/> </svg>
نهج CSS الخلفية
باستخدام CSS (بناء الجملة الخاص بالتصميم المستخدم مع HTML) يمكننا أيضًا أن نفرض أن ملف SVG يعمل كصورة خلفية لعنصر على صفحة الويب الخاصة بنا.
إننا نضغط الآن على حدود هذا البرنامج التعليمي ، ولكن إذا كنت مهتمًا بتعلم أساسيات CSS ، فألق نظرة على أفضل طريقة لتعلم CSS .
يمكننا استخدام ملف CSS منفصل ، بالارتباط به من مستند HTML الخاص بنا ، أو يمكننا استخدام علامات <style>
مباشرة داخل HTML الخاص بنا. قد تبدو أساليبنا كالتالي:
html { background-image: url(SVG-Test.svg); }
تنص قاعدة النمط هذه على أنه يجب عرض ملف SVG كخلفية لعنصر HTML الخاص بنا.
استنتاج
هذا عن يختتم الأساسيات! في هذا البرنامج التعليمي ، قمنا بتغطية إنشاء SVG واستخدام SVG الأساسي للويب.
إذا كنت قد تساءلت دائمًا عن SVG ، ولكنك لم تعرف أبدًا السبب الذي يجعلك تستخدمه ، أتمنى أن يكون هذا البرنامج التعليمي قد فتح عينيك. إن إمكانات هذا التنسيق هائلة وتتزايد طوال الوقت بفضل الخيال وسحر التقنية للأشخاص في صناعات الويب والرسومات.
لدينا المزيد من البرامج التعليمية حول الرسوم المتحركة والتفاعل مع رسومات SVG على الطريق ، لذا ابق على اتصال!
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post