حول SVG

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

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

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

ستؤثر كيفية إعداد عملك الفني في Illustrator على ملف SVG الناتج. تذكر دائمًا الإرشادات التالية:

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

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

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

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

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

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

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

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

يوفر Illustrator مجموعة افتراضية من مؤثرات SVG. يمكنك استخدام المؤثرات محتفظًا بخصائص الافتراضية أو تحرير تعليمة XML البرمجية لإنتاج مؤثرات مخصصة أو كتابة مؤثرات SVG جديدة.

ملاحظة:

لتعديل عوامل تصفية SVG الافتراضية الخاصة بـ Illustrator، قم باستخدام محرر نصوص لتحرير عوامل تصفية Adobe SVG.svgالملف في Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator <version number> Settings/<location> folder. يمكنك تعديل تعريفات المرشح الموجودة وحذف تعريفات مرشح وإضافة تعريفات مرشح جديد.

  1. حدد كائنًا أو مجموعة (أو استهدف طبقة في لوحة Layers).
  2. قم بتنفيذ أحد الإجراءات التالية:
    • لتطبيق مؤثر مستخدمًا إعداداته الافتراضية، قم بتحديد المؤثر من القسم السفلي للقائمة الفرعية Effect > SVG Filters.

    • لتطبيق مؤثر مستخدمًا إعدادات مخصصة، اختر Effect > SVG Filters > Apply SVG Filter. في مربع الحوار، حدد التأثير ثم انقر فوق زر Edit SVGFilter .قم بتحرير التعليمة البرمجية الافتراضية، ثم انقر فوق OK.

    • لإنشاء مؤثر جديد أو تطبيقه، اختر Effect > SVG Filters > Apply SVG Filter. في مربع الحوار، انقر فوق زر New SVGFilter ،أدخل التعليمة البرمجية الجديدة وانقر فوق OK.

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

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

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

  1. اختر Effect > SVG Filter > Import SVG Filter.

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

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

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

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

  • لحذف حدث، قم بتحديده، ثم انقر فوق الزر Delete أو اختر Delete Event من قائمة اللوحة.
  • لحذف كل الأحداث، اختر Clear Events من قائمة اللوحة.

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

  1. انقر على الزر Link JavaScript Files .
  2. في مربع الحوار JavaScript Files، قم بتحديد مدخل JavaScript، ثم قم بتنفيذ إحدى الخيارات التالية:
    • انقر فوق Add للاستعراض للعثور على ملفات JavaScript إضافية.

    • انقر فوق Remove، لإزالة إدخال JavaScript المحدد.

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

  1. في لوحة SVG Interactivity، قم بتحديد حدث. (راجع أحداث 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 Export (File > Export > SVG) جديد. يسمح لك سير العمل الجديد بإنشاء ملفات SVG قياسية ومحسنة على الويب لمشروعات تصميم الشاشة والويب الخاصة بك.

الخيارات المتوفرة هي:

  • Styling. اختر الطريقة التي تريد كتابة التعليمة البرمجية الناتجة بها في ملف SVG. اختر بين تصميم CSS الداخلي أو النمط المضمن أو سمات العرض التقديمي.
  • خط. اختر طريقة تمثيل الخطوط في ملف SVG. تحافظ المخططات التفصيلية على تعريف المسار،وهي شديدة التوافق.
  • ‎Images: اختر ما إذا كنت تريد حفظ الصور كمضمنة في المستند‬‏‫ أو كملفات مرتبطة خارجية بالنسبة للمستند‬‏‫.
  • Object IDs: اختر الطريقة التي تريد تعيين أنواع المعرفات (الأسماء) بها إلى الكائنات الموجودة في ملف SVG. اختر بين Layer Names أو Minimal أو Unique. يحدد هذا الخيار كيفية التعامل مع أسماء الكائنات المكررة، وكيفية تسمية الكائنات في CSS المصدّرة.
  • Decimal‎: اختر مقدار المعلومات التي تريد الاحتفاظ بها حول دقة مواقع الكائنات. ستزيد القيمة الأعلى لـ Decimal من دقة طريقة تخطيط الكائنات، وهذا يزيد من الدقة البصرية لـ SVG الناتجة. ولكن زيادة قيمة Decimal تزيد أيضًا حجم ملف SVG الناتج المصدّر.
  • Minify: يُحسّن حجم ملف SVG عن طريق إزالة المجموعات الفارغة والمسافات الفارغة. يقلل اختيار هذا الخيار أيضًا من قابلية قراءة تعليمات SVG البرمجية الناتجة.
  • Responsive. يضمن تحديد هذا الخيار قيام SVG بإنشاء مقاييس داخل المستعرض. لا تتم كتابة قيم أحجام مطلقة.
  • Show Code: يفتح المحتوى الذي تم تصديره في محرر النص الافتراضي الخاص بك.
  • Show inbrowser (‬‏‫ (الأيقونة): لعرض الصورة في مستعرض الويب الافتراضي لديك.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت