SVG Files: From Illustrator to the Web

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 منطقيًا ، ولكن بالنسبة إلى كل شيء آخر ، فكر فيه بعض الأفكار.

Demonstrating crisp font specimens Why bother with fuzzy raster formats — عرض عينات خط هش . لماذا تهتم بصيغ النقطية غامض؟

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

I havent finished this set of SVG icons yet but youre welcome to download and use them — لم أنتهي بعد من إعداد هذه المجموعة من رموز SVG ، ولكن يمكنك تنزيلها واستخدامها ..

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

الاعتراف بهذا الشعار؟

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

SVG decoration courtesy of fixateit — زخرفة SVG مجاملة من fixate.it

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

Iconic demonstrating SVG feedback — مبدع يدل على ملاحظات 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 ، ومن المحزن عدم تشغيله.

More details of SVG and browser support can be found on caniusecom — يمكن العثور على مزيد من التفاصيل حول SVG ودعم المتصفح على caniuse.com .

ولكن طالما كنت تستخدم متصفحًا حديثًا ، فسيتم فتح ملف 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" />

A beautiful crisp SVG infinitely scalable — A SVG ، هش جميلة ، وقابلة للتطوير بشكل لا نهائي!

ربما يكون هذا النهج هو الأسهل ، لكنه يعاني من مشاكله. ستقوم بعض المتصفحات ، لأسباب أمنية ، بتقييد ما يمكنك فعله باستخدام 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 على الطريق ، لذا ابق على اتصال!