الدليل النهائي ل SVG

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

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

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

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

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

قابل ملف SVG ...

ما هو SVG ولماذا يجب عليك استخدامه؟

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

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

بعبارة أخرى ، تم تصميمها خصيصًا لاستخدامها جنبًا إلى جنب مع تقنيات الويب الأخرى. انهم مثاليون بالنسبة لنا.

في أواخر 90s ، قدم ماكروميديا ​​ومايكروسوفت (وغيرها من الشركات) VML ، ومن ثم قدم Adobe (وغيرها من الشركات) PGML كحلول ممكنة للصور المتجهة في مواقع الويب إلى W3C (وربما كبدائل لتنسيق PostScript القديم). قال W3C ، "لا ، سنقوم بعمل شيء خاص بنا ؛ ولكن شكرا على الأفكار! "وكانت النتيجة مجموعة العمل SVG.

في سبتمبر 2001 ، أصبح SVG 1.0 توصية W3C رسمية ، والباقي هو التاريخ. نوعا ما. تأخر Internet Explorer في اعتماد تنسيق SVG ، ولم يكن مفاجئًا لأحد. منذ ذلك الحين ، حدثت تحديثات موجهة نحو الأجهزة المحمولة ، وأكثر مع التوضيحات.

حتى الآن ، تعمل مجموعة عمل SVG على إنشاء SVG 2 والذي سيشتمل على تكامل تكاملي أكبر مع أشياء مثل HTML5 و CSS و تنسيق WOFF.

انها حصلت على الدعم

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

الدفع caniuse.com لإجراء تحليل أكثر عمقًا لما ينجح وما لا يميز المتصفحات.

كل شيء مستجيب ... أو يجب أن يكون

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

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

إمكانية الوصول

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

يمكن أن يساعد على إثبات موقعك على الويب في المستقبل

التكنولوجيا تتغير دائما. ما هو موجود هنا اليوم يمكن أن يختفي من حين لآخر ، لكن من المحتمل أن يكون SVG موجودًا منذ فترة حتى الآن. طالما أن W3C تحدد معايير الصناعة العالمية ، يبدو أن SVG ستظل المعيار الفعلي للرسومات المتجهة في المتصفح. استخدمها الآن ، وسيتم تعيين مواقع الويب الخاصة بك لفترة طويلة جيدة.

SVG التعليمية و How-tos

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

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

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

• باستخدام SVG: كان Chris Coyier يكتب برامج تعليمية سهلة الاستخدام لفهم CSS و HTML لسنوات على css-tricks.com. له التمهيدي على SVG لا يختلف. سأكون بما في ذلك روابط إلى الكثير من التفسيرات الأساسية والدروس ، ولكن هذا هو المكان الذي سأبدأ فيه. يتضمن هذا البرنامج التعليمي تعليمات أساسية لمستخدمي Adobe Illustrator.
• كيف تبدأ مع SVG: سأكون مقصرا إذا لم أقم بتضمينها مساهمة WDD الخاصة لتعليم SVG. تغطي Sara Vieira الرائعة دائمًا إنشاء رسوماتك وتصديرها وتنظيف الرمز ونقل سمات العرض إلى ملفات CSS والمزيد.
• قرار الاستقلال مع SVG: إذا كان متصلاً بالإنترنت ، فربما تحتوي Smashing Magazine على مقالة حول هذا الموضوع. هم يغطون أساسيات تنسيق SVG مع أسلوبهم المعتاد والاهتمام بالتفاصيل.
• رسومات متجهات قابلة للتوسع (سلسلة من المقالات): Hongkiat.com هو مورد آخر للتعلم المرتبط بجودة الويب والرسومات. بدلا من مجرد تقديم مقال واحد طويل ، فقد نشرت سلسلة كاملة منهم بواسطة ثوريق فردوس. اللغة الإنجليزية في بعض الأحيان غير موجودة ، ولكن التعليمات لا تزال واضحة وسهلة الفهم.
• سارة Soueidan: التصميم والمتعة تحريك الرسومات المتجهات مع المغلق: هذا هو فيديو لعرض تقديمي تم تقديمه في CSSconf EU 2014. وفيه ، تقدم سارة سويدان عددًا من النصائح والحيل ، وحتى بعض الاختراقات لتطبيق الأنماط والرسوم المتحركة على SVG على الويب. انها نصف ساعة طويلة ، لذلك الحصول على مريح والحفاظ على شيء لتدوين الملاحظات مع في متناول اليد. انها تستحق تماما وقتك.
• تصدير SVG للويب باستخدام Adobe Illustrator CC: يجب على مستخدمي Adobe Illustrator تحقق من هذا. وتعطي إحدى المدونات الخاصة بشركة Adobe شرحًا مفصلاً ، وأعني تعليمات مفصلة للغاية حول كيفية تصدير ملفات SVG للويب. تعرف على كيفية تحسينها إلى أصغر حجم للملف على الويب.
• SVGBasics: هذا الموقع بأكمله مكرسة لتعليم الناس كيفية إنشاء رسومات SVG من الصفر باستخدام XML. أوصي بهذا بالنسبة إلى من يتعامل مع النهاية الفعلية - أو حتى الواجهة الأمامية - لأي موقع ويب. معرفة كيفية عمل الكود يمكن أن تقطع شوطا طويلا في حل المشاكل على الطاير.
• SVG Tutorial by Jakob Jenkov: مطور آخر يركز على المطورين مجموعة من البرامج التعليمية ، هنا. الفرق الكبير؟ المؤلف شملت نسخ الفيديو من كل قسم. إذا كنت تتعلم بشكل أفضل من خلال استخدام كل من المرئيات والصوت مع دروسك ، فهذا هو المكان المناسب للبدء.
• The Simple Intro to SVG الرسوم المتحركة: العنوان يقول كل شيء. ديفيد والش يشرح كيفية إعداد الخاص بك عناصر SVG للرسوم المتحركة ، والتي تنسب للاستخدام مع عناصر مختلفة ، والتي ستستخدمها المكتبات ، وأكثر من ذلك. إنه ليس دليلاً كاملاً ، ولكنه سيقدم لك المفاهيم الأساسية اللازمة لبدء الرسوم المتحركة.
• مقدمة إلى SVG animation: هذا البرنامج التعليمي يذهب إلى مزيد من التفاصيل حول كيفية الذهاب بالضبط حول تحريك كائنات SVG الخاصة بك. علاوة على ذلك ، فإنه يتناول بعض المشاكل الشائعة التي قد تصادفها عند الرسوم المتحركة ، لذلك فهو يستحق القراءة.
• كيف يتم تصدير رموز متعددة إلى ملفات SVG من Adobe Illustrator: هل تريد إنشاء مجموعة من رموز SVG في Illustrator؟ حفظها كلها في ملف Illustrator واحد؟ تصدير كل منهم إلى ملفاتهم المنفصلة بنقرة واحدة.
• تحريك النص مع مسارات SVG: هل بالضبط ما تقوله في العنوان. احصل على الرسوم المتحركة على ربما استخدامها على الشعار. بالتأكيد تبدو باردة بما فيه الكفاية ...
• تحريك رموز SVG باستخدام CSS3 وجافا سكريبت: أحد أكبر استخدامات SVG هو الرموز ، ولسبب وجيه. أنشئ ملفًا واحدًا ، استخدمه في أي مكان في موقعك أو تطبيقك ، بأي حجم. أكثر ما يمكن أن تسأل عنه؟ هذا البرنامج التعليمي يوضح لك كيفية تنشيط هذه الرموز على الماوس.
• إنشاء مخطط SVG Scalable: تعد Infographics إحدى الطرق المفضلة للإنترنت لاستهلاك الحقائق في هذه الأيام. لما لا جعلها قابلة بشكل لا نهائي؟ رمي في بعض الرسوم المتحركة ، ويمكنك تفجير بعض العقول.
• جعل زر SVG HTML برغر: قل ما شئت عن زر همبرغر ، ربما لن تذهب إلى أي مكان. يمكنك كذلك استخدام SVG والرسوم المتحركة لجعله أبرد وأبسط زر همبرغر يمكنك ذلك. يغطي هذا الجزء كيفية تنشيط المسارات والسكتات الدماغية لجعل زر واحد يتحول حرفًا إلى حرف آخر ، لذا اعرضه.
• أمثلة Snap.svg والبرامج التعليمية: هذا هو دليل لاستخدام مكتبة جافا سكريبت Snap.svg (راجع قسم "الأدوات" أدناه) أدناه. تم تصميمه لمساعدتك على البدء في إنشاء عناصر SVG في JS وتحريكها وجعلها تفاعلية وهكذا.
• مقدمة إلى Raphaël.js: Raphaël.js هي واحدة من مكتبات JavaScript كبيرة ذات الصلة بـ SVG. هذا المقال يعلمك كيفية استخدامه. (مرة أخرى ، راجع قسم الأدوات أدناه.)
• رمز SVG متحرك: يبدو أن الناس يحبون الرموز المتحركة كثيرًا ، لذلك قد تتعلم أيضًا كل منهجًا لجعلها تستطيع ذلك. هنا نرى مكتبة Snap.svg في العمل مرة أخرى ، كما ينشئ المؤلف ، ثم يقوم بالرسوم المتحركة ، زر "تشغيل" مشغل الوسائط.
• لقطة في CSS و SVG - خاصية مسار المقطع والعنصر: هنا مقالة طويلة لطيفة حول كيفية استخدام لقطة SVG لعمل صور داخل الأشكال والصور داخل نص ضخم. قد تفكر في استخدامه لصنع عناوين كبيرة ومثيرة للإعجاب تتناسب مع محركات البحث ، نظرًا لأن برامج تتبع محركات البحث يمكنها قراءتها.
• جعل SVGs مستجيبة مع CSS: على الرغم من أن ملفات SVG قابلة للتوسع بشكل لا نهائي ، إلا أن الطرق المستخدمة لوضعها داخل صفحة الويب يمكن أن تسبب في بعض الأحيان مشاكل. هذا البرنامج التعليمي من عند codrops يشرح كيفية إصلاح المشكلات المختلفة التي قد تواجهها.
• تأثير الشكل Hover مع SVG: إنشاء سلسة وراقية المظهر تأثير تحوم المتحركة لمعاينة الصور. ( تحقق من العرض. )
• هو SVG Primer لمتصفحات اليوم من W3C: ليس تماما ، وبالتأكيد ليس أقلها ، لدينا مورد المقدمة من قبل الناس الذين جاءوا مع تنسيق SVG بأكمله في المقام الأول: W3C. انها ليست تعليمي أساسي أو مقدمة. وفقا للمقدمة ، تم إنشاؤه للمبرمجين المحترفين ، مصممي الجرافيك مع "عازمة تقنية قوية" ، والبعض الآخر الذين لا يمانعون النزول إلى التفاصيل الجريئة.
• SVG Tutorial by MDN: Like SVGBasics، this is a rather مجموعة واسعة من البرامج التعليمية ، المقدمة من شبكة مطوري موزيلا. على الرغم من أن البرنامج التعليمي نفسه واسع النطاق ، فإنه يعتبر "قيد التطوير". على سبيل المثال ، يمكن مشاهدة ذلك حاليًا في صفحة "الفلاتر" ، وهي فارغة. وفقًا للصفحة نفسها ، يكون البرنامج التعليمي في مرحلة مبكرة من التطوير. إذا كنت قادرًا ، فيُرجى المساعدة من خلال كتابة فقرة أو فقرتين وكتابتهما. نقاط إضافية لكتابة صفحة كاملة.

أدوات SVG

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

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

يؤدي بحث Google السريع عن "أدوات SVG" إلى عرض "حوالي 37،000،000 نتيجة" ، حتى تعرف أن هناك الكثير هناك.

أين إذن ، إذا بدأت؟

تطبيقات متميزة

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

إنكسكيب

إذا لم تكن تستخدم بالفعل حزمة رسومات متجهة ، إنكسكيب هو مكان رائع للبدء. تم إنشاء Inkscape في عام 2003 على شكل شوكة لمشروع آخر مفتوح المصدر يدعى Sodipodi (والذي كان يعتمد على مشروع OSS آخر) ، وأصبح معيار Inkscape هو برنامج رسوميات متجه مجاني. إنه ليس ممتلئًا تمامًا مثل Adobe Illustrator ، ولكنه أكثر من كافٍ لمعظم مشاريع مكافحة ناقلات الأمراض.

Serif DrawPlus Starter Edition

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

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

كاربون

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

تصميم وطباعة

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

SVG-تحرير

الاسم قليلا على الأنف ، ربما ، ولكن البرنامج أكثر من قادر. SVG-تحرير يعتمد بشكل كامل على تقنيات الويب ، وعلى وجه التحديد HTML5 و JavaScript و CSS. هذا يعني أنه لا توجد وظائف من جانب الخادم. ما هو أكثر من ذلك ، هو Open Source ، مما يعني أنه يمكنك تنزيله ، أو وضعه على خادمك الخاص ، أو حتى استخدامه من سطح المكتب.

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

Janvas

Janvas هو التطبيق الوحيد المستند إلى الويب في هذه القائمة غير مجاني تمامًا. هناك فترة تجريبية لمدة ثلاثين يومًا ، وبعدها يكلف الاشتراك 26 يورو سنويًا. إذا لم يكن أي من برامج تحرير SVG المستندة إلى الويب الأخرى قد جعلك سعيدًا ، فيمكنك فعل ذلك بالفعل.

تكون أدوات الرسم متقدمة ومألوفة بما فيه الكفاية ، ويمكن تعديل كل متغير في الشريط الجانبي ، ويمكنك حفظ مستنداتك في Google Drive. يمكنك إنشاء قوالب ، والتعاون في رسم المستندات ، وحتى تضمين ملفات CSS و JS التي تم إنشاؤها للتفاعل مع الرسومات.

الكل في الكل ، إنه عرض قوي.

موندريان

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

ارسم SVG

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

مكتبات SVG

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

Snap.svg

يفرقع، ينفجر هي مكتبة JS لتوليد وتفاعل مع SVG. تم تصميمه للمتصفحات الحديثة. نعم ، هذا يعني أنه يدعم فقط IE9 + ... ولكن إذا كانت المتصفحات القديمة ليست مصدر قلق ، فابحث عنها.

رافاييل

رافاييل، بخلاف Snap ، فهو متوافق مع المتصفحات القديمة. في الواقع ، يمكن أن تعمل مع IE6 + و Safari 3 و + و Chrome 5+. إذا كنت تقوم بتطوير شيء لنظام مؤسسي حيث قد يكون المستخدمون على أجهزة قديمة ، على سبيل المثال ، قد يكون Raphaël هو أفضل رهان.

jQuery SVG

مثل SVG و jQuery؟ أنا لست مندهشا حقا. ربما فقدت jQuery بعض الاهتمام الذي كان لها في السابق ، ولكنها لا تزال مكتبة للكثير منا.

jQuery SVG ، بعد ذلك ، ربما يكون المكون الإضافي الذي تبحث عنه. يحتوي على وظائف للرسوم المتحركة ، ووضع الرسوم البيانية ، وحتى الإضافات. هذا صحيح ، ملحقات للمكوِّن الإضافي. دعم المستعرض هو IE9 + ، ولكن يمكن استخدام الإصدارات الأقدم من IE مع تثبيت مكونات المستعرض المناسبة.

أنا لا أعتمد على المستخدمين الذين لديهم هذه المكونات الإضافية ، على الرغم من.

SVGMagic

SVGMagic هو حل قائم على jQuery-drop-in ، للمتصفحات القديمة (IE 7 و 8). بدلاً من إنشاء صور احتياطيًا يدويًا لكل ملف SVG تستخدمه ، يمكن لهذا المكون الإضافي توليدها في الحال. انها تتعامل مع الصور الخلفية على ما يرام كذلك.

كيف يفعل أي من هذا؟ يكتشف ما إذا كان متصفح المستخدم يمكنه التعامل مع SVG أم لا. إذا كان الأمر كذلك ، فإنه يذهب إلى النوم. إذا لم يكن كذلك ، فإنه يتصل ببرنامج نصي PHP من جانب الخادم ويخبره بإنشاء ملف PNG لصور SVG المعنية بالأبعاد الضرورية.

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

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

SVG.JS

وأخيرا ، وهنا خيار لعدادات البايت. SVG.JS يزن فقط في 11.8 كيلو بايت عند gzipped. على الرغم من صغر حجمه ، إلا أنه يدعم عددًا مذهلاً من الميزات (كما هو مذكور في صفحة المشروع):

• الرسوم المتحركة على الحجم ، والموقف ، والتحولات ، واللون
• تمديد غير مؤلم بفضل البنية النمطية
• المكونات المفيدة المختلفة المتاحة
• api موحدة بين أنواع الأشكال مع تحريك ، حجم ، مركز
• أحداث ملزمة للعناصر
• دعم كامل لأقنعة العتامة ومسارات القطع
• مسارات النص ، حتى الرسوم المتحركة
• مجموعات العناصر والمجموعات
• التدرجات الديناميكية

إقرأ ال كابل بيانات لمزيد من المعلومات.

الأسهم SVG

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

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

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

SVG Clipart على openclipart.com

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

والكثير من ذلك هو clipart-ish. والكثير من أعمال الهواة. هناك بعض الرسومات عالية الجودة ، إذا نظرتم. مهلا ، إنه مجاني.

SVG Stock

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

موارد SVG على deviantart.com

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

معرض SVG

معرض صغير كامل الأنماط القائمة على SVG. لقد تم تصميمه كأكثر من حالة عرض ، ولكن الملفات المصدر كلها متوفرة لراحتك.

أنماط SVG من svgeneration.com

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

SVG Clipart

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

SVG Studio

SVG Studio يقدم الآلاف من الرسوم التوضيحية مع شعور عصري واضح. يمكنك شراؤها في مجموعات فرعية صغيرة ، أو تنزيل الكتالوج الخاص بها دفعة واحدة. سوف يعيدك ذلك 500 دولار ، والتي ، على سبيل المثال ، لم تكن صفقة سيئة.

SVG على مواقع الأسهم الكبيرة

لا أستطيع أن أقول الكثير عن الفن المعروض على كل موقع ، لأنه يختلف على نطاق واسع من قبل المساهمين مع أي نمط العام. أكبر الأسماء هي istockphoto.com،shutterstock.com،bigstockphoto.com، و canstockphoto.com.

SVG Inspiration

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

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

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

التقاط الإعلان الصوري

هذا المثال جزء من Snap.svg جمع على CodePen. هل تحتاج إلى مثال مثالي على كيفية استخدام SVG في إحداث ثورة في الإعلانات عبر الإنترنت؟ هذه هي.

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

انظر القلم التقاط الإعلان الصوري بواسطة CJ Gammon ( cjgammon ) على CodePen .

واجهة سطح المكتب Jtop

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

وقت من التفكير

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

oblurlay

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

Codrops العروض

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

ملاحظة: ليست كلها مركزة على SVG ، ولكنها تستخدم جميعًا رسومات SVG بطريقة ما.

آثار تحميل الصفحة : مجموعة من تأثيرات تحميل الصفحة الإبداعية التي تستخدم رسوم SVG المتحركة مع Snap.svg. تكمن الفكرة في إظهار تراكب مع صورة متحركة مثيرة للاهتمام بينما يتم تحميل محتوى جديد.

أفكار لتأثيرات خفية تحوم : بعض الإلهام الإبداعي والإبهام التحليلي باستخدام تقنيات CSS الحديثة بما في ذلك العناصر ثلاثية الأبعاد للترجمة والعناصر الزائفة. كما أنهم يستخدمون SVG. الذهاب تحقق من عرض لمجموعة الثانية من الآثار.

SVG Drawing الرسوم المتحركة : تجربة صغيرة تستكشف استخدام الرسوم المتحركة لخط SVG لتسبق ظهور الرسومات أو عناصر موقع الويب ، مما يحاكي تحميلها.

تأثيرات القائمة خارج القماش : بعض الإلهام لتأثيرات قائمة خارج اللوحة والأنماط باستخدام عمليات نقل CSS وحركات مسار SVG.

تلميحات أداة تعريف الإلهام : مجموعة صغيرة من الأساليب المختلفة لتأثير الأدوات والتأثيرات لإلهامك. باستخدام تحويلات CSS ، و radius radius و SVG يمكننا إنشاء أدوات تعريف حديثة ومثيرة للاهتمام.

إخطارات الإعلام الإلهام : بعض الأفكار والتأثيرات البسيطة لإشعارات الموقع غير المزعجة. يتم استخدام برنامج نصي صغير لعرض بعض الأنماط وتستخدم رسوم متحركة CSS للتأثيرات.

إلهام لعناصر التحديد المخصصة : بعض الإلهام لتصميم نسخة مخصصة من عنصر التحديد. هناك العديد من الاحتمالات واليوم نحن نستكشف بعض الأفكار حول كيفية السماح للمستخدم باختيار خيار في الأسلوب.

إلهام للإنلاين مرساة الأنماط : بعض الإلهام لأساليب مرساة مبدعة وحديثة وتأثيرات تحوم باستخدام تقنيات مختلفة مثل انتقالات عناصر زائفة و SVGs.

سهم أنماط الملاحة : بعض الإلهام لأنماط التنقل للسهم وتأثيرات التمرير باستخدام رموز SVG للأسهم ، وتحولات CSS والرسوم المتحركة الخاصة بالتأثيرات.

تأثر عرض الشرائح : الشرائح في عرض الشرائح هذا تمايل أثناء تحركها. يعتمد التأثير على تصوير Dribbble لـ Sergey Valiukh وتم تصميمه باستخدام Snap.svg وتغيير مسارات SVG… الرجاء ملاحظة أن هذا تجريبي للغاية وتم اختباره فقط في أحدث الإصدارات من المتصفحات الحديثة.

قم بتغليفه

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

صورة مميزة، صورة متجه سلس عبر Shutterstock.

• ← 10 الإضافات وورد الحرة لشهر فبراير 2015
• 21 أدوات التعاون لتبسيط العمل الجماعي الخاص بك →