دليل المستخدم إلغاء

SVG

تعرف على كيفية العمل باستخدام XML وJavaScript لإنشاء رسومات الويب التي تتفاعل مع حركات المستخدم باستخدام مؤثرات بالغة التعقيد، على سبيل المثال، الإبراز وتلميحات الأداة والصوت والرسوم المتحركة.

رابط Adobe Illustrator العميق

جرب في التطبيق
تطبيق عوامل تصفية SVG في بضع خطوات بسيطة.

حول SVG

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

تنسيق SVG مبني على تقنية XML ويوفر ميزات عديدة للمطورين وكذلك المستخدمين. 

يمكنك حفظ العمل الفني بتنسيق SVG باستخدام الأمر Save أو Save As أو Save A Copy أو Save For Web & Devices. للوصول إلى مجموعة كاملة من خيارات تصدير SVG، استخدم الأمر Save أو Save As أو Save A Copy. يوفر الأمر Save For Web & Devices مجموعة فرعية من خيارات تصدير SVG التي تنطبق على العمل الموجه حسب الويب..

تطبيق مؤثرات SVG

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

يوفر Illustrator مجموعة افتراضية من مؤثرات SVG. يمكنك تطبيق تأثير افتراضي بشكل مباشر أو تعديل تعليمات XML البرمجية الخاصة به لتخصيصه. يمكنك أيضًا إنشاء تأثيرات SVG جديدة.

ملاحظة:

لتعديل عوامل تصفية SVG الافتراضية في Illustrator، قم بتحرير ملف Adobe SVG Filters.svg في الموقع التالي باستخدام محرر نصوص:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <الإصدار>/<locale>
  • Windows: C:\Users\<اسم المستخدم>\AppData\Roaming\Adobe\Adobe Illustrator <version> Settings\<locale>\x64

يمكنك تعديل تعريفات عوامل التصفية الحالية وحذفها وإضافة تعريفات جديدة.

تطبيق تأثير افتراضي

  1. حدد كائنًا أو مجموعة (أو طبقة في لوحة Layers).

  2. انتقل إلى Effect > SVG Filters > Apply SVG Filter.

تطبيق تأثير مخصص

  1. حدد كائنًا أو مجموعة (أو طبقة في لوحة Layers).

  2. انتقل إلى Effect > SVG Filters > Apply SVG Filter.

  3. في مربع الحوار، حدد أحد التأثيرات ثم حدد Edit SVG Filter   . قم بتحرير التعليمة البرمجية الافتراضية، ثم حدد OK.

إنشاء تأثير جديد وتطبيقه

  1. حدد كائنًا أو مجموعة (أو طبقة في لوحة Layers).

  2. انتقل إلى Effect > SVG Filters > Apply SVG Filter.

  3. في مربع الحوار، حدد New SVG Filter   . أدخل التعليمة البرمجية الجديدة ثم حدد OK.

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

ملاحظة:

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

استيراد تأثيرات من ملف SVG

  1. حدد Effect > SVG Filter > Import SVG Filter.

  2. قم بتحديد ملف SVG الذي تريد استيراد المؤثرات منه، ثم حدد Open.

نظرة عامة حول لوحة SVG Interactivity

تمكنك لوحة SVG Interactivity من رؤية كل الأحداث وملفات JavaScript المرتبطة مع الملف الحالي.
يمكنك استخدام لوحة SVG Interactivity (Window > SVG Interactivity) لإضافة ميزة التفاعلية إلى عملك الفني عند تصديره للعرض في مستعرض الويب. على سبيل المثال، عن طريق إنشاء حدث يفعّل أمر JavaScript، يمكنك إنشاء حركة بسرعة على صفحة الويب عند قيام المستخدم بتنفيذ عملية معينة، مثل تحريك مؤشر الماوس أعلى كائن.

حذف حدث من لوحة SVG Interactivity

يمكنك استخدام لوحة SVG Interactivity لحذف حدث واحد أو كل الأحداث.

لحذف حدث واحد

  • حدد الحدث ثم حدد Remove Selected Entry   .

لحذف جميع الأحداث

  • حدد Clear Events من قائمة اللوحة  

عرض أو إضافة أو إزالة أحداث مرتبطة بملف

حدد Link JavaScript files   وحدد Add لإضافة ملفات JavaScript أخرى، ولإزالة إدخال JavaScript المحدد، حدد Remove.

إضافة SVG Interactivity إلى العمل الفني

  1. في لوحة SVG Interactivity حدد Event. (راجع أحداث SVG.)

  2. قم بإدخال نص JavaScript المقابل واضغط Enter.

أحداث SVG

onfocusin

لتشغيل الإجراء عندما ينتقل التركيز إلى العنصر، على سبيل المثال، عند تحديده باستخدام المؤشر.

onfocusout

لتشغيل الإجراء عند فقدان العنصر للتركيز (في الغالب عند انتقال التركيز لعنصر آخر).

onactivate

لتشغيل الإجراء عند النقر بزر الماوس أو الضغط على مفتاح، بناء على عنصر SVG.

onmousedown

لتنشيط الإجراء عندما يكون زر الماوس مضغوطًا على عنصر.

onmouseup

لتشغيل الإجراء عند تحرير زر الماوس على عنصر.

onclick

لتشغيل الإجراء عند النقر بزر الماوس على عنصر.

onmouseover

لتشغيل الإجراء عند نقل مؤشر الماوس على عنصر.

onmousemove

لتشغيل الإجراء أثناء وجود المؤشر على عنصر.

onmouseout

لتشغيل الإجراء عند تحريك مؤشر الماوس بعيدًا عن عنصر.

onkeydown

لتشغيل الإجراء عندما يكون أحد المفاتيح مضغوطًا.

onkeypress

لتشغيل الإجراء أثناء الضغط على أحد المفاتيح.

onkeyup

لتشغيل الإجراء عند تحرير أحد المفاتيح.

onload

تفعّل العملية بعد تنقيح مستند SVG بالكامل بواسطة المستعرض. استخدم هذا الحدث لتفعيل وظائف بدء التشغيل مرة واحدة فقط.

onerror

لتشغيل الإجراء عندما لا يتم تحميل عنصر بصورة صحيحة أو عند حدوث خطأ آخر.

onabort

لتشغيل الإجراء عند إيقاف تحميل الصفحة قبل إتمام تحميل العنصر.

onunload

لتشغيل الإجراء عند إزالة مستند SVG من نافذة أو إطار.

onzoom

لتشغيل الإجراء عند تغيير مستوى التكبير أو التصغير للمستند.

onresize

لتشغيل الإجراء عند تغيير حجم عرض المستند.

onscroll

لتشغيل الإجراء عند تمرير أو تحريك عرض المستند.

تلميحات لإنشاء ملفات SVG

  • استخدم الطبقات لإضافة بنية إلى ملف SVG. عند قيامك بحفظ عمل فني بتنسيق SVG، يتم تحويل كل طبقة إلى عنصر مجموعة (<g>). (على سبيل المثال، إن الطبقة المسماة Button1 تصبح <g id="Button1_ver3.0"> في ملف SVG.) وتصبح الطبقات المتداخلة مجموعات SVG متداخلة، ويتم الحفاظ على الطبقات المخفية باستخدام خاصية التصميم SVG display="none".

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

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

  • استخدم الرموز واجعل المسارات بسيطة في عملك الفني لكي تحسن من معدل أداء SVG. كذلك تجنب استخدام الفرش التي تنتج بيانات مسار كثيرة، على سبيل المثال، Charcoal، وFire Ash، وScroll Pen، إذا كان معدل الأداء هو العامل الأكثر أهمية.

  • استخدم الشرائح وخرائط الصور والنصوص التفاعلية لإضافة روابط الويب إلى ملف SVG.

  • لغة النصوص التفاعلية، على سبيل المثال JavaScript، توفر عددًا غير محدود من الوظائف التي يمكن إضافتها إلى ملف SVG. حركات مؤشر الماوس وضغطات لوحة المفاتيح من الممكن أن تفعّل وظائف النصوص التفاعلية، على سبيل المثال مؤثرات حركة المؤشر أعلى الكائن.

خيارات تصدير SVG المحسنة للويب

يتوفر خيار SVG Export (File > Export > Export As > SVG) جديد. يسمح لك سير العمل الجديد بإنشاء ملفات SVG قياسية ومحسنة على الويب لمشروعات تصميم الشاشة والويب الخاصة بك. لمزيد من المعلومات، راجع خيارات تصدير SVG.

المزيد مثل هذا

هل لديك سؤال أو فكرة؟

اسأل المجتمع

إذا كان لديك سؤال أو لديك فكرة لمشاركتها، فأقبل وشارك في مجتمع Adobe Illustrator. نود أن نسمع رأيك ومشاهدة أعمالك.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟