Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. SVG
Design

SVG Files: From Illustrator to the Web

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Set of Glossy Labels and Save them for Web
Quick Tip: How to Create a Simple Web Button Set Using the Appearance Panel

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 أفضل طريقة لعرض العلامات التجارية على الويب ، ببساطة وبساطة.  يمكن أن تكون الألوان دقيقة ، وجودة الخط نقية ويمكن استخدام نفس الملف مرارًا وتكرارًا عبر موقع ويب واحد ، ولكن يتم تغييره وفقًا لظروفه.  في احسن الاحوال.

Recognise this logo

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

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

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 بكسل.

svg-new-document

اختر صورة

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

انتقل إلى لوحة Glyphs ( Type> Glyphs ) ثم حدد الخط "Webdings" لتصفح مختلف الشخصيات المتاحة.

svg-webdingst

مع تحديد Text Tool ، انقر فوق Artboard ، ثم انقر نقرًا مزدوجًا فوق الحرف المختار الخاص بك لاستخدامه.

تحويل إلى الخطوط العريضة

سنقوم الآن بتحويل هذا النوع glyph إلى مخططات.

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

حدد الصورة الرمزية ، باستخدام أداة التحديد (V) :

svg-select

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

svg-outlines

ممتاز!  لدينا الآن كائن متجه على أساس المسار.

إنقاذ

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

svg-save

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

svg-options

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

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

svg-file

لدينا ملف SVG!

حتى ذلك الحين ، تلك الخيارات SVG

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

SVG مقابل SVGZ

بادئ ذي بدء ، كان بإمكاننا اختيار نسختين محتملتين من SVG في حوار الحفظ.

svg-save-dialogue

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

ملفات SVG

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

svg-profiles

تعني (أكثر أو أقل) ما يلي:

  • 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 تحديد كيفية معالجة كائنات النص.

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

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

svg-subsetting

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

خيارات

بينما نتناول موضوع التضمين ، يمكن أن يكون لآخر الخيارات المتبقية هنا تأثير على حجم الملف.

svg-embed

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

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

ملاحظة: من المستحسن الاحتفاظ بملف .AI قيد التشغيل لاستخدامه في التعديل.

زوجان س 'أزرار

svg-final

اوأخيراً ، تقوم الأزرار الثلاثة الموجودة أسفل قائمة حوار الخيارات بما يلي:

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

باستخدام SVG على الويب

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

متصفحات الانترنت

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

svg-browser

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

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

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

svg-in-browser

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

svg-in-browser-artboard

تضمين SVG داخل صفحة ويب

لقد قمنا حتى الآن بإنشاء ملف SVG وفتحناه في متصفح للتحقق من أنه يعمل.  الآن حان الوقت لاستخدام ملفنا بشكل صحيح داخل صفحة الويب.

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

هنا ملفي ، مفتوح في TextEdit لنظام التشغيل Mac OS X ، ولكن يمكنك استخدام أي نص ، أو محرر رمز من فضلك.

svg-text-editor

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

و <IMG> الكلمات الدلالية نهج

أولاً ، يمكننا استخدام علامة صورة (والتي قد يتم استخدامها لاستخدامها مع ملفات JPG أو PNG وغيرها) تشير إلى مسار الملف بالضبط داخل السمة src = "" .  قم بلصق هذا المقتطف في ملف HTML الخاص بك:

وبافتراض صحة مسار الملف ، سيتم فتح صفحة HTML الخاصة بك في مستعرض مثل هذا:

svg-in-browser-html

نعم ، أعرف أن التأثير العام في هذه المرحلة هو بالضبط نفس الشيء عندما فتحنا SVG مباشرة في متصفح الويب ، ولكن الآن لدينا المزيد من القوة! على سبيل المثال ، يمكننا أن نجعل SVG أكبر على الفور ، باستخدام السمة width = "" :

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

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

و نهج <كائن> الكلمات الدلالية 

يشبه استخدام العلامة <object> ، لكنك تشير إلى مسار الملف كما يلي:

والنتيجة هي نفسها على وجه التحديد:

svg-in-browser-html

بالنسبة للمتصفحات التي لا تدعم SVG ، يمكنك حتى وضع تحذير ضمن محتويات<الكائن> ، ليتم عرضها إذا لم يكن SVG:

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

نهج مضمنة

لقد تحدثنا عن أصول XML الخاصة بـ SVG ، وإذا قمت بفتح ملف SVG باستخدام محرر النص الخاص بك ، فستشاهد شيئًا كالتالي:

svg-xml

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

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

لا تتردد في إزالة خط <! DOCTYPE> و <! - Generator: Adobe Illustrator ، وحتى <؟ xml statement ، إذا كنت ترغب في ذلك.

كل ما تحتاجه حقا هو نسخة مبسطة ، تضم فقط بضعة علامات تمييز XML:

ملف SVG الخاص بنا:

نهج CSS الخلفية

باستخدام CSS (بناء الجملة الخاص بالتصميم المستخدم مع HTML) يمكننا أيضًا أن نفرض أن ملف SVG يعمل كصورة خلفية لعنصر على صفحة الويب الخاصة بنا.

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

يمكننا استخدام ملف CSS منفصل ، بالارتباط به من مستند HTML الخاص بنا ، أو يمكننا استخدام علامات <style> مباشرة داخل HTML الخاص بنا.  قد تبدو أساليبنا كالتالي:

تنص قاعدة النمط هذه على أنه يجب عرض ملف SVG كخلفية لعنصر HTML الخاص بنا.

استنتاج

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

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

لدينا المزيد من البرامج التعليمية حول الرسوم المتحركة والتفاعل مع رسومات SVG على الطريق ، لذا ابق على اتصال!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.